jQuery cycle seem to be adjusting the height of my element

Question

I have a page with malsup's awesome jQuery cycle running. I am using the latest version (2.99) and Safari 5.0.5. I haven't encountered the following problem before, and it seems a bit weird.

The problem

Occasionally when the page loads, the .slides element is only 654 pixels wide. I have it set to 960px in the css file. But when I use JavaScript to get the width of the .slides element, it says it is 1271px wide. Huh? This problem happens occassionally on Firefox (3.6.16) too, but no where near as much as Safari. Oddly enough, I can't seem to replicate this error in IE8.

My code is all W3C valid (apart from 3 calls to border-radius). Perhaps there is a limitation on using a form element as the cycle container? Is it Safari mis-behaving?

The JS:

$(document).ready(function(){
  var sw = $('.slides').width();
  $('.slides').cycle({
    fx: 'scrollHorz',
    nowrap: 0,
    fit: 1,
    timeout: 0,
    next: '.next',
    prev: '.prev',
    speed: 250
  });
  if (sw != 960){
    $('.slides').css('width','960px');//to set the width to 960, so it doesn't clip the form
    $('.slides').css('background-color','#ff00ff');//so i know when the problem is occuring
  }
});

The CSS:

#content{
    float:left;
    width:100%;
}

    .wrapme{
        width:960px;
        height:auto;
        margin:0 auto;
    }

    .slides{
        float:left;
        width:960px;
        height:auto;
        overflow:auto;
    }

You can (hopefully) see the "bug" in action here. I'd love to know if this is not happening for anyone else (might have to push F5 a few times).

I would love to fix this annoying little bug. The work-around of setting the container width after cycle has adjusted it (to the wrong width, no doubt) only fixes half of the problem. Once you move to the next slide, it halves the width. Next slide, it halves it again. So after slide 3, it squishes all content down to 240px wide.

I guess a solution to this would be to force everyone to use Firefox/IE (it will reside on a company intranet).

Thanks for any help and insight in advance!

Dan

EDIT updated link: https://necms.com.au/cycle_oddities.php

Answer 1

There is a bug of Jquery Cycle plugin... The solution that I've find for this is to set after callback function and set height manually there.

$('.slides').cycle({
    fx: 'scrollHorz',
    nowrap: 0,
    fit: 1,
    timeout: 0,
    next: '.next',
    prev: '.prev',
    speed: 250,
    after: function (){
        $(this).parent().css("height", $(this).height());
     },   
  });

Answer 2

This does seem to be a bug with jQuery Cycle. I can't tell if it's because of the floated child elements or the fact that there are usually multiple jQuery Cycle instances on the page when this happens. I'd need to dig deeper.

One workaround that worked for me was to set the height and width of the container in the cycle options and then specify that the slides must fit the container like so:

 $('#myCycle').cycle({
      fx: 'scrollHorz',
      width: 430,
      height: 100,
      fit: 1
 });