CODEWITHSUNDEEP
jqueryhtmlcssfancybox
Andres
Andres

Reputation: 2023

header fixed breaks fancybox :(

This is really weird and can't seem to understand it. I have a header fixed position so it always stays at top of the screen and for some reason this is causing fancybox not to open..here's my code:

css

 #header{background:#fff; width:100%; height:80px; margin:0; padding:0; position:fixed; top:0;}

fancybox jquery(latest version 2):

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".various").fancybox({
            maxWidth    : 800,
            maxHeight   : 600,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none'
        });
    });
</script>

html

<div id="header">
    <div class="content">
    <img src="img/logo.png" align="left" alt="CSL Peru" />
    <div class="clear"></div>
    </div>    
</div>
    <!--end HEADER-->
<div id="container">
         <a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
    </div>

when i take "position:fixed" out then it works again but breaks my whole design..

Upvotes: 1

Views: 1820

Answers (2)

Marco Cervellin
Marco Cervellin

Reputation: 36

The question is a bit old now, but the problem still occurred to me at the time of this writing, with Fancybox version 2.1.5.

There is a css * selector wich applies a class on all fixed elements.

At line 1833 in jquery.fancybox.js you'll find this code:

$('*').filter(function(){
                    return ($(this).css('position') === 'fixed' && !$(this).hasClass("fancybox-overlay") && !$(this).hasClass("fancybox-wrap") );
                }).addClass('fancybox-margin');

Comment out these lines and your layout should be ok.

Upvotes: 1

Zoltan Toth
Zoltan Toth

Reputation: 47657

Take a look in Firebug to the actual code when the fancybox gets appended. It might add a #header id to one of its wrappers as well

Upvotes: 1

Related Questions