Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts

    trying to seperate behavior from structure

    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?

    Code:
    // 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

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    On this page 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.

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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:

    Code:
    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?

  • #5
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perhaps there's a text node in between.

    It would be easier if we could see it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •