Conflicting Scripts?

JavaScript
1

I have used jQuery to create a menu system which works as i want it to.

I am now trying to add a lightbox functionality to the site, i have used the lightbox a number of times previously so i’m happy with its individual implementation.

However, in this instance it appears that the 2 jQuery / Javascript functions i am trying to implement alongside each other are conflicting and only one will work at a given time? I am a novice when it comes to jQuery / Javascript so i’m looking for some advice please!

here is my code:


<script type="text/javascript" src="<?php echo base_url();?>Javascript/prototype.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>Javascript/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="<?php echo base_url();?>Javascript/lightbox.js"></script>
<link rel="stylesheet" href="<?php echo base_url();?>CSS/lightbox.css" type="text/css" media="screen" />

<script src="<?php echo base_url();?>Javascript/jquery-1.4.1.min.js"></script>
<script>
   // When the page is ready
   $(document).ready(function(){
   
	   $("#Company, #SubNavCompany a").hover(function(event){
       		$("#SubNavCompany a").stop(true, true).animate({marginLeft: 0}, 200);
			$("#SubNavCompany").css({zIndex: 10}, 0);
			$("#SubNavServices a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavServices").css({zIndex: 1}, 0);
			$("#SubNavPortfolio a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavPortfolio").css({zIndex: 1}, 0);
			$("#SubNavContact a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavContact").css({zIndex: 1}, 0);
			}, function() {
			$("#SubNavCompany a").delay(3000).animate({marginLeft: -150}, 600);
		 });
		 
		 
		  $("#Services, #SubNavServices a").hover(function(event){
       		$("#SubNavServices a").stop(true, true).animate({marginLeft: 0}, 200);
			$("#SubNavServices").css({zIndex: 10}, 0);
			$("#SubNavCompany a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavCompany").css({zIndex: 1}, 0);
			$("#SubNavPortfolio a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavPortfolio").css({zIndex: 1}, 0);
			$("#SubNavContact a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavContact").css({zIndex: 1}, 0);
			}, function() {
			$("#SubNavServices a").delay(3000).animate({marginLeft: -150}, 600);
		 });
		 
		 
		 $("#Portfolio, #SubNavPortfolio a").hover(function(event){
       		$("#SubNavPortfolio a").stop(true, true).animate({marginLeft: 0, zIndex: 10}, 200);
			$("#SubNavPortfolio").css({zIndex: 10}, 0);
			$("#SubNavCompany a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavCompany").css({zIndex: 1}, 0);
			$("#SubNavServices a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavServices").css({zIndex: 1}, 0);
			$("#SubNavContact a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavContact").css({zIndex: 1}, 0);
			}, function() {
			$("#SubNavPortfolio a").delay(3000).animate({marginLeft: -150}, 600);
		 });
		 
		 
		 $("#Contact, #SubNavContact a").hover(function(event){
       		$("#SubNavContact a").stop(true, true).animate({marginLeft: 0, zIndex: 10}, 200);
			$("#SubNavContact").css({zIndex: 10}, 0);
			$("#SubNavCompany a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavCompany").css({zIndex: 1}, 0);
			$("#SubNavServices a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavServices").css({zIndex: 1}, 0);
			$("#SubNavPortfolio a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavPortfolio").css({zIndex: 1}, 0);
			}, function() {
			$("#SubNavContact a").delay(3000).animate({marginLeft: -150}, 600);
		 });
	});
 </script>

The first 4 lines are including the files for the lightbox and then the remaining code below it dealing with the functionality of the main menu which incorporates sub menus that roll out. (working sample of menu can be seen at http://www.designandit.co.uk/temp/template.html

So, the problem i have is that with the above code is that my menu works as expected but the lightbox doesn’t function, if i move the 4 lines of code relating to the lightbox below the rest of the code the lightbox then it works but my menu doesn’t??

I’m guessing this is a relatively simple fix but my Javascript isn’t too strong at the moment so any advice would be most welcome.

Thanks

James

2

I have the same kinda problem in my post http://www.sitepoint.com/forums/showthread.php?t=658746

I don’t know the solution, but are you calling two different instances of jQuery?

3

Thanks Smash,

i think you were right, i cottoned ono to that also with a bit of research… i really am green at the moment with regards to javascript but i think i was trying to implement the nav elements using jQuery and the lightbox with scriptaculous. I now have a lightbox which uses jQuery and both sections are working.

The lightbox is a plugin type scenario but i have written the menu functionality myself (1st javascript attempt!) so if anyone cares to rip it apart and tell me what i’ve done wrong it’d be welcome too! - it works as it stands but i don’t think its very efficient coding?

cheers