Jquery - Fancybox - Background Page Shift Issue

Question

Fancybox is loading well and everything opens as I want it to, but the issue occurs in the background-- it's visible (and disturbing) that my entire page shifts exactly 8 pixels to the right when the box loads and returns to normal position on box closing.

I can't link to the site as it's on a dev server behind our company firewall.

I'm using the following scripts: Fancybox, Quform, and Jquery Banner Rotator. The fancybox call is occurring inside the rotator. I haven't modified any widths/heights of the original jquery fancybox CSS.

I have the body width set to 100% and margin set to auto, and internal divs with a min-width of 1138px and margin set to auto.

Does anyone know where I should look to fix the issue?

Answer 1

I just solved it by adding "margin-right: auto !important" to my body element :) This over rules Fancyboxes own margin-right: 0.

Answer 2

I had a very similar situation recently with Fancybox v2. My initial page had content below the fold and therefore had a scrollbar (perhaps the OP did as well, it's not clear). Firing the Fancybox link caused the same shift in page body and clearing the scrollbar; closing the Fancybox image shifted the body back and re-enabled the scrollbar.

The adjustments to .fancybox-lock did not work for me but what did was including the following option when instantiating my Fancybox object:

helpers: { 
    overlay: { 
        locked: false 
    } 
}

The only caveat is this does not lock your Fancybox to the center of the page if you had scrolling, i.e. the page with Fancybox view is entirely scrollable. For me, it was the lesser of two evils.

Answer 3

I had the same issue recently. Find .fancybox-lock in the fancybox CSS, and change it to:

.fancybox-lock {
    overflow: hidden;
    margin: 0 !important;
    }

Voila! :D

Answer 4

You can disable the locking feature:

$(".fancybox").fancybox({
    helpers : {
        overlay : {
            locked : false
        }
    }
});

Worked for me.

Answer 5

It's a known problem, here you can find out more: issues, fancyapps @ GitHub

I'm using fancybox2 (version 2.1.5). I've solved the problem by slightly modifying the 'jquery.fancybox.css'-file:

Find the 'Overlay helper'-section (starts at line 165) and change two rules:

.fancybox-lock {
/*  overflow: hidden !important;*/
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    width: auto;
}

and the second rule:

.fancybox-lock .fancybox-overlay {
/*  overflow: auto;
    overflow-y: scroll;*/
    overflow: hidden !important;
}

This works fine enough (imho), although the page is scrollable behind the overlay.

At least the disturbing 'shifting right'-effect is suppressed.

I discovered later that elements which were positioned with "right: 0;" were shifted to the left by the width of the vertical scrollbar.

That is because of a margin-right is set by the fancybox.js-code by appending a style-node inside the head-element.

To fix the problem just modify a single line of code inside the jquery.fancybox.js file or the jquery.fancybox-2.1.5-pack.js file, depending on which one you are using.

in line 2017 of the unpacked version:

$("<style type='text/css'>.fancybox-margin{margin-right:" + (w2 - w1) + "px;}</style>").appendTo("head");

// change it to

$("<style type='text/css'>.fancybox-margin{margin-right: 0;}</style>").appendTo("head");

// perhaps comment out the complete line, I haven't testet it though

or in the .pack-file (line 46 near EOL):

/* [much more code before] */ f("<style type='text/css'>.fancybox-margin{margin-right:"+(d-a)+"px;}</style>").appendTo("head")})})(window,document,jQuery);

// change it to:

/* [much more code before] */ f("<style type='text/css'>.fancybox-margin{margin-right:0;}</style>").appendTo("head")})})(window,document,jQuery);

// or try to remove the "f().appendTo()"-part completely (untested)