|

jQuery fancy menu conversion

View: New views

9 Messages — Rating Filter: Alert me

	jQuery fancy menu conversion by Kyle Spraggs :: Rate this Message: \| View Threaded \| Show Only this Message I found a nifty tutorial on creating a very sexy dropdown menu and I'm looking to do something similar using Dojo. I tried to implement the following using dojo.query along with forEach but I was unsuccessful. Can anyone convert this over to Dojo so I can see what I did wrong? $(function () { $(’.dropdown’).each(function () { $(this).parent().eq(0).hover(function () { $(’.dropdown:eq(0)’, this).show(); }, function () { $(’.dropdown:eq(0)’, this).hide(); }); }); }); Thanks in advance, Kyle Spraggs _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
	Re: jQuery fancy menu conversion by Peter Higgins-2 :: Rate this Message: \| View Threaded \| Show Only this Message theman@... wrote: > I found a nifty tutorial on creating a very sexy dropdown menu and I'm > looking to do something similar using Dojo. I tried to implement the > following using dojo.query along with forEach but I was unsuccessful. Can > anyone convert this over to Dojo so I can see what I did wrong? > > $(function () { > $(’.dropdown’).each(function () { > $(this).parent().eq(0).hover(function () { > $(’.dropdown:eq(0)’, this).show(); > }, function () { > $(’.dropdown:eq(0)’, this).hide(); > }); > }); > }); > > dojo.require("dojo.NodeList-traverse"); // optional: for .hover() and .show()/.hide() NodeList support: dojo.require("plugd.base"); dojo.ready(function(){ var $ = dojo.query; $(".dropdown").forEach(function(n){ var l = $(n); l.parent().at(0) .onmouseenter(function(){ dojo.style(this, "display", "block"); }) .onmouseleave(function(){ dojo.style(this, "display", "none"); }); }); }); with plugd: dojo.ready(function(){ var $ = dojo.query; $(".dropdown").forEach(function(n){ var l = $(n); l.parent().at(0) .hover(function(e){ var t = $(this); if(/enter\|over/.test(e.type)){ t.show(); }else{ t.hide(); } }); }); }); Haven't tested this for sure, but the gist is all there. The only oddity is parent() and whatever is going on with :eq in the children. Without seeing the expected markup it would be hard to say how to handle the child selection queries in the hover callback. Regards, Peter > Thanks in advance, > > Kyle Spraggs > _______________________________________________ > FAQ: http://dojotoolkit.org/support/faq > Book: http://docs.dojocampus.org > Dojo-interest@... > http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest > _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
	Re: jQuery fancy menu conversion by Kyle Spraggs :: Rate this Message: \| View Threaded \| Show Only this Message Wow, that was much quicker than expected. http://www.webdesigndev.com/web-development/create-the-fanciest-dropdown-menu-you-ever-saw That's the guide I was reading. On Thu, 18 Feb 2010 15:30:15 -0500, Peter Higgins <dante@...> wrote: > theman@... wrote: >> I found a nifty tutorial on creating a very sexy dropdown menu and I'm >> looking to do something similar using Dojo. I tried to implement the >> following using dojo.query along with forEach but I was unsuccessful. Can >> anyone convert this over to Dojo so I can see what I did wrong? >> >> $(function () { >> $(’.dropdown’).each(function () { >> $(this).parent().eq(0).hover(function () { >> $(’.dropdown:eq(0)’, this).show(); >> }, function () { >> $(’.dropdown:eq(0)’, this).hide(); >> }); >> }); >> }); >> >> > dojo.require("dojo.NodeList-traverse"); > > // optional: for .hover() and .show()/.hide() NodeList support: > dojo.require("plugd.base"); > > dojo.ready(function(){ > > var $ = dojo.query; > $(".dropdown").forEach(function(n){ > var l = $(n); > l.parent().at(0) > .onmouseenter(function(){ > dojo.style(this, "display", "block"); > }) > .onmouseleave(function(){ > dojo.style(this, "display", "none"); > }); > }); > > }); > > with plugd: > > dojo.ready(function(){ > > var $ = dojo.query; > $(".dropdown").forEach(function(n){ > var l = $(n); > l.parent().at(0) > .hover(function(e){ > var t = $(this); > if(/enter\|over/.test(e.type)){ > t.show(); > }else{ > t.hide(); > } > }); > }); > > }); > > Haven't tested this for sure, but the gist is all there. The only oddity > is parent() and whatever is going on with :eq in the children. Without > seeing the expected markup it would be hard to say how to handle the > child selection queries in the hover callback. > > Regards, > Peter >> Thanks in advance, >> >> Kyle Spraggs >> _______________________________________________ >> FAQ: http://dojotoolkit.org/support/faq >> Book: http://docs.dojocampus.org >> Dojo-interest@... >> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >> > > _______________________________________________ > FAQ: http://dojotoolkit.org/support/faq > Book: http://docs.dojocampus.org > Dojo-interest@... > http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
	Re: jQuery fancy menu conversion by Peter Higgins-2 :: Rate this Message: \| View Threaded \| Show Only this Message Ahh, I see what I was missing. It's like a recursive thing, looking for "> .dropdown" within the element that was hovered. so the initial parent().at(0) is correct, we're finding all .dropdown's in a page, locating the parent containing it, connecting a mouseenter/leave callback to that node which, when triggered searches for that same .dropdown node (seems redundant?) and toggles the display:"" property (via style() or plugd's hide()/show()) My pseudocode is mostly working, minus the re-query within the callback. Which I _think_ is unnecessary because I stored a reference to the node as 'l'. inside the .hover(), just use l.show()/l.hide() and it should be pointing (by way of closure) the correct node. Best of luck. Regards, Peter theman@... wrote: > Wow, that was much quicker than expected. > > http://www.webdesigndev.com/web-development/create-the-fanciest-dropdown-menu-you-ever-saw > > That's the guide I was reading. > > On Thu, 18 Feb 2010 15:30:15 -0500, Peter Higgins <dante@...> > wrote: > >> theman@... wrote: >> >>> I found a nifty tutorial on creating a very sexy dropdown menu and I'm >>> looking to do something similar using Dojo. I tried to implement the >>> following using dojo.query along with forEach but I was unsuccessful. >>> > Can > >>> anyone convert this over to Dojo so I can see what I did wrong? >>> >>> $(function () { >>> $(’.dropdown’).each(function () { >>> $(this).parent().eq(0).hover(function () { >>> $(’.dropdown:eq(0)’, this).show(); >>> }, function () { >>> $(’.dropdown:eq(0)’, this).hide(); >>> }); >>> }); >>> }); >>> >>> >>> >> dojo.require("dojo.NodeList-traverse"); >> >> // optional: for .hover() and .show()/.hide() NodeList support: >> dojo.require("plugd.base"); >> >> dojo.ready(function(){ >> >> var $ = dojo.query; >> $(".dropdown").forEach(function(n){ >> var l = $(n); >> l.parent().at(0) >> .onmouseenter(function(){ >> dojo.style(this, "display", "block"); >> }) >> .onmouseleave(function(){ >> dojo.style(this, "display", "none"); >> }); >> }); >> >> }); >> >> with plugd: >> >> dojo.ready(function(){ >> >> var $ = dojo.query; >> $(".dropdown").forEach(function(n){ >> var l = $(n); >> l.parent().at(0) >> .hover(function(e){ >> var t = $(this); >> if(/enter\|over/.test(e.type)){ >> t.show(); >> }else{ >> t.hide(); >> } >> }); >> }); >> >> }); >> >> Haven't tested this for sure, but the gist is all there. The only oddity >> > > >> is parent() and whatever is going on with :eq in the children. Without >> seeing the expected markup it would be hard to say how to handle the >> child selection queries in the hover callback. >> >> Regards, >> Peter >> >>> Thanks in advance, >>> >>> Kyle Spraggs >>> _______________________________________________ >>> FAQ: http://dojotoolkit.org/support/faq >>> Book: http://docs.dojocampus.org >>> Dojo-interest@... >>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >>> >>> >> _______________________________________________ >> FAQ: http://dojotoolkit.org/support/faq >> Book: http://docs.dojocampus.org >> Dojo-interest@... >> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >> > _______________________________________________ > FAQ: http://dojotoolkit.org/support/faq > Book: http://docs.dojocampus.org > Dojo-interest@... > http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest > _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
	Re: jQuery fancy menu conversion by Kyle Spraggs :: Rate this Message: \| View Threaded \| Show Only this Message Unfortunately, the only thing that seems to be happening is the top menu hides itself after mouseout. I understood the prototype code as your previously stated but I'm still unsure how to replicate it. On Thu, 18 Feb 2010 15:45:55 -0500, Peter Higgins <dante@...> wrote: > Ahh, I see what I was missing. It's like a recursive thing, looking for > "> .dropdown" within the element that was hovered. so the initial > parent().at(0) is correct, we're finding all .dropdown's in a page, > locating the parent containing it, connecting a mouseenter/leave > callback to that node which, when triggered searches for that same > .dropdown node (seems redundant?) and toggles the display:"" property > (via style() or plugd's hide()/show()) > > My pseudocode is mostly working, minus the re-query within the callback. > Which I _think_ is unnecessary because I stored a reference to the node > as 'l'. inside the .hover(), just use l.show()/l.hide() and it should be > pointing (by way of closure) the correct node. > > Best of luck. > > Regards, > Peter > > theman@... wrote: >> Wow, that was much quicker than expected. >> >> http://www.webdesigndev.com/web-development/create-the-fanciest-dropdown-menu-you-ever-saw >> >> That's the guide I was reading. >> >> On Thu, 18 Feb 2010 15:30:15 -0500, Peter Higgins <dante@...> >> wrote: >> >>> theman@... wrote: >>> >>>> I found a nifty tutorial on creating a very sexy dropdown menu and I'm >>>> looking to do something similar using Dojo. I tried to implement the >>>> following using dojo.query along with forEach but I was unsuccessful. >>>> >> Can >> >>>> anyone convert this over to Dojo so I can see what I did wrong? >>>> >>>> $(function () { >>>> $(’.dropdown’).each(function () { >>>> $(this).parent().eq(0).hover(function () { >>>> $(’.dropdown:eq(0)’, this).show(); >>>> }, function () { >>>> $(’.dropdown:eq(0)’, this).hide(); >>>> }); >>>> }); >>>> }); >>>> >>>> >>>> >>> dojo.require("dojo.NodeList-traverse"); >>> >>> // optional: for .hover() and .show()/.hide() NodeList support: >>> dojo.require("plugd.base"); >>> >>> dojo.ready(function(){ >>> >>> var $ = dojo.query; >>> $(".dropdown").forEach(function(n){ >>> var l = $(n); >>> l.parent().at(0) >>> .onmouseenter(function(){ >>> dojo.style(this, "display", "block"); >>> }) >>> .onmouseleave(function(){ >>> dojo.style(this, "display", "none"); >>> }); >>> }); >>> >>> }); >>> >>> with plugd: >>> >>> dojo.ready(function(){ >>> >>> var $ = dojo.query; >>> $(".dropdown").forEach(function(n){ >>> var l = $(n); >>> l.parent().at(0) >>> .hover(function(e){ >>> var t = $(this); >>> if(/enter\|over/.test(e.type)){ >>> t.show(); >>> }else{ >>> t.hide(); >>> } >>> }); >>> }); >>> >>> }); >>> >>> Haven't tested this for sure, but the gist is all there. The only oddity >>> >> >> >>> is parent() and whatever is going on with :eq in the children. Without >>> seeing the expected markup it would be hard to say how to handle the >>> child selection queries in the hover callback. >>> >>> Regards, >>> Peter >>> >>>> Thanks in advance, >>>> >>>> Kyle Spraggs >>>> _______________________________________________ >>>> FAQ: http://dojotoolkit.org/support/faq >>>> Book: http://docs.dojocampus.org >>>> Dojo-interest@... >>>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >>>> >>>> >>> _______________________________________________ >>> FAQ: http://dojotoolkit.org/support/faq >>> Book: http://docs.dojocampus.org >>> Dojo-interest@... >>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >>> >> _______________________________________________ >> FAQ: http://dojotoolkit.org/support/faq >> Book: http://docs.dojocampus.org >> Dojo-interest@... >> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >> > > _______________________________________________ > FAQ: http://dojotoolkit.org/support/faq > Book: http://docs.dojocampus.org > Dojo-interest@... > http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
	Re: jQuery fancy menu conversion by Karl Tiedt :: Rate this Message: \| View Threaded \| Show Only this Message Here is a dojo version of the Son of Suckerfish dropdown menus... dojo.require('dijit._base.sniff'); ] sfHover = function() { dojo.query('.dropMenu li').connect('onmouseenter', function(e) { dojo.addClass(e.currentTarget, 'sfhover'); }); dojo.query('.dropMenu li').connect('onmouseleave', function(e) { dojo.removeClass(e.currentTarget, 'sfhover'); }); } dojo.addOnLoad(function() { dojo.query('.dropMenu ul a').forEach(function(n) { n.tabIndex = -1; }); if(dojo.isIE) { sfHover(); }}); Just goto the son of sucker fish page and get the CSS (and possibly updated it to use the dj_ie prefix for IE..) -Karl Tiedt _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
	Re: jQuery fancy menu conversion by Kyle Spraggs :: Rate this Message: \| View Threaded \| Show Only this Message Interesting, It seems that using l.style("display", "block"); works whereas dojo.style(l, "display", "block"); fails. Now I'm back to where I started with the initial menu hover working. Let's see if I can get child menus working. On Thu, 18 Feb 2010 13:58:58 -0700, <theman@...> wrote: > Unfortunately, the only thing that seems to be happening is the top menu > hides itself after mouseout. I understood the prototype code as your > previously stated but I'm still unsure how to replicate it. > > On Thu, 18 Feb 2010 15:45:55 -0500, Peter Higgins <dante@...> > wrote: >> Ahh, I see what I was missing. It's like a recursive thing, looking for >> "> .dropdown" within the element that was hovered. so the initial >> parent().at(0) is correct, we're finding all .dropdown's in a page, >> locating the parent containing it, connecting a mouseenter/leave >> callback to that node which, when triggered searches for that same >> .dropdown node (seems redundant?) and toggles the display:"" property >> (via style() or plugd's hide()/show()) >> >> My pseudocode is mostly working, minus the re-query within the callback. > >> Which I _think_ is unnecessary because I stored a reference to the node >> as 'l'. inside the .hover(), just use l.show()/l.hide() and it should be > >> pointing (by way of closure) the correct node. >> >> Best of luck. >> >> Regards, >> Peter >> >> theman@... wrote: >>> Wow, that was much quicker than expected. >>> >>> > http://www.webdesigndev.com/web-development/create-the-fanciest-dropdown-menu-you-ever-saw >>> >>> That's the guide I was reading. >>> >>> On Thu, 18 Feb 2010 15:30:15 -0500, Peter Higgins > <dante@...> >>> wrote: >>> >>>> theman@... wrote: >>>> >>>>> I found a nifty tutorial on creating a very sexy dropdown menu and > I'm >>>>> looking to do something similar using Dojo. I tried to implement the >>>>> following using dojo.query along with forEach but I was unsuccessful. >>>>> >>> Can >>> >>>>> anyone convert this over to Dojo so I can see what I did wrong? >>>>> >>>>> $(function () { >>>>> $(’.dropdown’).each(function () { >>>>> $(this).parent().eq(0).hover(function () { >>>>> $(’.dropdown:eq(0)’, this).show(); >>>>> }, function () { >>>>> $(’.dropdown:eq(0)’, this).hide(); >>>>> }); >>>>> }); >>>>> }); >>>>> >>>>> >>>>> >>>> dojo.require("dojo.NodeList-traverse"); >>>> >>>> // optional: for .hover() and .show()/.hide() NodeList support: >>>> dojo.require("plugd.base"); >>>> >>>> dojo.ready(function(){ >>>> >>>> var $ = dojo.query; >>>> $(".dropdown").forEach(function(n){ >>>> var l = $(n); >>>> l.parent().at(0) >>>> .onmouseenter(function(){ >>>> dojo.style(this, "display", "block"); >>>> }) >>>> .onmouseleave(function(){ >>>> dojo.style(this, "display", "none"); >>>> }); >>>> }); >>>> >>>> }); >>>> >>>> with plugd: >>>> >>>> dojo.ready(function(){ >>>> >>>> var $ = dojo.query; >>>> $(".dropdown").forEach(function(n){ >>>> var l = $(n); >>>> l.parent().at(0) >>>> .hover(function(e){ >>>> var t = $(this); >>>> if(/enter\|over/.test(e.type)){ >>>> t.show(); >>>> }else{ >>>> t.hide(); >>>> } >>>> }); >>>> }); >>>> >>>> }); >>>> >>>> Haven't tested this for sure, but the gist is all there. The only > oddity >>>> >>> >>> >>>> is parent() and whatever is going on with :eq in the children. Without > >>>> seeing the expected markup it would be hard to say how to handle the >>>> child selection queries in the hover callback. >>>> >>>> Regards, >>>> Peter >>>> >>>>> Thanks in advance, >>>>> >>>>> Kyle Spraggs >>>>> _______________________________________________ >>>>> FAQ: http://dojotoolkit.org/support/faq >>>>> Book: http://docs.dojocampus.org >>>>> Dojo-interest@... >>>>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >>>>> >>>>> >>>> _______________________________________________ >>>> FAQ: http://dojotoolkit.org/support/faq >>>> Book: http://docs.dojocampus.org >>>> Dojo-interest@... >>>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >>>> >>> _______________________________________________ >>> FAQ: http://dojotoolkit.org/support/faq >>> Book: http://docs.dojocampus.org >>> Dojo-interest@... >>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >>> >> >> _______________________________________________ >> FAQ: http://dojotoolkit.org/support/faq >> Book: http://docs.dojocampus.org >> Dojo-interest@... >> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest > _______________________________________________ > FAQ: http://dojotoolkit.org/support/faq > Book: http://docs.dojocampus.org > Dojo-interest@... > http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
	Re: jQuery fancy menu conversion by Peter Higgins-2 :: Rate this Message: \| View Threaded \| Show Only this Message l in my example is: var l = $(n); // converting a node to a NodeList of length == 1 so anything you can use with dojo.query() is now on L dojo.style(l[0], "display", ""); // only style the first node in the list l.style("display", ""); // style all nodes in this list, except we're only one node because we're just `n` That's at least the reason "why" it doesn't work. Matching the children to their parents is the desired effect. Regards, Peter theman@... wrote: > Interesting, > > It seems that using l.style("display", "block"); works whereas > dojo.style(l, "display", "block"); fails. Now I'm back to where I started > with the initial menu hover working. Let's see if I can get child menus > working. > > On Thu, 18 Feb 2010 13:58:58 -0700, <theman@...> wrote: > >> Unfortunately, the only thing that seems to be happening is the top menu >> hides itself after mouseout. I understood the prototype code as your >> previously stated but I'm still unsure how to replicate it. >> >> On Thu, 18 Feb 2010 15:45:55 -0500, Peter Higgins >> > <dante@...> > >> wrote: >> >>> Ahh, I see what I was missing. It's like a recursive thing, looking for >>> > > >>> "> .dropdown" within the element that was hovered. so the initial >>> parent().at(0) is correct, we're finding all .dropdown's in a page, >>> locating the parent containing it, connecting a mouseenter/leave >>> callback to that node which, when triggered searches for that same >>> .dropdown node (seems redundant?) and toggles the display:"" property >>> (via style() or plugd's hide()/show()) >>> >>> My pseudocode is mostly working, minus the re-query within the >>> > callback. > >>> Which I _think_ is unnecessary because I stored a reference to the node >>> > > >>> as 'l'. inside the .hover(), just use l.show()/l.hide() and it should >>> > be > >>> pointing (by way of closure) the correct node. >>> >>> Best of luck. >>> >>> Regards, >>> Peter >>> >>> theman@... wrote: >>> >>>> Wow, that was much quicker than expected. >>>> >>>> >>>> > http://www.webdesigndev.com/web-development/create-the-fanciest-dropdown-menu-you-ever-saw > >>>> That's the guide I was reading. >>>> >>>> On Thu, 18 Feb 2010 15:30:15 -0500, Peter Higgins >>>> >> <dante@...> >> >>>> wrote: >>>> >>>> >>>>> theman@... wrote: >>>>> >>>>> >>>>>> I found a nifty tutorial on creating a very sexy dropdown menu and >>>>>> >> I'm >> >>>>>> looking to do something similar using Dojo. I tried to implement the >>>>>> following using dojo.query along with forEach but I was >>>>>> > unsuccessful. > >>>>>> >>>>>> >>>> Can >>>> >>>> >>>>>> anyone convert this over to Dojo so I can see what I did wrong? >>>>>> >>>>>> $(function () { >>>>>> $(’.dropdown’).each(function () { >>>>>> $(this).parent().eq(0).hover(function () { >>>>>> $(’.dropdown:eq(0)’, this).show(); >>>>>> }, function () { >>>>>> $(’.dropdown:eq(0)’, this).hide(); >>>>>> }); >>>>>> }); >>>>>> }); >>>>>> >>>>>> >>>>>> >>>>>> >>>>> dojo.require("dojo.NodeList-traverse"); >>>>> >>>>> // optional: for .hover() and .show()/.hide() NodeList support: >>>>> dojo.require("plugd.base"); >>>>> >>>>> dojo.ready(function(){ >>>>> >>>>> var $ = dojo.query; >>>>> $(".dropdown").forEach(function(n){ >>>>> var l = $(n); >>>>> l.parent().at(0) >>>>> .onmouseenter(function(){ >>>>> dojo.style(this, "display", "block"); >>>>> }) >>>>> .onmouseleave(function(){ >>>>> dojo.style(this, "display", "none"); >>>>> }); >>>>> }); >>>>> >>>>> }); >>>>> >>>>> with plugd: >>>>> >>>>> dojo.ready(function(){ >>>>> >>>>> var $ = dojo.query; >>>>> $(".dropdown").forEach(function(n){ >>>>> var l = $(n); >>>>> l.parent().at(0) >>>>> .hover(function(e){ >>>>> var t = $(this); >>>>> if(/enter\|over/.test(e.type)){ >>>>> t.show(); >>>>> }else{ >>>>> t.hide(); >>>>> } >>>>> }); >>>>> }); >>>>> >>>>> }); >>>>> >>>>> Haven't tested this for sure, but the gist is all there. The only >>>>> >> oddity >> >>>>> >>>>> >>>> >>>> >>>>> is parent() and whatever is going on with :eq in the children. >>>>> > Without > >>>>> seeing the expected markup it would be hard to say how to handle the >>>>> child selection queries in the hover callback. >>>>> >>>>> Regards, >>>>> Peter >>>>> >>>>> >>>>>> Thanks in advance, >>>>>> >>>>>> Kyle Spraggs >>>>>> _______________________________________________ >>>>>> FAQ: http://dojotoolkit.org/support/faq >>>>>> Book: http://docs.dojocampus.org >>>>>> Dojo-interest@... >>>>>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >>>>>> >>>>>> >>>>>> >>>>> _______________________________________________ >>>>> FAQ: http://dojotoolkit.org/support/faq >>>>> Book: http://docs.dojocampus.org >>>>> Dojo-interest@... >>>>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >>>>> >>>>> >>>> _______________________________________________ >>>> FAQ: http://dojotoolkit.org/support/faq >>>> Book: http://docs.dojocampus.org >>>> Dojo-interest@... >>>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >>>> >>>> >>> _______________________________________________ >>> FAQ: http://dojotoolkit.org/support/faq >>> Book: http://docs.dojocampus.org >>> Dojo-interest@... >>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >>> >> _______________________________________________ >> FAQ: http://dojotoolkit.org/support/faq >> Book: http://docs.dojocampus.org >> Dojo-interest@... >> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >> > _______________________________________________ > FAQ: http://dojotoolkit.org/support/faq > Book: http://docs.dojocampus.org > Dojo-interest@... > http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest > _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
	Re: jQuery fancy menu conversion by Kyle Spraggs :: Rate this Message: \| View Threaded \| Show Only this Message Thanks for your help. I'll be sure to post my finished working example (assuming I ever finish it). On Thu, 18 Feb 2010 16:26:03 -0500, Peter Higgins <dante@...> wrote: > l in my example is: > > var l = $(n); // converting a node to a NodeList of length == 1 > > so anything you can use with dojo.query() is now on L > > dojo.style(l[0], "display", ""); // only style the first node in the list > l.style("display", ""); // style all nodes in this list, except we're > only one node because we're just `n` > > That's at least the reason "why" it doesn't work. Matching the children > to their parents is the desired effect. > > Regards, > Peter > > theman@... wrote: >> Interesting, >> >> It seems that using l.style("display", "block"); works whereas >> dojo.style(l, "display", "block"); fails. Now I'm back to where I started >> with the initial menu hover working. Let's see if I can get child menus >> working. >> >> On Thu, 18 Feb 2010 13:58:58 -0700, <theman@...> wrote: >> >>> Unfortunately, the only thing that seems to be happening is the top menu >>> hides itself after mouseout. I understood the prototype code as your >>> previously stated but I'm still unsure how to replicate it. >>> >>> On Thu, 18 Feb 2010 15:45:55 -0500, Peter Higgins >>> >> <dante@...> >> >>> wrote: >>> >>>> Ahh, I see what I was missing. It's like a recursive thing, looking for >>>> >> >> >>>> "> .dropdown" within the element that was hovered. so the initial >>>> parent().at(0) is correct, we're finding all .dropdown's in a page, >>>> locating the parent containing it, connecting a mouseenter/leave >>>> callback to that node which, when triggered searches for that same >>>> .dropdown node (seems redundant?) and toggles the display:"" property >>>> (via style() or plugd's hide()/show()) >>>> >>>> My pseudocode is mostly working, minus the re-query within the >>>> >> callback. >> >>>> Which I _think_ is unnecessary because I stored a reference to the node >>>> >> >> >>>> as 'l'. inside the .hover(), just use l.show()/l.hide() and it should >>>> >> be >> >>>> pointing (by way of closure) the correct node. >>>> >>>> Best of luck. >>>> >>>> Regards, >>>> Peter >>>> >>>> theman@... wrote: >>>> >>>>> Wow, that was much quicker than expected. >>>>> >>>>> >>>>> >> http://www.webdesigndev.com/web-development/create-the-fanciest-dropdown-menu-you-ever-saw >> >>>>> That's the guide I was reading. >>>>> >>>>> On Thu, 18 Feb 2010 15:30:15 -0500, Peter Higgins >>>>> >>> <dante@...> >>> >>>>> wrote: >>>>> >>>>> >>>>>> theman@... wrote: >>>>>> >>>>>> >>>>>>> I found a nifty tutorial on creating a very sexy dropdown menu and >>>>>>> >>> I'm >>> >>>>>>> looking to do something similar using Dojo. I tried to implement the >>>>>>> following using dojo.query along with forEach but I was >>>>>>> >> unsuccessful. >> >>>>>>> >>>>>>> >>>>> Can >>>>> >>>>> >>>>>>> anyone convert this over to Dojo so I can see what I did wrong? >>>>>>> >>>>>>> $(function () { >>>>>>> $(’.dropdown’).each(function () { >>>>>>> $(this).parent().eq(0).hover(function () { >>>>>>> $(’.dropdown:eq(0)’, this).show(); >>>>>>> }, function () { >>>>>>> $(’.dropdown:eq(0)’, this).hide(); >>>>>>> }); >>>>>>> }); >>>>>>> }); >>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>> dojo.require("dojo.NodeList-traverse"); >>>>>> >>>>>> // optional: for .hover() and .show()/.hide() NodeList support: >>>>>> dojo.require("plugd.base"); >>>>>> >>>>>> dojo.ready(function(){ >>>>>> >>>>>> var $ = dojo.query; >>>>>> $(".dropdown").forEach(function(n){ >>>>>> var l = $(n); >>>>>> l.parent().at(0) >>>>>> .onmouseenter(function(){ >>>>>> dojo.style(this, "display", "block"); >>>>>> }) >>>>>> .onmouseleave(function(){ >>>>>> dojo.style(this, "display", "none"); >>>>>> }); >>>>>> }); >>>>>> >>>>>> }); >>>>>> >>>>>> with plugd: >>>>>> >>>>>> dojo.ready(function(){ >>>>>> >>>>>> var $ = dojo.query; >>>>>> $(".dropdown").forEach(function(n){ >>>>>> var l = $(n); >>>>>> l.parent().at(0) >>>>>> .hover(function(e){ >>>>>> var t = $(this); >>>>>> if(/enter\|over/.test(e.type)){ >>>>>> t.show(); >>>>>> }else{ >>>>>> t.hide(); >>>>>> } >>>>>> }); >>>>>> }); >>>>>> >>>>>> }); >>>>>> >>>>>> Haven't tested this for sure, but the gist is all there. The only >>>>>> >>> oddity >>> >>>>>> >>>>>> >>>>> >>>>> >>>>>> is parent() and whatever is going on with :eq in the children. >>>>>> >> Without >> >>>>>> seeing the expected markup it would be hard to say how to handle the >>>>>> child selection queries in the hover callback. >>>>>> >>>>>> Regards, >>>>>> Peter >>>>>> >>>>>> >>>>>>> Thanks in advance, >>>>>>> >>>>>>> Kyle Spraggs >>>>>>> _______________________________________________ >>>>>>> FAQ: http://dojotoolkit.org/support/faq >>>>>>> Book: http://docs.dojocampus.org >>>>>>> Dojo-interest@... >>>>>>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >>>>>>> >>>>>>> >>>>>>> >>>>>> _______________________________________________ >>>>>> FAQ: http://dojotoolkit.org/support/faq >>>>>> Book: http://docs.dojocampus.org >>>>>> Dojo-interest@... >>>>>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >>>>>> >>>>>> >>>>> _______________________________________________ >>>>> FAQ: http://dojotoolkit.org/support/faq >>>>> Book: http://docs.dojocampus.org >>>>> Dojo-interest@... >>>>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >>>>> >>>>> >>>> _______________________________________________ >>>> FAQ: http://dojotoolkit.org/support/faq >>>> Book: http://docs.dojocampus.org >>>> Dojo-interest@... >>>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >>>> >>> _______________________________________________ >>> FAQ: http://dojotoolkit.org/support/faq >>> Book: http://docs.dojocampus.org >>> Dojo-interest@... >>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >>> >> _______________________________________________ >> FAQ: http://dojotoolkit.org/support/faq >> Book: http://docs.dojocampus.org >> Dojo-interest@... >> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest >> > > _______________________________________________ > FAQ: http://dojotoolkit.org/support/faq > Book: http://docs.dojocampus.org > Dojo-interest@... > http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest _______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org Dojo-interest@... http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest