I have a fancybox popup in which I have multiple accordions. So the size of the popup varies on clicking of these accordions. Each of the accordion is an anchor tag.
On expanding one or more accordions, there is a limit(max-height) to which my popup will expand, after which the content inside the popup becomes scrollable, i.e, the content inside the div with class .fancybox-inner .
Whenever an accordion is clicked I call $.fancybox.update() as the popup need to be re-sized and respositioned.
But $.fancybox.update() resets the current scroll position of the content inside popup.
So i made this function adjustPopup and call it when any of the accordion is clicked
function adjustPopup(target) {
var fancyboxInner = $('.fancybox-inner')[0],
scrollTop = fancyboxInner.scrollTop;
//$.fancybox.update() function resets the vertical scroll of fancybox popup, so we store the
//scrollTop before calling $.fancybox.update() and then assign it back when updated.
$.fancybox.update();
fancyboxInner.scrollTop = scrollTop;
}But this doesn't work. Even though i set the proper scrollTop value its again reset to 0 somehow. Does anyone know whats the issue here?
Anonymous User
25-Nov-2014I found the solution. I had to dig into $.fancybox.update() function where I found that this function does stuff asynchronously. So my scroll was getting reset even though I was setting the scroll right after calling update.
I realized that there is an event 'onUpdate' on which the update is actually completed.
So I modified my adjustPopup function to this:
function adjustPopup(target) {var fancyboxInner =$('.fancybox-inner')[0],
scrollTop =fancyboxInner.scrollTop;
//$.fancybox.update() function resets the vertical scroll of fancybox popup, so we store the
//scrollTop before calling $.fancybox.update() and then assign it back when updated.
$.fancybox.one('onUpdate',function() {
fancyboxInner.scrollTop= scrollTop;
});
$.fancybox.update();
}