Greetings; I am having a bit of trouble getting JQuery 1.1.2 and
Prototype 1.5.0 to play
nice with each other. Here is my page (abbreviated) and script with
JQuery alone.
HTML:
<html>
<head>
...
<script language="JavaScript" type="text/javascript" src="/design/en/
javascript/finest200706/jquery-latest.js"></script>
<script>
jQuery.noConflict();
</script>
</head>
<body>
...
<div id="mainNav">
<ul id="menu">
<li>
<a href="/solutions">Solutions</a>
<ul>
<li>
<a class="" href="/solutions/your_needs">Your Needs</a>
<ul>
<li><a class="skip" href="/solutions/your_needs/
network_protection">Network Protection</a></li>
</ul>
</li>
</ul>
</li>
...
<li>
<a class="open" href="/portal">Portal</a>
<ul>
<li><a class="skip" href="/pref">Preferences</a></li>
</ul>
</li>
</ul>
...
</div>
</body>
</html>
Script:
jQuery(document).ready(function() {
// mainnav BEGIN
// add a state on all the menus:
jQuery("#mainNav > ul li > a + ul").attr("toggle", "down");
// collapse all but class=open:
jQuery("#mainNav > ul li > a").not(".open").find("+
ul").slideUp(1).attr("toggle", "up");
// click handler sub menu on level 1
jQuery("#mainNav > ul > li > a:not(.skip)").click(function() {
var menu = jQuery(this).find("+ [EMAIL PROTECTED]'up']");
menu.slideDown("slow");
jQuery("#mainNav > ul li > a +
[EMAIL PROTECTED]'down']").slideUp("slow").attr("toggle", "up");
menu.attr("toggle", "down");
return false;
});
// click handler sub menu on level 2
jQuery("#mainNav > ul > li > ul > li >
a:not(.skip)").click(function() {
var menu = jQuery(this).find("+ [EMAIL PROTECTED]'up']");
menu.slideDown("slow");
jQuery("#mainNav > ul > li > ul > li > a:not(.open) +
[EMAIL PROTECTED]'down']").slideUp("slow").attr("toggle", "up");
menu.attr("toggle", "down");
return false;
});
// load page if skipped from accordeon fx:
jQuery("#mainNav > ul > li a.skip").click(function() {
document.location.href = jQuery(this).attr("href");
return true;
});
// mainnav END
});
The menu appears with one item already open specified by a <a> tag
with
class="open". Clicking on a closed menu item slides that menu open
and closes
the one already open. This sliding effect works fine without
Prototype added.
Once I add Prototype by modifying my HTML like this:
<script language="JavaScript" type="text/javascript" src="/design/en/
javascript/finest200706/jquery-latest.js"></script>
<script language="JavaScript" type="text/javascript" src="/design/en/
javascript/prototype.js"></script>
<script>
jQuery.noConflict();
</script>
The sliding effect stops; no errors are reported in Firebug or the
error console.
Using Firebug, I stepped through the code and found that buried deep
in the
code is a call to filter() that is going awry.
Without Prototype, the filter call gets to the end and properly
selects
the <ul> element from the document via + [EMAIL PROTECTED]'up']. Once
Prototype
is added, the filter call holds the <ul> element until near the end;
haven't
debugged further, but it clobbers the return result and returns a
useless object.
Has anyone seen this before and know how to fix it other than ditching
Prototype?
Thanks.
- luis
