FANCYBOX UPDATE() FUNCTION RESETING MY SCROLL

Chris S

Total Post:48

Points:336
Posted by  Chris S
JQuery  HTML 
 1065  View(s)
Ratings:
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?

  1. Kamlakar Singh

    Post:194

    Points:1396
    Re: Fancybox update() function reseting my scroll

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

    }

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!