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 8 of 8
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts

    getNextSibling()

    I am trying to write a function to expand submenu options from a main menu. All options in a list. I want to use getNextSibling to avoid unecessary class or id attributes in my markup.

    Code:
    <!-- example markup -->
    <ul id="nav">
       <li><a href="#">option 1</a></li>
       <li>
          <a href="#" onclick="expandSubmenu(this)">option 2</a>
          <ul>
             ... submeny options ...
          </ul>
       </li>
    </ul>
    
    // script
    function expandSubmenu(parent) {
    	subnav = parent.getNextSibling().display;
    	if ((subnav == "")||(subnav == "none")) {
    		subnav = "block";
    	} else {
    		subnav = "none";
    	}
    	return false;
    }
    The submenus are hidden by default with JS. Accessibility zealots fear not, the parent links in my actual code would be followed to a secondary representation of the information if JS is disabled. This is what I've started with, but at this point Firefox JS console is telling me "parent.getNextSibling is not a function". Where am I going wrong?
    Last edited by ]|V|[agnus; 08-17-2004 at 08:25 PM.

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    .nextSibling is a property. .getNextSibling() is a getter function for a DOM binding in languages which don't support getters. So use .nextSibling, and watch out for whitespace nodes.

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, mmkay. I was skeptical about getNextSibling the function as searches for it turned up some obscure texts, much of it dealing with XML and such. Thanks for clearing things up.

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Once I target the correct node, how do I access the style properties for the element at that node?
    Last edited by ]|V|[agnus; 08-18-2004 at 02:59 AM.

  • #5
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    .style

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I thought so, but I am not getting the desired results. I thought perhaps once you targeteted a node you had to do something like [pseudo-code]getElementByNode[/pseudo-code]. Here is what I'm trying:

    Code:
    <!-- markup -->
    <!-- inner <ul>s are hidden with stylesheet by default -->
    <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">Browse</a></li>
    		</ul>
    	</li>
    </ul>
    
    // JS
    function expandSubmenu(parent) {
    	sibling = parent.nextSibling.nextSibling; // skip over text node to get to adjacent <ul>
    	subnavDisplay = sibling.style.display;
    	//alert("Node Name: " + sibling.nodeName + "\nNode Type: " + sibling.nodeType + "\nNode Value: " + sibling.nodeValue + "\nDisplay: " + subnavDisplay);
    	if ((subnavDisplay == "")||(subnavDisplay == "none")) {
    		subnavDisplay = "block";
    	} else {
    		subnavDisplay = "none";
    	}
    	return false;
    }
    My debug alert tells me I'm targeting the correct node. No JS errors. :\

  • #7
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    subnavDisplay is a string, not a pointer reflecting the actual value of the display property. Just assign back to sibling.style.display instead of subnavDisplay.

  • #8
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ah yes, indeed, thanks!


  •  

    Posting Permissions

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