Intermittent positioning issue with a jQuery cycle() slideshow

Question

This occurs intermittently in Chrome, Firefox, and particularly in Safari. Has not been observed in IE. Slideshow appears further from top than it normally does but functions as expected. Happens more often on a hard refresh making it seem like a document.ready() issue.

Page is here: http://privatecare.dreamhosters.com/

Correct load:

correct load

Incorrect load:

incorrect load

jQuery initialization:

<script src="http://code.jquery.com/jquery-latest.js"  type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script> 

<script type="text/javascript">
  $(document).ready(function(){
    $('#homeSlides').cycle({ 
      fx: 'fade', 
      speed:  2500
    });
  });
</script>

HTML:

<div id="homeSlides">
<img src="/g/home/slide1.jpg" alt="Connecting You to Better Care" width="639" height="348" onclick='window.location="/why_choose_pca"' />
<img src="/g/home/slide2.jpg"  width="639" height="348" alt="Updates on DOL’s Proposed Amendments to Companionship and Live-In Worker Regulations" border="0"  onclick='window.location="/dol-issue-updates"'  />
<img src="/g/home/slide3.jpg" alt="Promoting the Rights of Independent Caregivers and Registries Since 1977" width="639" height="348" onclick='window.location="/caregivers"' />
<img src="/g/home/slide4.jpg" alt="The Consumer-Directed Model Puts You in Control" width="639" height="348" onclick='window.location="/comparing_your_options"' />
<img src="/g/home/slide5.jpg" alt="Join us in Orlando October 10 – 12 for the PCA Annual Conference" width="639" height="348" onclick='window.location="/annual-conference"' />
</div>

CSS

#homeWrapper {
    position:relative;
    margin:0 auto;
    width:951px;
    background: url(../g/home_bg.jpg) no-repeat;
    min-height:888px;
}

#homeSlides {
    position:absolute;
    left:290px;
    top: 143px;
    width:639px;
    height:348px;
    overflow:hidden;
    cursor:pointer;
}

Anyone seen this before or have any advice?

could it be that your image hasn't loaded yet causes that gap? also you can put links in your cycle, like `` instead of that `onclick=window.location` obtrusive insanity... — JKirchartz, Apr 17 '12 at 18:38
nope... just a comment :P ... btw, that gap is the same height as the subnav on that first image in the left sidebar... — JKirchartz, Apr 17 '12 at 18:45

score 1 · Accepted Answer · edited May 23 '17 at 12:06

My best guess is that this is some kind of weird race condition. In the cycle plugin there is an area that checks to see if your specified element (#homeSlides) has a non-static position. If it doesn't, cycle will apply the following CSS (the width and height values are obviously specific to your implementation):

position: relative; width: 639px; height: 348px;

This CSS gets applied to the element's inline style attribute which overrides your styles declared in the stylesheet. If you can get it to break in Chrome, inspect #homeSlides and you will see the inline styles. Disable the inline position: relative; and watch it move to the correct position.

You may be able to fix this by simply adding !important to your position: absolute; declaration in main.css.

You also may be able to fix it by setting the position to absolute in javascript after the cycle plugin has finished initializing.

Edit:

Check out this question. You should remove that important declaration and include all of your CSS files before all scripts. The script is executing before the CSS has time to get applied.

You rock! !important did the trick! I owe you a beer the next time you are in New Orleans! — jerrygarciuh, Apr 17 '12 at 19:04
@jerrygarciuh Cheers mate! Check my edit for a better solution. — Bryan Downing, Apr 17 '12 at 19:10

Intermittent positioning issue with a jQuery cycle() slideshow

1 Answers1