We help IT Professionals succeed at work.

Conflict with JK Megamenu and Carousel

Dorisn
Dorisn asked
on
Hi am having a problem getting JK Megamenu and Carousel to get along together. On the Carousel side, the tabs are rotating along the right vertical but the photos aren't showing. This was working before I added the Megamenu which doesn't seem to be working at all.

Here's the link to the site: http://winholt.grq.net/index.html 

I tried the jquery.no conflict... perhaps I am not doing something right.

Thanks for your help.

DorisN
Comment
Watch Question

Commented:
Hmm, Try removing the second Jquery Script. Its not needed as you have included the same version higher up the page.

look for

<!--Megamenu starts-->

then remove this line which is below it

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

Then see if it works.

Author

Commented:
I took out that extra jquery script, but still not working. How and where do I use the jquery no conflict script. I tried using it but maybe I wasn't using it correctly.

Commented:
you have 2 id's with the same name - foodservice

<div class="wrapper"><ul><li id="foodservice"><a href="#" class="button" id="foodservice">Food Service Products</a></li></ul></div>

Try removing if id for the <il>
<div class="wrapper"><ul><li><a href="#" class="button" id="foodservice">Food Service Products</a></li></ul></div>

Author

Commented:
Thanks for catching the duplicate id but that's not the problem.

There's a conflict with carousel and jkmegamenu. I searched for this and see a there's code for jquery no conflict but don't know how to implement.

Any help would be appreciated. Thanks!
Commented:
Change this file:
<script src="finalDesign/js/carousel.js" type="text/javascript"></script>
 to this:
jQuery.noConflict();

jQuery(function(){

      jQuery(document).ready(function(){  
	jQuery("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);  
		jQuery(".ui-tabs-panel img").toggle(  
		function() {  
			jQuery("#featured").tabs("rotate",0,true);  
		},  
		function() {  
		jQuery("#featured").tabs("rotate",5000,true);  
	});  
});
});

Open in new window

Commented:
NOTE: This only worked after I lined out these:
//jkmegamenu.definemenu("mathand", "mathand1", "mouseover")
//jkmegamenu.definemenu("products", "products1", "mouseover")
//jkmegamenu.definemenu("retail", "retail1", "mouseover")
//jkmegamenu.definemenu("supdrugconv", "supdrugconv1", "mouseover")

Must be because you don't have them set up yet?

Author

Commented:
That did it! Thanks a lot!