View Full Version : trying to seperate behavior from structure

08-19-2004, 05:08 PM
i'm having some trouble wrapping my head around event handling sans inline event handlers. can somebody help point me in the right direction towards achieving that with something like this as a starting point?

// script
function expandSubmenu(caller) {
// The calling <a>, it's text, and the <ul> we want to show are all sibling nodes on the same level.
// Hence, we need to invoke 'nextSibling' twice to target the <ul> we want to show. (diagram: <a> --> #text --> <ul>)
submenu = caller.nextSibling.nextSibling;
// Toggle display of the submenu
submenu.style.display = ((submenu.style.display == "")||(submenu.style.display == "none")) ? "block" : "none";
// Indicate a parent menu option has been selected by applying a class to it and remove the class when deselected.
if (caller.getAttribute("class")==null){caller.setAttribute("class","selected");}else{caller.removeAttribute("class");}
return false;

<!-- markup -->
<div id="mainMenu">
<h2>Main Menu</h2>
<li><a href="admin.cfm?action=categories" onclick="return expandSubmenu(this)">Categories</a>
<li><a href="admin.cfm?action=categories&amp;option=update">Add</a></li>
<li><a href="admin.cfm?action=categories">View/Edit</a></li>
<CFif session.permissions is 2>
<li><a href="admin.cfm?action=users" onclick="return expandSubmenu(this)">Users</a>
<li><a href="admin.cfm?action=users&amp;option=update">Add</a></li>
<li><a href="admin.cfm?action=users">View/Edit</a></li>
<li class="seperator"><a href="admin.cfm">Admin Main</a></li>
<li><a href="admin.cfm?action=log_out">Log Out</a></li>

Thanks in advance. And again, I don't necessarily want the solution as much as help understanding the concept and process. Links to your favorite tutorials on the subject would be great

08-19-2004, 06:20 PM

08-19-2004, 08:28 PM
On this page (http://cross-browser.com/x/examples/xwindow.php) scroll down to the xWinClass discussion. It's an example of implementing "unobtrusive dhtml". Perhaps it will be helpful. Feel free to ask any questions. :)

08-20-2004, 06:18 PM
Thank you Vladdy and Mike... look like great resources. I will check them out more this weekend, hopefully.

I am wondering about something else now though. In my script, I ended up with:

var submenu = caller.nextSibling.nextSibling;

To target a <ul> that is the sibling of an <a> within' a <li>. Now, I am interested in modifying this approach to work with a definition list. So then, our trigger is going to be the <a> within the <dt>, and our submenu or toggled element the associated <dd>. The relationship then is something like:

var details = caller.parentNode.nextSibling;

Though, parentNode does not seem to exist, and using `getParentNode()` in its place leaves FireFox telling me that's not a function. What am I looking for that is similar to `.nextSibling` but targets the parent node instead?

08-21-2004, 05:20 AM
Perhaps there's a text node in between.

It would be easier if we could see it.