In the main js, once u have said $jc = jquery.noConfilct(), you should start
using $jc everywhere instead of $. That is the actual purpose of noConflict.
-GTG
On 7/2/07, sprak <[EMAIL PROTECTED]> wrote:
Haven't had any success with that either; using the (jQuery) syntax
causes the
browser to throw up errors. Maybe a walk through the flow of things
will
help.
Page loads up with like this:
<html>
<head>
<script language="JavaScript" type="text/javascript" src="/design/en/
javascript/prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="/design/en/
javascript/jquery-latest.js"></script>
<script language="JavaScript" type="text/javascript" src="/design/en/
javascript/main.js"></script>
</head>
...
<body>
...
<script>
// Prototype code here
</script>
...
</body>
</html>
main.js has this as its code:
var $JQ = jQuery.noConflict();
$JQ(document).ready(function($) {
// mainnav BEGIN
// add a state on all the menus:
$("#mainNav > ul li > a + ul").attr("toggle", "down");
// collapse all but class=open:
$("#mainNav > ul li > a").not(".open").find("+
ul").slideUp(1).attr("toggle", "up");
// click handler sub menu on level 1
$("#mainNav > ul > li > a:not(.skip)").click(function() {
var menu = $(this).find("+ [EMAIL PROTECTED]'up']");
menu.slideDown("slow");
$("#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
$("#mainNav > ul > li > ul > li > a:not(.skip)").click(function()
{
var menu = $(this).find("+ [EMAIL PROTECTED]'up']");
menu.slideDown("slow");
$("#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:
$("#mainNav > ul > li a.skip").click(function() {
document.location.href = $(this).attr("href");
return true;
});
// mainnav END
// // highlight award on mouseover:
$('#awards img:not(.active)').after('<img class="active"
src="design/en/images/finest200706/awards_on.png" usemap="#awards"
width="629" height="68">');
$('#awards img.active').hide();
var hideAwards = null;
$('#awards area').mouseover(function() {
if(hideAwards) clearTimeout(hideAwards);
$('#awards img.active').show();
var coords = $(this).attr('coords').split(','); // coords =
(l,t,r,b)
$('#awards img.active').css('clip','rect(0px,'+ coords[2] +'px,
68px,'+ coords[0] +'px)');
// hide it after 4 sec
hideAwards = setTimeout("$('#awards img.active').hide();",
4000);
return false;
});
// searchResults BEGIN
// add a state on all the menus:
$("#searchResults > ul > li > a + ul").attr("toggle", "down");
// collapse all but class=open:
$("#searchResults > ul > li > a").not(".open").find("+
ul").slideUp(1).attr("toggle", "up");
// click handler
$("#searchResults > ul > li > a").click(function() {
var menu = $(this).find("+ [EMAIL PROTECTED]'up']");
menu.slideDown("slow");
$("#searchResults > ul > li > a +
[EMAIL PROTECTED]'down']").slideUp("slow").attr("toggle", "up");
menu.attr("toggle", "down");
return false;
});
// searchResults END
});
Everything seems to load up fine; the Prototype code runs correctly,
and
jQuery seems to add the appropriate states, attributes, handlers on
the
navigation elements. Only the current menu item is open, and the rest
are closed.
Clicking on a closed menu item causes the jQuery code to be executed.
However, something deep in the bowels does not return the same
object as it would if Prototype was not in place.
Very puzzling; if no answer is found soon, I'm just going to abort and
rewrite
the Prototype code into JQuery. Joy...
Cheers.
- luis
On Jul 2, 2:27 pm, "Ganeshji Marwaha" <[EMAIL PROTECTED]> wrote:
> I think the sliding menu plugin that you are using is not playing well
with
> the jquery standards for plugin- development in terms of the $
namespace.
>
> You might have to wrap the whole of the sliding menu code in a primary
> closure like given below, and it might start working. Lemme know how it
> goes.
>
> (function($) {
>
> // copy and paste the sliding menu code here
>
> })(jQuery);
>
> -GTG
>
> On 7/2/07, sprak <[EMAIL PROTECTED]> wrote:
>
>
>
> > Sorry, that was a cut & paste error in my post; yes, prototype is
> > included
> > above jquery. The protoype code on the pageworks properly, but the
> > sliding
> > menu powered by jquery does not.
>
> > On Jun 29, 2:35 pm, "Ganeshji Marwaha" <[EMAIL PROTECTED]> wrote:
> > > ur last option is the best :-)
>
> > > but, did u try adding prototype.js above jquery.js
>
> > > -GTG
>
> > > On 6/29/07, sprak <[EMAIL PROTECTED]> wrote:
>
> > > > 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
