...

View Full Version : trying to seperate behavior from structure



]|V|[agnus
08-19-2004, 04: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>
<ul>
<li><a href="admin.cfm?action=categories" onclick="return expandSubmenu(this)">Categories</a>
<ul>
<li><a href="admin.cfm?action=categories&amp;option=update">Add</a></li>
<li><a href="admin.cfm?action=categories">View/Edit</a></li>
</ul>
</li>
<CFif session.permissions is 2>
<li><a href="admin.cfm?action=users" onclick="return expandSubmenu(this)">Users</a>
<ul>
<li><a href="admin.cfm?action=users&amp;option=update">Add</a></li>
<li><a href="admin.cfm?action=users">View/Edit</a></li>
</ul>
</li>
</CFif>
<li class="seperator"><a href="admin.cfm">Admin Main</a></li>
<li><a href="admin.cfm?action=log_out">Log Out</a></li>
</ul>
</div>


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

Vladdy
08-19-2004, 05:20 PM
www.vladdy.net/Demos/Tree.html

MikeFoster
08-19-2004, 07: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. :)

]|V|[agnus
08-20-2004, 05: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?

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

It would be easier if we could see it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum