Problem with Step Carousel Viewer v1.9 and Google Chrome

[Chuncho]

1) Script Title:
Step Carousel Viewer v1.9
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm
3) Describe problem:
Hi, I have this script working on Firefox 7.0.1 and IE9, it works in both of them with no problems, but for some reason in Google Chrome 14.0.835.202 m it doesn't work, all the images are stacked. I've been looking in the function alignpanels and if I do an alert to check the value 'paneloffset' has, it always shows lower values than Firefox or IE9 show (FF & IE9 show the same values).

Example code :



alignpanels:function($, config){
var paneloffset=0
config.paneloffsets=[paneloffset] //array to store upper left offset of each panel (1st element=0)
config.panelwidths=[] //array to store widths of each panel
config.$panels.each(function(index){ //loop through panels
var $currentpanel=$(this)
alert(paneloffset);
// etc...


In that case, Firefox & IE9 show 0 (which is correct), 391, 750, 938, etc, whereas Chrome shows 0, 176, 352, 491.

I can't use width:'fixedValue' for panels, since images widths vary a lot.

Edit : I forgot to say that I tried something I saw in some forum, don't remember where. It's changing the line


jQuery(document).ready(function($){


to :


jQuery(window).bind("load", function($){


and it worked partially. The images were correctly aligned, but the carousel stopped working, the buttons didn't work, so I couldn't see if the others images were correctly loaded and aligned in the belt.


Here you can see the website : http://www.cuadrosfamilia.com/www2

[Chuncho]

Ok, if you need more info. Checking the dom created, firefox gives me a value of 2282px for the width, whereas Chrome just gives 732px width for the .belt class.

The problem is here :



config.$panels.each(function(index){ //loop through panels
var $currentpanel=$(this)
$currentpanel.css({'float':'left',position: 'absolute', left: paneloffset+'px'}) //position panel
$currentpanel.bind('click', function(e){return config.onpanelclick(e.target)}) //bind onpanelclick() to onclick event
paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight')) + parseInt($currentpanel.get(0).offsetWidth || $currentpanel.css('width')) //calculate next panel offset
config.paneloffsets.push(paneloffset) //remember this offset
config.panelwidths.push(paneloffset-config.paneloffsets[config.paneloffsets.length-2]) //remember panel width

})

//....

config.$belt.css({
width: paneloffset+'px'
}) //Set Belt DIV to total panels' widths


The belt is set up before the images appears in the belt. I'm showing the images with PHP so they are loadad dinamically, but this works in FF & IE9. I have no idea why it doesn't work in Chrome...

This is killing me...

PS : I'm using jQuery 1.6.2 and Stepcarousel 1.9

[jscheuer1]

Instead of:



jQuery(document).ready(function($){

or:


jQuery(window).bind("load", function($){

Use:


jQuery(window).load(function(){var $ = jQuery;

As in:


setup:function(config){
//Disable Step Gallery scrollbars ASAP dynamically (enabled for sake of users with JS disabled)
document.write('<style type="text/css">\n#'+config.galleryid+'{overflow: hidden;}\n</style>')
jQuery(window).load(function(){var $ = jQuery;
config.$gallery=$('#'+config.galleryid)
stepcarousel.init($, config)
}) //end document.ready
jQuery(window).bind('unload', function(){ //clean up on page unload
stepcarousel.resetsettings($, config)
if (config.panelbehavior.persist)
stepcarousel.setCookie(config.galleryid+"persist", config.currentpanel)
jQuery.each(config, function(ai, oi){
oi=null
})
config=null
})
}

The browser cache may need to be cleared and/or the page refreshed to see changes.

[Chuncho]

With a simple line you just saved my life. I really appreciate your help, I really do. Thanks a lot.

See ya :)