• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 328
  • Last Modified:

Jquery conflict

I have a page I am building that the client requires a menu with a j query effect.
the problem is that our portal also has to load a jQuery scrip lower in the document and this is causing the menu script not to function.
I was looking at the no conflict and tried adding it to the code but It doesn't seem to make a difference. the issue with the menu is that the drop down care hard to get to with the mouse and the transition is not working.

<script type="text/javascript">
    var dom = {};
dom.query = jQuery.noConflict(true);
</script>


The two conflicting lines seem to be:
Line 13:     <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
and
Line 82: <script type="text/javascript" src="/orms/resources/js/jquery-1.7.2.min.js"></script>

Here is the test page URL: http://dev.pds-austin.com/mustang/test3.asp

Any help would be awesome. Thanks.
0
jbrashear72
Asked:
jbrashear72
  • 8
  • 7
1 Solution
 
Kyle HamiltonData ScientistCommented:
noconflict doesn't fix two calls to jquery. It resolves namespacing between libraries.

anyway, you need to get rid of one of the jquery calls. preferably the older one. keep the one on line 82.

If you can't remove the one that gets injected, then you can always just put your code below it. That way, you'll be using their jquery call. (put your script below line 82)
0
 
jbrashear72Author Commented:
Well I can move the script down below the injected jquery but that does not work. jQuery has to load before the menu I am afraid. I tried loading the same jquery from line 82 to the header area but same issue. This is starting to pose a problem.
0
 
jbrashear72Author Commented:
Here is the current test:
dev.pds-austin.com/mustang/test4.php
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Kyle HamiltonData ScientistCommented:
the link goes to 404
0
 
jbrashear72Author Commented:
Ahk!  sorr I do so much php I added a php extension.
http://dev.pds-austin.com/mustang/test4.asp
0
 
Kyle HamiltonData ScientistCommented:
The menu works.

superfish() method is not defined - which is strange, because the superfish script is there...

What is the effect that is missing?
0
 
Kyle HamiltonData ScientistCommented:
you can get rid of the superfish script, the first jquery call, and in place of the script at the bottom of the page, use this:


$(function(){
$(".sf-menu > li").on({
  mouseenter : function(){
  $(this).find("ul").fadeIn('slow');
},
  mouseleave : function(){

   $(this).find("ul").fadeOut('slow');
}});

});

Open in new window


Form the css, you'll need to get rid of the top property, and add display: none:

.sf-menu ul {
	position:		absolute;
	/* top:			-999em; */
	width:			200px; /* left offset of submenus need to match (see below) */
	display: none;
}

Open in new window


get rid of top property from this rule too:

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	/* top:		3.7em; */ /* match top ul list item height */
	z-index:		99;
	display: block;
}

Open in new window

0
 
jbrashear72Author Commented:
If you notice the drop down does not allow your mouse to move to the sub menu. And the transition is not there too.
0
 
Kyle HamiltonData ScientistCommented:
did you make the changes to the css?

post the most recent link with the changes from my post
0
 
jbrashear72Author Commented:
ok Have made changes and the menus are dropped down when the page loads:
http://dev.pds-austin.com/mustang/test4.asp
0
 
jbrashear72Author Commented:
I think this was the answer:
<script language="javascript">
   $('.sf-menu ul').hide();
 $(function(){
$(".sf-menu > li").on({
  mouseenter : function(){
  $(this).find("ul").fadeIn('slow');
},
  mouseleave : function(){

   $(this).find("ul").fadeOut('slow');
}});

});
  </script>
0
 
Kyle HamiltonData ScientistCommented:
you dont need to do it in javascript for that. just display:none in the css.
0
 
jbrashear72Author Commented:
oh! Perfect! Thank you for all your help!
You where awesome.
0
 
jbrashear72Author Commented:
Thank you again.
0
 
Kyle HamiltonData ScientistCommented:
cheers :)
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 8
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now