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

Fortuitous

I always set the cycle container with width and height defined, or only width defined directly on CSS file. Try with !important on width of .slides classes on your CSS. – Jairia

@RaelMax, thanks for the suggestion. Unfortunately, I have already tried setting the widths to !important to no avail. – Fortuitous

you need alogin to see the demo. – Curiosa

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());
     },   
  });

Pembrook

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
 });

Prudie

A fine suggestion, but unfortunately it did not fix the issue. The height will vary depending on the content of the slide, so I can't explicitly define the height. The issue still persists if I do define the height, width and fit attributes. The actual slides of the .slides element (which, confusingly I called data_entry) width are explicitly defined in the CSS to be 960px wide. – Fortuitous

Answer 3

Try setting the following:

containerResize: 0, slideResize: 0

Worked for me.

$('.slides').cycle({
   fx: 'scrollHorz',
   nowrap: 0,
   fit: 1,
   timeout: 0,
   next: '.next',
   prev: '.prev',
   speed: 250,
   containerResize: 0,
   slideResize: 0
});

Hiawatha

Answer 4

I used this and it worked. cycle tries to get size properties and sends them back bad.

                after: function (){
                $(this).css("height", "");
                $(this).css("width", "");

Mccune