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/dynamici...epcarousel.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