Dynamic jQuery Waypoints Loop

Question

I'm struggling with the syntax for a loop that goes through and dynamically sets jQuery Waypoints.

Currently I have this code -

HTML Markup

For each 'process-anchor' I want to create a jQuery Waypoint

<div class="container">
   <div class="process-anchor-1"></div>
   <div class="process-anchor-2"></div>
   <div class="process-anchor-3"></div>
   <div class="process-anchor-4"></div>
   <div class="process-anchor-5"></div>
</div>

<div class="image-list">
    <div class="process-image"><img src="test.jpg"/></div>
    <div class="process-image"><img src="test.jpg"/></div>
    <div class="process-image"><img src="test.jpg"/></div>
    <div class="process-image"><img src="test.jpg"/></div>
    <div class="process-image"><img src="test.jpg"/></div>
</div>

Javascript Code (currently)

var process_fixed_anchor_1 = $('.process-anchor-1').waypoint({
      handler: function(direction) {
         $(".process-image-1").toggleClass("fade-in");
      }
});

I want to run through and create waypoints however the amount of anchor DIV's may change. How could I edit the above code to be dynamic so I don't have to be specific every time?

Thanks,

DIM3NSION

Answer 1

Still just a bit unclear on what you're trying to accomplish, but here's how I would dynamically assign waypoints to a page given an unknown number of anchor divs:

Markup

I have added class="trigger-anchor" to your anchor divs with the hopes of finding a more approachable way to target those divs. Also put a common class on your process-image-* rather than letting them all be unique.

<div class="container">
    <div class="process-anchor-1" class="trigger-anchor">
        <div class="process-image"><img src="test.jpg"/></div>
    </div>
    <div class="process-anchor-2" class="trigger-anchor">
        <div class="process-image"><img src="test.jpg"/></div>
    </div>
    <div class="process-anchor-3" class="trigger-anchor">
        <div class="process-image"><img src="test.jpg"/></div>
    </div>
    <div class="process-anchor-4" class="trigger-anchor">
        <div class="process-image"><img src="test.jpg"/></div>
    </div>
    <div class="process-anchor-5" class="trigger-anchor">
        <div class="process-image"><img src="test.jpg"/></div>
    </div>
</div>

JavaScript

I'll run an .each() on the elements where class="trigger-anchor" to build by waypoints. This way I don't have to declare var loops = 5; or anything like that.

<script type="text/javascript">

    // Wait until our DOM is ready
    $( document ).ready( function() {

        // Keep Track of how many we make and store 
        // our instances in an array to access if 
        // we need to later
        var anchors = array();

        $( '.trigger-anchor' ).each( function() {

            var tmp_instance = $( this ).waypoint({
                handler: function(direction) {
                    $( this ).children('process-image').toggleClass("fade-in");                        
                }
            });

            anchors.push( tmp_instance );

        } );

    } );

</script>

See if that helps to get you in the right direction.

Answer 2

According to Waypoints website http://imakewebthings.com/waypoints/guides/jquery-zepto/ , you can accomplish the same thing as follows (waypoints will loop and fill your array with each instance). I used this method on my site.

//within your document.ready function

var anchors = array();

anchors = $( '.trigger-anchor' ).waypoint({
    handler: function(direction) {
        $(this).children('process-image').toggleClass("fade-in");
    }
});

//ALTERNATE METHOD
//you can also include your handler in the waypoint call

anchors = $( '.trigger-anchor' ).waypoint(function(){
    $(this).children('process-image').toggleClass("fade-in");
});