The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.
See if your editor made the list.
COURSE of the MONTH
12 days, 2 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Jquery conflict
Posted on 2013-01-04
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.j
and
Line 82: <script type="text/javascript" src="/orms/resources/js/jq
Here is the test page URL: http://dev.pds-austin.com/mustang/test3.asp
Any help would be awesome. Thanks.
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.j
and
Line 82: <script type="text/javascript" src="/orms/resources/js/jq
Here is the test page URL: http://dev.pds-austin.com/mustang/test3.asp
Any help would be awesome. Thanks.
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
8
7
15 Comments
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)
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)
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.
Ahk! sorr I do so much php I added a php extension.
http://dev.pds-austin.com/mustang/test4.asp
http://dev.pds-austin.com/mustang/test4.asp
The menu works.
superfish() method is not defined - which is strange, because the superfish script is there...
What is the effect that is missing?
superfish() method is not defined - which is strange, because the superfish script is there...
What is the effect that is missing?
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:
Form the css, you'll need to get rid of the top property, and add display: none:
get rid of top property from this rule too:
$(function(){
$(".sf-menu > li").on({
mouseenter : function(){
$(this).find("ul").fadeIn('slow');
},
mouseleave : function(){
$(this).find("ul").fadeOut('slow');
}});
});
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;
}
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;
}
If you notice the drop down does not allow your mouse to move to the sub menu. And the transition is not there too.
ok Have made changes and the menus are dropped down when the page loads:
http://dev.pds-austin.com/mustang/test4.asp
http://dev.pds-austin.com/mustang/test4.asp
I think this was the answer:
<script language="javascript">
$('.sf-menu ul').hide();
$(function(){
$(".sf-menu > li").on({
mouseenter : function(){
$(this).find("ul").fadeIn(
},
mouseleave : function(){
$(this).find("ul").fadeOut
}});
});
</script>
<script language="javascript">
$('.sf-menu ul').hide();
$(function(){
$(".sf-menu > li").on({
mouseenter : function(){
$(this).find("ul").fadeIn(
},
mouseleave : function(){
$(this).find("ul").fadeOut
}});
});
</script>
Featured Post
Containers are an incredibly powerful technology that can provide you and/or your engineering team with huge productivity gains. Using containers, you can deploy, back up, replicate, and move apps and their dependencies quickly and easily.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3.
Create a new HTML document with an internal stylesheet. Set a tiled background.: Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create a CSS image sprite
(In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite)
Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses
Course of the Month12 days, 2 hours left to enroll
752 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.