Home > DeveloperSection > Forums > Fancybox update() function reseting my scroll
Chris S
Chris S

Total Post:48

Points:336
Posted on    November-24-2014 10:01 PM

 JavaScript JQuery  HTML 
Ratings:


 1 Reply(s)
 681  View(s)
Rate this:

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?



Kamlakar Singh
Kamlakar Singh

Total Post:194

Points:1396
Posted on    November-25-2014 2:03 AM

I 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();

}


Don't want to miss updates? Please click the below button!

Follow MindStick