I use the plugin waypoints (http://imakewebthings.com/jquery-waypoints/)
*EDIT : working solution : http://pastebin.com/x95Qf7m8 *
What I'm trying to do is to load the share widget contained in my link when the "share-this" tag is scrolled down.
You may notice the use of head.ready which is just a replacement of document.ready as I use headjs to load my external scripts.
My question is simple, why is it working when triggered by a click, but not using the waypoint plugin ? Any help would be welcome
My website : http://www.entendu.info
head.ready(function() {
$('.share-this').waypoint(function(event, direction) {
if (direction === 'down') {
var contentId = $('.share-this').attr('rel');
var uri = $('.share-this').attr('rev');
e.preventDefault();
//console.log('clicked');
$.ajax({
url: 'http://www.entendu.info/share',
type: 'GET',
dataType: 'html',
data: {id:contentId, url:uri},
complete: function(xhr, textStatus) {
},
success: function(data, textStatus, xhr) {
$('#'+contentId).html(data);
},
error: function(xhr, textStatus, errorThrown) {
}
});
}
else {
// do this on the way back up through the waypoint
}
});
});
<div class="content" id="{$posts[i].PID}" style="float:left">
<a href="" class="share-this" rel="{$posts[i].PID}" rev={$posts[i].name|escape:'htmlall'}">
<img src="{$imageurl}/share2.png" width="379" height="22" style="opacity: 0.5; float:left"></a>
</div>
In the function you say e.preventDefault() but there is no e. Your event is named event. If you look in your console you will see the error "e is not defined". Plus, preventing default within a waypoint handler does nothing, so I'm not sure what the point of that line is anyway.