Step Carousel Problem

[Dayjo]

1) Script Title: Step Carousel Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...epcarousel.htm

3) Describe problem:

I'm using this script with little problem, but I'm now trying to make it work with my ajax loading pages. I have the carousel page being loaded with the $("#div").load() function, and as soon as it loads, for some reason the page tries to redirect, or reload or something. However, if I view the page without the ajax loading, it works a treat.

Any help would be muchly appreciated

[Nile]

Can we please see your code, or a link to your site? That'll help us solve the problem.

[Dayjo]

Here's the setup code placed in shirts.php after the mygallery div and contents.

<script type="text/javascript">
var $j = jQuery.noConflict();
var canStep = true;
stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
	onslide:function(){
	$j("#nums a").css({ fontSize:"10px", fontWeight:"normal"});
	$j("#nums a").filter("#" + statusA).css({ fontSize:"16px", fontWeight:"bolder" });
	$j("#nums a").filter("#" + (statusA - 1)).css({ fontSize:"14px", fontWeight:"normal" });
	$j("#nums a").filter("#" + (statusA + 1)).css({ fontSize:"14px", fontWeight:"normal" });
	$j("#nums a").filter("#" + (statusA - 2)).css({ fontSize:"12px", fontWeight:"normal" });
	$j("#nums a").filter("#" + (statusA + 2)).css({ fontSize:"12px", fontWeight:"normal" });
	canStep = true;
	}
});
</script>

The stepcarousel.js file is put in the Head of the index file, and the shirts.php file is loaded into a div on the index page. When this happens, the script somehow reloads the page.

[ddadmin]

Hmm your question is confusing. What do you mean by "ajax loading pages"? The code you posted above shows you're using the "inline" mode to fetch your contents. Not quite sure what you're asking to be honest.

[Dayjo]

I have a div container on my index page for my content. One of the pages loaded into that div is a page with the carousel on it. I load pages into that div using:

$("#insideContent").load("shirts.php");

But the setup script appears not to work when the shirts page is not loaded directly on the page (i.e. through ajax rather than just being included in php).

[ddadmin]

Ah this isn't an issue with the script, but rather, just a pesky limitation of Ajax. Pages fetched via Ajax should they contain JavaScripts within it in many cases won't run correctly when brought over this way. Ajax basically copies the contents of the external file similar to copying plain text and just dumps it onto the main page. Browsers don't know to interpret scripts or even CSS (in IE) within that copied content.

There are a few workarounds to this limitation in general, but frankly it's beyond the scope of the type of issues I'd like to support, as it's messy and needs to be custom tailored based on the script in question and your page as well.

[Dayjo]

So is there a way I can have the script outside of the page, on the index page, and somehow execute the script when the div has loaded?

[ddadmin]

Yep, assuming you're using jQuery's load() method to fetch the external page via Ajax, you can run your custom code when the external page has been successfully added to the index page, via a callback function, for example:

$("#insideContent").load("shirts.php", function(){
   //custom code here
 });

So in your case, assuming Step Carousel script is added to the index page to begin with and you wish to activate it when "shirts.php" is added to the same page, you'd just move its configuration code from the HEAD of your page into the callback function:

$("#insideContent").load("shirts.php", function(){
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
});

[Dayjo]

Hmm, I've discovered that it's actually doing the same thing, now even if I just stick the set up script underneath the divs.. when the file isn't loaded by ajax. It's to do with WHEN the setup gets executed.. I presume that it's trying to do it when the div doesn't exist or something yet which is causing the problem.

Will edit when i've found a solution.

Well, I tried your method, and it still fails to work.. it still appears to try and reload a page or something.. it's really strange :/ I've never had any problems like this with other scripts using .load();

Any ideas?

[ddadmin]

Please post a link to the page on your site that contains the problematic script so we can check it out.