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 [email protected]
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
-~----------~----~----~----~------~----~------~--~---
