Fancybox onComplete - Positioning works for a split second

Question

I'm trying to position the fancybox that is inside a Facebook app with scrolling disabled.

The onComplete function works for a fraction of a second before going back to the vertical center of the frame. What is making it snap back to the center?

$("#footer-test-link").fancybox({
    "transitionIn"  : "fade",
    "transitionOut" : "fade",
    "speedIn" : 300,
    "speedOut" : 300,
    "easingIn" : "fade",
    "easingOut" : "fade",
    "type": "ajax",
    "overlayShow" : true,
    "overlayOpacity" : 0.3,
    "titleShow" : false,
    "padding" : 0,
    "scrolling" : "no",
    "onComplete" : function() {
        $("#fancybox-wrap").css({"top": 80 +"px"});
    }
});

Answer 1

FancyBox is showing your positioning for a split second because there is a race condition between the event that vertically centers the FancyBox wrapper (#fancybox-wrap) and the onComplete callback. onComplete will usually finish first, so the css({"top": 80 +"px"}) is then over-written. You could try any number of ways to fix this, but I prefer to add a CSS rule onComplete rather than force the position of every FancyBox ever, as algorhythm's solution does.

'onComplete' : function () {
    // Create a pseudo-unique ID - this is actually pretty weak and you may want to use a more involved method
        var dt = new Date();
        var className = ('cl'+dt.getTime()).substr(0,10); // Create a unique class name
    // Create a style element, set the contents, and add it to the page header
        var style = document.createElement('style');
        jQuery(style).attr('type','text/css').html('.'+className+' { top: 80px !important; }').appendTo(jQuery('head'));
    // Add the pseudo-unique class name to the FancyBox wrapper to apply the CSS
        jQuery('#fancybox-wrap').addClass(className);
}

You may want to look into a better unique id for this, but this was sufficient for my needs. Please note that this answer is in regard to FancyBox v1.x (I used v1.3.4). v2.x may have a different logical flow, and DOES have different callbacks. Instead of using onComplete, in v2.x you would need to use either afterLoad or afterShow as per the FancyBox docs.

Answer 2

just try to set the css-property of '#fancybox-wrap' like following

#fancybox-wrap {
    top: 80px !important;
}

the !important-option ensure that jQuery or an other JavaScript isn't able to change/override this css-setting.