left/right arrows + additional javascript

[criesner]

Hi,

I'm trying to write some javascript to respond to the click of .navigate-left and .navigate-right arrows. Is there a class name (or a way to write the java script) that will let me tap into this?

I've found that .navigate-right.enabled works for the right and .navigate-left works for the left.
However, it only responds to the click of the arrows on desktop, it does not work for click or swipe on mobile, and key press, trackpad swipe on desktop.

Here's a stripped down example:
http://chrisriesner.com/DT_web-experiments/DT-reveal-arrows-11-12-13/reveal-arrows-clean.html#/2

<script type="text/javascript">
        $(document).ready(function(){
                // RIGHT ARROW 
                $(".navigate-right.enabled").click(function(){
                    $('#side-column-textbox').animate({top: "-=300px"}, 1020);
                    })  

                // LEFT ARROW 
                $(".navigate-left").click(function(){
                    $('#side-column-textbox').animate({top: "+=300px"}, 1020);
                    })      
        })
    </script>

I've tried a ton of different solutions with no luck, so any help would be great!!
thanks,
-chris

[criesner]

(sorry for the double post do these have to be approved before they show up?)

[criesner]

Still not sure where this post is showing up but if anyone can see this, help on this would be really awesome, it's my last major problem to solve (I think)

I made some progress when I learned about the addEventListener function
I did have to setup a different event name even though the function was the same.
See demo here:
http://chrisriesner.com/DT_web-experiments/DT-reveal-arrows-11-18-13/reveal-arrows-addevents.html#/

            <section >
                <h2>PAGE 0</h2>
            </section >


            <section data-state="data-event-textbox">
                <h2>PAGE 1</h2>
            </section>


            <section data-state="data-event-textbox1">
                <h2>PAGE 2</h2 >
            </section>


            <section data-state="data-event-textbox2">
                <h2>PAGE 3</h2>
            </section>


    <script>

        document.addEventListener('data-event-textbox', function(){
            $('#side-column-textbox').animate({top: "-=84%"}, 1020);

        });

        document.addEventListener('data-event-textbox1', function(){
            $('#side-column-textbox').animate({top: "-=84%"}, 1020);

        });

        document.addEventListener('data-event-textbox2', function(){
            $('#side-column-textbox').animate({top: "-=84%"}, 1020);

        })
    </script>

This got mouse scroll and mobile swipes working with my .animate ! However the problem I have now is that when swipe left or click left the function should .animate +=84% instead of the -=84%

Any thoughts on how to trigger the slide when swiping/clicking left so i can animate the opposite way?

Also, to give you a better view of how it should work you can see how i'm implementing this. It is only triggered with the arrows and on desktop (slide pop's up on the 3rd slide)
http://chrisriesner.com/DT_web-experiments/DT-cleanup-11-21-13/passages-sonora-riesnerxlondon-x.html#/

Thanks for any help!
-chris

[hakimel]

Hey, sorry but this isn't the right forum for that question since it's related to jQuery animations. Please try http://stackoverflow.com/ instead.