bluezehn, the $$ method just executes getElementsBySelector on the document. http://prototypejs.org/api/element/getelementsbyselector
You may be having trouble with the mouseover/out events because of event propagation, the <span> elements inside your <li>s will actually fire their own mouse events which are caught by your LI's which can lead to some troublesome behavior. Instead of using alert, get Firebug and use console.log, so you can inspect the objects more thoroughly. On Sep 18, 8:30 am, bluezehn <[EMAIL PROTECTED]> wrote: > Apologies to double post, but you may also find the Array#each() and > prototype's various enumerable functionalities useful as it seems > you're taking the long way around in a lot of your code. Link > again:http://www.prototypejs.org/api/enumerable > > If you're starting out with prototype I'd also strongly recommend > Andrew Dupont's book on the subject as it's absolutely fantastic. > > On Sep 18, 2:28 pm, bluezehn <[EMAIL PROTECTED]> wrote: > > > I haven't read your post any more than seeing the expression > > "getElementsBySelector", but that alone prompts me to forward you to > > this link in the api:http://www.prototypejs.org/api/utility/dollar-dollar > > > That's the prototype way of doing what you're trying to do. Try it out > > and if you have any further problems post back. > > > On Sep 18, 2:06 pm, banry <[EMAIL PROTECTED]> wrote: > > > > I'm trying to convert some code from mootools to prototype, but I can > > > get the first ul to work but none of the others add the hover class on > > > mouseover. its got something to do with the call to > > > getElementBySelector - any help appreciated > > > > Event.onDOMReady(function(){ > > > alert('DOM is loaded!'); > > > element = $('menu') > > > if(!element.hasClassName('disabled')) { > > > var menu = new JMenu(element) > > > document.menu = menu > > > }; > > > > }); > > > > var JMenu = Class.create(); // added pd > > > JMenu.prototype = { // added pd > > > > initialize: function(el){ > > > var elements = el.getElementsBySelector('li'); > > > alert(elements.length); > > > var nested = null; > > > for (var i = 0; i < elements.length; i++) { > > > var element = elements[i]; > > > //alert(elements.length); > > > Event.observe(element, 'mouseover', > > > function(){ > > > this.addClassName('hover'); > > > }); > > > Event.observe(element, 'mouseout', > > > function(){ > > > this.removeClassName('hover'); > > > }); > > > > //find nested UL > > > //nested = $E('ul', element); > > > nested = > > > element.getElementsBySelector('ul').first; > > > if (!nested) { > > > continue; > > > } > > > > //declare width > > > var offsetWidth = 0; > > > > //find longest child > > > for (k = 0; k < nested.childNodes.length; > > > k++) { > > > var node = nested.childNodes[k] > > > if (node.nodeName == "LI") > > > offsetWidth = > > > (offsetWidth >= node.offsetWidth) ? offsetWidth : > > > node.offsetWidth; > > > } > > > > //match longest child > > > for (l = 0; l < nested.childNodes.length; > > > l++) { > > > var node = nested.childNodes[l] > > > if (node.nodeName == "LI") { > > > $(node).setStyle('width', > > > offsetWidth + 'px'); > > > } > > > } > > > > $(nested).setStyle('width', offsetWidth + > > > 'px'); > > > } > > > } > > > }; > > > > <div id="module-menu"> > > > > <ul id="menu"> > > > <!--<li class="node"><a>Tasks</a></li>--> > > > <li class="node"><a>Organisation</a> > > > <ul> > > > <li><a href="/companies" > > > class="icon-16-cpanel">Companies</a></ > > > li> > > > <li > > > class="separator"><span></span></li> > > > <li><a href="/business_streams" > > > class="icon-16- > > > cpanel">Business_streams</a></li> > > > <li > > > class="separator"><span></span></li> > > > > <li><a href="/employees" > > > class="icon-16-user">Employees</a></li> > > > <li > > > class="separator"><span></span></li> > > > <li><a href="/users" > > > class="icon-16-user">Users</a></li> > > > <li > > > class="separator"><span></span></li> > > > <li><a href="/roles" > > > class="icon-16-user">Roles</a></li> > > > <li > > > class="separator"><span></span></li> > > > <li><a href="/periods" > > > class="icon-16-cpanel">Periods</a></li> > > > > <li > > > class="separator"><span></span></li> > > > <li><a href="/accounts" > > > class="icon-16-cpanel">Accounts</a></li> > > > <li > > > class="separator"><span></span></li> > > > <li><a href="/cost_centres" > > > class="icon-16-cpanel">Cost Centres</ > > > a></li> > > > <li > > > class="separator"><span></span></li> > > > <li><a > > > href="/cost_centre_accounts" class="icon-16-cpanel">Cost > > > Centre Accounts</a></li> > > > <li > > > class="separator"><span></span></li> > > > > <li><a href="/hierarchies" > > > class="icon-16-cpanel">Hierarchies</ > > > a></li> > > > <li > > > class="separator"><span></span></li> > > > > </ul> > > > </li> > > > <li class="node"><a>System Setup</a> > > > <ul> > > > <li><a href="/transaction_types" > > > class="icon-16- > > > cpanel">Transaction Types</a></li> > > > > <li > > > class="separator"><span></span></li> > > > <li><a > > > href="/reconciliation_types" class="icon-16- > > > cpanel">Reconciliation Types</a></li> > > > <li > > > class="separator"><span></span></li> > > > <li><a > > > href="/reconciliation_sub_types" class="icon-16- > > > cpanel">Reconciliation Sub Types</a></li> > > > > </ul> > > > </li> > > > <li class="node "><a>Reconciliation</a> > > > > <ul> > > > <li><a > > > href="/reconciliation_responses" class="icon-16- > > > cpanel">Reconciliation Responses</a></li> > > > </ul> > > > </li> > > > > <li class="node"><a>Help</a></li> > > > </ul> > > > > </div> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
