I followed the example in the JQuery docs; they use just $ inside the
ready() function.
However, I have tried using $jc in place of just $ as well. I get the
same result; menus
don't make with the slidey slide.
- luis
On Jul 2, 4:49 pm, "Ganeshji Marwaha" <[EMAIL PROTECTED]> wrote:
> 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
