tags:

views:

404

answers:

1

Noticed a problem with a simple splash page using jquery.cycle.

http://www.rynicdesign.com/

With firefox (firebug installed), the rotating images will not display the first time the page is accessed (without cache - ctrl-f5) yet will load properly on subsequent requests.

Not seeing this condition with other browsers (ie, chrome, safari).

Any ideas why?

(page is small - but here is relevant info)

    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css&amp;amp;2.8.0r4/build/base/base-min.css" />
    <link rel="stylesheet" type="text/css" href="/templates/splash/css/splash.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.73.js"&gt;&lt;/script&gt;
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    $(document).ready(function() {
        $('.middle').cycle({
            fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            autostop: 1,
            timeout: 2500 // milliseconds between slide transitions (0 to disable auto advance)
        });
    });

    //--><!]]></script>
  </head>
  <body id="page">
    <div id="doc4" class="main-frame">
    <div class="top"></div>
    <div class="middle" align="center">
        <img src="/templates/splash/images/rynic-design.gif" alt="Welcome to RYNiC Designs" />
        <a href="/about"><img src="/templates/splash/images/enter.gif" alt="click to enter website" /></a>
    </div>
    <div class="bottom"></div>
    </div>
  </body>
</html>

And here is splash.css

html, body, #page, #doc4 {height:100%;margin:auto;}

.top, .middle, .bottom {clear:both;overflow:auto;display:block;}
.middle {background-color:#ffffff;overflow:hidden;}
.top, .bottom {height:35%;}

.top {background: #ffffff url(/templates/splash/images/left-bg.gif) repeat-y scroll top left;}
.bottom {background: transparent url(/templates/splash/images/right-bg.gif) repeat-y scroll top right;}

#doc4 {background:transparent url(/templates/splash/images/right-bg.gif) repeat-y scroll right bottom;}
+1  A: 

I've seen this problem before (this is an excerpt of my earlier answer to Jquery Cycle + Firefox Squishing Images).

The problem is that Firefox fixes the img element's size once and for all at the point the display style is set to none (when you start cycle). So if the image hasn't finished loading (which it probably hasn't on an initial GET request), its height and width style attributes are small (I'm not sure exactly what they correspond to - perhaps the size of Firefox's image placeholder, though in your case it comes up 164 X 16 pixels).

On subsequent requests, Firefox knows their dimensions since they're in the cache (I'm guessing a bit here: maybe it just loads them before cycle can set display: none).

You can solve this by specifying your middle div's size in advance:

#middle {
    width:  974px;
    height: 110px;
}

(That is, as long as you're not doing anything complicated with your images - my web site is dynamically loading images of varying size so I had to perform additional footwork.)

Jeff Sternal
Thanks Jeff- adding in the width / height made the difference.
jimg