asked on

Javascript clashing - trying to run two scripts on one page

Hello all,

I'm trying to incorporate two Jquery scripts in one XHTML page but they are clashing. I don't know anything about Jquery, having copyied the scripts from different sources. They work individually, just not together.

Is it possible to structure the attached code so that the scripts don't clash?

Many thanks,
Stuart

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
        $('#slider1').s3Slider({
            timeOut: 4000 
        });
        $('#slider2').s3Slider({
            timeOut: 5000 
        });
        
    });
</script>
<script src="javascript/jquery-1.2.2.pack.js" type="text/javascript"></script>
 
<script type="text/javascript">
	$(function() {
		// set opacity to nill on page load
		$("ul#menu span").css("opacity","0");
		// on mouse over
		$("ul#menu span").hover(function () {
			// animate opacity to full
			$(this).stop().animate({
				opacity: 1
			}, "slow");
		},
		// on mouse out
		function () {
			// animate opacity to nill
			$(this).stop().animate({
				opacity: 0
			}, "slow");
		});
	});
</script>

Open in new window

Albert Van Halen

bYou're using one library (jquery) probably two different versions.
Just use one and get the latest version (1.3.2).
Get it at http://jquery.com

The two functions will be triggered via jquery when the DOM is loaded.
You can combine them as well.

See code

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/s3Slider.js"></script>
<script type="text/javascript">
    $(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
        $('#slider1').s3Slider({
            timeOut: 4000 
        });
        $('#slider2').s3Slider({
            timeOut: 5000 
        });
        
        // set opacity to nill on page load
        $("ul#menu span").css("opacity","0");
        // on mouse over
        $("ul#menu span").hover(function () {
            // animate opacity to full
            $(this).stop().animate({
                opacity: 1
            }, "slow");
        },
        // on mouse out
        function () {
            // animate opacity to nill
            $(this).stop().animate({
                opacity: 0
            }, "slow");
        });
    });
</script>

Open in new window

stuamos8

ASKER

Hi Albert,

Thanks for your response. I downloaded the latest jquery file and used your code but the scripts stil seem to clash (i.e the navigation menu animation doesn't work).

You can see the work in progress yourself at: http://bogrov.com/learnsync/clients.html. See the buttons working on the other pages.

Any ideas?

p.s. I found this on the subject: http://www.macpherson-neil.co.uk/ResourceWeb/WebDevelopment/Javascript/Multiscript_Tutorial2.htm - which seems to advise calling the events separately. I just don't know how to implement it.

ASKER CERTIFIED SOLUTION

Albert Van Halen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

stuamos8

ASKER

Thanks Albert, you are my hero! Works perfectly.

I think it's about time I learn some Jquery. But in the meantime, thanks a bunch.

Cheers,
Stu