Jcarousel Lite works when you click link, but not when page loads - webkit only

Site I’m working on: http://s4.mynewsitereview.com/

If you go to the page in webkit (Chrome or Safari), my jcarousel Lite slider will not be visible. However if you click the link at the top of the page, the slider suddenly appears. I have no idea how to correct this issue - tried all kinds of stuff but nothing.

Firefox is fine when you go to the page, so is IE. But Chrome doesn’t show the slider when you browse to the page - only when you click the logo to go to the page does it decide to show the slider. Anyone have a suggestion for me?

on edit - nevermind … wow, it works as soon as I posted this. Tried different computers, both mac and pc, nothing. Now suddenly it works. I’m calling jquery up from Google’s servers… wonder if that had something to do with this.

on another edit - now it doesn’t work if you refresh the page. what in the world is going on…

Hm, a bit weird. When the page loads the first time, #jcarlite has a width of 0px, but when you click the logo, it gets a width of 926px. Perhaps try setting a width of 926px in the CSS file itself and see if that heps things. (I don’t know JS well enough to know why that initial width setting gets inserted via an element style.)

Thanks - I tried that but it’s no help. It’s weird that it only does this in webkit browsers. Mozilla and IE are fine. I still don’t have a solution for this issue… hoping I don’t have to restructure the page all that much, but I need to try some different things with it.

Hm, make sure to follow all the installation instructions for that slider. One thing to try is explicityly ass in the width and height of each LI, as specified in the setup instructions:

<li [COLOR="#FF0000"]width="926" height="355"[/COLOR]><img src="http://s4.mynewsitereview.com/wp-content/uploads/2012/02/slider2.jpg"></li>

Without this, the script seems to be setting heights and widths of zero or thereabouts.

Setting the width/height of the carousel <li>s in CSS should do the trick.

e.g.


#jcarlite li { 
  width:926px;
  height:355px;
}

Thanks all for the input, I finally got it resolved.

I changed the jquery to $(window).load instead of $(document).ready and that fixed it.