Running two scripts on one page, one cancels the other

**asdfjklmichael** · 11-29-2014, 12:59 AM

So I'm a JavaScript copy-paster and am currently trying to run two scripts at once. If I have each one individually, they do their own thing. But it's when I add in the other that I get issues and neither end up working.

At the moment, I'm using a script for a Fade Out Splash Page and another script for a Step Carousel (found on DynamicDrive). Here are the two scripts I have. You can find them on this page: http://clanhome.tumblr.com/testing

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="http://static.tumblr.com/gtkur0p/YAOnfj82h/stepcarousel.js" type="text/javascript">// <![CDATA[
/***********************************************
* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
// ]]></script>
<script type="text/javascript">// <![CDATA[
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
    autostep: {enable:false, moveby:1, pause:3000},
    panelbehavior: {speed:300, wraparound:true, wrapbehavior:'slide', persist:true},
    defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://38.media.tumblr.com/198ae0981495f7424164a176c84af1a3/tumblr_nfh5n91eGs1u0l17ko1_100.png', -110, 250], rightnav: ['https://31.media.tumblr.com/80a15279289ff71d49b45b182052572b/tumblr_nfh5n91eGs1u0l17ko2_100.png', 10, 250]},
    statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})
// ]]></script>

<script type="text/javascript">  
$(function(){
	setTimeout(function() {
		$("#splash").fadeOut("slow", function() {
			$("#content").show();
		});
	}, 2000);
});
</script>

If anyone knows how I can get both to work, that'd be great.

**jscheuer1** · 11-29-2014, 04:23 AM

The stepcarousel.js script throws jQuery into noConflict mode. You can either comment that out from that script, or change:

Code:

<script type="text/javascript">  
$(function(){
	setTimeout(function() {
		$("#splash").fadeOut("slow", function() {
			$("#content").show();
		});
	}, 2000);
});
</script>

to:

Code:

<script type="text/javascript">  
jQuery(function($){
	setTimeout(function() {
		$("#splash").fadeOut("slow", function() {
			$("#content").show();
		});
	}, 2000);
});
</script>

so that it too can operate in noConflict mode.