filtering - Masonry filter + infinite scroll issue -
i built jquery masonry layout infinite scroll , filtering.
my problem when filter clicked before scrolling, content loaded infinite scroll not filtered.
is there way fix it?
here link check: http://www.jcvergara.com/working/
here full masonry code:
$(document).ready(function(){ var $container = $('.container'); // initialize $container.masonry({ columnwidth: 250, itemselector: '.item', isfitwidth: true }); $container.masonry( 'on', 'layoutcomplete', function() { $('.right-line').css('height', $('.container').height()); }); $('.right-line').css('height', $('.container').height()); // infinite scroll var $container = $('#content'); $container.infinitescroll({ navselector : "nav.posts-navigation", nextselector : "div.nav-previous a:first", itemselector : "#content div.item", }, // trigger masonry callback function( newelements ) { var $newelems = $( newelements ); $container.masonry( 'appended', $newelems ); // open posts in ajax $('.post-link').click(function(){ $('.openarticle').css('display', 'block'); var post_link = $(this).attr('href'); $('#openthis').html('<div class="title"><h2>loading..</h2><div class="text"></div>'); $('#openthis').load(post_link); $('<a></a>', { text: 'close', class: 'close', id: 'close', href: '#' }) .prependto($('.openarticle .main')) .click(function() { $('.openarticle').css('display', 'none'); $('#close').remove(); }); return false; }); } ); // filtering $(".cat-item a").click(function(e) { e.preventdefault(); var cut_url = "http://www.jcvergara.com/category/"; var group = $(this).attr('href'); group = group.replace(cut_url, '').slice(0,-1); var group_class = "." + group; $(".cat-item a.active").removeclass('active'); $(this).addclass('active'); if(group != "all") { $(".item").hide(); $(group_class).show(); $container.masonry(); } else { $(".item").show(); $container.masonry(); } }); });
try using "on" click function:
// filtering $(".cat-item a").on( "click",function (e) { e.preventdefault(); var cut_url = "http://www.jcvergara.com/category/"; var group = $(this).attr('href'); group = group.replace(cut_url, '').slice(0,-1); var group_class = "." + group; $(".cat-item a.active").removeclass('active'); $(this).addclass('active'); if(group != "all") { $(".item").hide(); $(group_class).show(); $container.masonry(); } else { $(".item").show(); $container.masonry(); } });
Comments
Post a Comment