I am using the Waypoints Jquery plugin: http://imakewebthings.github.com/jquery-waypoints/#documentation
My issue is that I want to load content dynamically when the waypoint is reached. Initially, content is loaded dynamically, then I want the waypoint at the end... when the waypoint is reached, I want to load more content in front of it, etc.
Structure:
<div class="viewport">
<div class="viewport-content">
<div id="messages">
/* {messages loaded here} */
</div>
/* #waypoint added after messages loaded via appendTo('.viewport-content') */
<div id="waypoint"></div>
</div>
</div>
The viewport/viewport-content form the scrollable region via css. I was using the appendTo to append the waypoint after the initial messages had loaded, otherwise the waypoint was at the top and was hit. However, when I use the appendTo after loading the initial messages, when I scroll down, I can't get it to work properly.
Here is my current JS in regards to the waypoint:
var opts = {
offset: 'bottom-in-view',
context: '#central-pane .viewport-content',
};
$('#waypoint').waypoint(function(event, direction) {
alert("You've hit my waypoint! ow!");
$('#messages').append($loading);
messagesLoad(); /* loads more messages via appendTo('#messages') */
$('#waypoint').waypoint(opts);
}, opts);
Any ideas on how I can get this to work?