Fancybox "dances" around

Question

So I'm having this trouble with FancyBox where when the body of the page (main page) is being scrolled, the box shifts position to the left and top randomly.

Attached a GIF to demonstrate the issue:

I'm using Fancybox v2 as far as I know.

The website is here (under the "daily training tab").

This is the code I use to call the fancybox:

$(".signup").fancybox({
    maxWidth: 800,
    maxHeight: 600,
    fitToView: false,
    width: '70%',
    height: '70%',
    autoSize: false,
    closeClick: false,
    openEffect: 'none',
    closeEffect: 'none'
});

I have checked their API but couldn't understand what makes the position to "dance".

===============

EDIT

So I managed to isolate the problem. when I add the "openEffect: 'none' " the thing goes wild. without it the box stays static and sticks to the top left side of screen

any further ideas ?

it looks like you are using `window on scroll` functionality? — Vitorino fernandes, Oct 07 '14 at 15:12
@VitorinoFernandes not in my private script, but I have : bootstrap.js , hammer.js , jQ(plus the files for : easing, mousewheel, animate and superslides) and owlCarousel... — Aviad, Oct 08 '14 at 14:07

score 0 · Answer 1 · answered Oct 07 '14 at 11:26

0

if you don't need the website to be scrolled, set closeClick to true or remove it, the window will be shown as modal and you will not be able to scroll the main page while modal is opened.

var busy = false;
// the html class is "o"
$(".o").fancybox({
    //modal: true
    beforeClose: function() {
        if (busy) {
            return false;
        }
    }
});

Example here : http://jsfiddle.net/MLjAT/

answered Oct 07 '14 at 11:26

Supamiu

8,501
7
42
76

..and also consider dimming the background. – Mr_Green Oct 07 '14 at 11:27
i don't understand "dimming", what is this? – Supamiu Oct 07 '14 at 11:31
@Supamiu He's referring to the darkening of the background around the FancyBox. – Alternatex Oct 07 '14 at 11:34
I'm not a fancyBox user so i don't know why he doesn't have this background dimming. – Supamiu Oct 07 '14 at 11:49
@Supamiu - I've added your code to mine...no effects at all... u can see it on the website (gave the adress at riginal post) @ a file named "scripts.js" (search for "fancybox" and you'll find it) – Aviad Oct 07 '14 at 12:08
in fact yes that's strange, i think it's because your class is declared in a , i think it whould be easier to set the class on a button, not on a . – Supamiu Oct 07 '14 at 12:23
@Supamiu --> The solution u suggested doesn't work. changed it from a to button and back. still same result...changed the source files back to the original ones too... plus I can't find the reason why it won't dim the background – Aviad Oct 07 '14 at 12:38

score 0 · Answer 2 · answered Oct 07 '14 at 14:26

0

As far as I can see, the box is being moved due to the transition and -webkit-transition CSS properties which are being added by some JavaScript code. You should check where it is coming from. Try breaking down each and every step. Also there is a possibility that the issue is due to some kind of conflict in the code, so check for that as well.

answered Oct 07 '14 at 14:26

StrongBite

46
3

Thx warwick - I'll check for that – Aviad Oct 07 '14 at 14:33

score 0 · Answer 3 · answered Oct 13 '14 at 05:00

0

Try add this to your DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

has helped me in the past

answered Oct 13 '14 at 05:00

Dan Winter-Wijntjes

312
5
16

Fancybox "dances" around

EDIT

3 Answers3