or.
after noConflict(), use the following code wrapped in...
(function($)
{ // This creates a closure, to which u can pass jQuery on execution
$(function() { // This is document.ready
// more code using $ as alias to jQuery
});
})(jQuery);
On 7/2/07, 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
>
>
