javascript - jQuery pop-up not working on page with infinite scrolling -
i've got website i'm working has set of products (image @ first) , when hover-over them present pop-up item details, buy button, etc.
this works great except when scroll down , infinite scrolling kicks in , loads set of products, correct javascript , css non-infinite products above it, not present pop-up.
what i've tried resolve issue:
- moved calls jquery call on resize of window
- moved calls hoverintent (jquery plugin - http://cherne.net/brian/resources/jquery.hoverintent.html)
- if loading more initial 20 products issue occurs once "infinite scrolling" activated scrolling below initial set of products.
the code using pop-up is:
var hidetimer = null; var hoverelem = null; function openfbox() { $(this).attr('href', $(this).find('.quickview').attr('href')); $.facebox({ div: $(this).attr('href') }); } function closefbox() { if (hoverelem != 'facebox_overlay') { // nothing } else { hidetimer = settimeout(function() { if (hoverelem == 'facebox_overlay') closeit(); }, 750); } } $(".thumbnail") .hoverintent({ sensitivity: 7, interval:400, timeout:0, over: openfbox, out: closefbox });
the code infinite scrolling is: https://gist.github.com/rickydazla/1390610
when attatch hover listener, need use jquery method .on(). attach listener permanent element in dom, wait action on specified children.
$("parentelementselector").on("mouseenter", "targetselector", function() { $(this).attr('href', $(this).find('.quickview').attr('href')); $.facebox({ div: $(this).attr('href') }); }).on("mouseleave", "targetselector", function() { if (hoverelem != 'facebox_overlay') { // nothing } else { hidetimer = settimeout(function() { if (hoverelem == 'facebox_overlay') closeit(); }, 750); } });
the parent body , targets .thumbnail
Comments
Post a Comment