PDA

View Full Version : Step Carousel Problem



Dayjo
04-20-2008, 09:16 AM
1) Script Title: Step Carousel Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.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 http://www.dynamicdrive.com/forums/images/icons/icon14.gif

Nile
04-20-2008, 01:51 PM
Can we please see your code, or a link to your site? That'll help us solve the problem. ;)

Dayjo
04-21-2008, 04:10 AM
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
04-21-2008, 07:15 AM
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
04-21-2008, 08:05 AM
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
04-22-2008, 06:58 AM
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
04-22-2008, 09:45 AM
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
04-23-2008, 07:18 AM
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
04-28-2008, 05:39 AM
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
04-28-2008, 07:26 AM
Please post a link to the page on your site that contains the problematic script so we can check it out.

Dayjo
04-28-2008, 07:30 AM
Well, I've decided to do it another way, using two content boxes. While one remains having the carousel in it, the other loads any other pages needed. It suffices :)

Thanks for your help