Solved

Jquery conflict

Posted on 2013-01-04
15
318 Views
Last Modified: 2013-01-08
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
Comment
Question by:jbrashear72
  • 8
  • 7
15 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38745762
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
 
LVL 3

Author Comment

by:jbrashear72
ID: 38751750
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
 
LVL 3

Author Comment

by:jbrashear72
ID: 38751754
Here is the current test:
dev.pds-austin.com/mustang/test4.php
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38751783
the link goes to 404
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 38751793
Ahk!  sorr I do so much php I added a php extension.
http://dev.pds-austin.com/mustang/test4.asp
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38751890
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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 38751994
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 3

Author Comment

by:jbrashear72
ID: 38752025
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38752059
did you make the changes to the css?

post the most recent link with the changes from my post
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 38752738
ok Have made changes and the menus are dropped down when the page loads:
http://dev.pds-austin.com/mustang/test4.asp
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 38752845
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38752887
you dont need to do it in javascript for that. just display:none in the css.
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 38755530
oh! Perfect! Thank you for all your help!
You where awesome.
0
 
LVL 3

Author Closing Comment

by:jbrashear72
ID: 38755535
Thank you again.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38755598
cheers :)
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now