The jQuery loop seems to adjust the height of my element

Question

I have a page running jQuery loop with malsup awesome. I am using the latest version (2.99) and Safari 5.0.5. I have not met the following problem before, and this seems a bit strange.

Problem

Sometimes, when a page loads, the .slides element is only 654 pixels wide. I set the value to 960px in the css file. But when I use JavaScript to get the width of the .slides element, it says that it has a width of 1271 pixels. A? This problem sometimes happens in Firefox (3.6.16), but not where almost as much as Safari. Oddly enough, I cannot reproduce this error in IE8.

My code is valid only for W3C (except for 3 border radius calls). Perhaps there is a restriction on using a form element as a loop container? Does Safari not work?

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

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 “error” in action here . I would like to know if this does not happen for anyone else (you may have to press F5 several times).

I would like to fix this annoying little mistake. The sequence of setting the width of the container after the cycle adjusted it (with the wrong width, no doubt) only eliminates half the problem. As you move on to the next slide, it will reduce the width. The next slide, it reduces it again. Thus, after slide 3, it skips all content up to 240 pixels wide.

I suppose a solution to this would be to force everyone to use Firefox / IE (it will be on the corporate intranet).

Thanks for any help and understanding in advance!

Dan

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

Answer 1

There is a jQuery Cycle plugin error ... The solution I found for this is to install the after callback function and manually install it manually.

 $('.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 seems like a jQuery loop error. I can’t say whether this is due to the intended children or the fact that there are usually several instances of JQuery Cycle on this page when this happens. I need to dig deeper.

The workaround that worked for me was to set the height and width to the container in the cycle parameters, and then indicate that the slides should fit use the container as follows:

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

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

Answer 4

I used this and it worked. the loop tries to get the size properties and sends them poorly.

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