SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast ericdgreene's Avatar
    Join Date
    Nov 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.)

  3. #3
    SitePoint Enthusiast ericdgreene's Avatar
    Join Date
    Nov 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    <li width="926" height="355"><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.

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Setting the width/height of the carousel <li>s in CSS *should* do the trick.

    e.g.
    Code css:
    #jcarlite li { 
      width:926px;
      height:355px;
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    SitePoint Enthusiast ericdgreene's Avatar
    Join Date
    Nov 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •