Running two scripts on one page, one cancels the other

[asdfjklmichael]

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



<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]

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


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

to:


<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.

[asdfjklmichael]

Thanks, John! That did it.