SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2004
    Location
    Rochester, NY
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sitepoint's Navigation Bar

    Hey guys. I was wondering how to implement the + and - signs that Sitepoint employs in their navbar to collapse and expand link text. My teacher showed me a cursory example but he was in a rush so I didn't have time to copy down the code = /

    From what I understand, you need 2 divs, and if its clicked the first time, make it inline, if it's clicked again, make its display none. I'm just not sure how to throw that into code! From what he showed me, it's a few lines long so not too troublesome, so I hope someone can be of assistance. Thanks!

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was wondering how to implement the + and - signs that Sitepoint employs in their navbar to collapse and expand link text.
    I don't see that anywhere , but you can try this:
    Code:
    <!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    
    <html xmlns="http://www.w3.org/1999/xhtml" 
      xml:lang="en" lang="en">
    
    <head>
    <title>html and javascript</title>
    <style type="text/css">
    <!-- 
    
    .hide{display:none};
    .icon_style{width:12px; font:bold 16px arial;cursor: pointer;}
    .show{}
    
    -->
    </style>
    <script type="text/javascript" language="javascript">
    <!-- Hide from browsers lacking javascript
    
    window.onload=function()
    {
    	document.getElementById("icon").onclick=toggle;
    		
    };
    
    function toggle()
    {
    	var icon = document.getElementById("icon").firstChild;
    	//alert(icon);
    	if(icon.nodeValue == '+') icon.nodeValue = "-";
    	else icon.nodeValue = "+";
    	//alert(icon);
    
    	var sub = document.getElementById("sub");
    	if(sub.className == "hide")	sub.className = "show";
    	else sub.className = "hide";
    }
    	
    // End hiding -->
    </script>
    
    <noscript>
    <style>
    /*for browsers without javascript: displays everything*/
    .hide{display: block};
    </style>
    </noscript>
    
    </head>
    <body>
    
    <div><span id="icon" class="icon_style">+</span><span>Heading</span>
    <span id="sub" class="hide">&gt subheading</span></div>
    
    </body>
    </html>
    Last edited by 7stud; Nov 9, 2004 at 23:58.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2004
    Location
    Rochester, NY
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks 7stud! Well, the + and - thing can be seen on the navigation bar for the forums at links like PHP and Databases. I hate to be a bother, but is it possible that you can give me a walkthrough of that code? I love learning new stuff Thanks a lot for your time and help 7stud!

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    window.onload=function()
    {
    	document.getElementById("icon").onclick=toggle;
    		
    };
    You can't refer to elements on the page:

    document.getElementById("icon")

    until they exist. The elements don't exist until after the page loads, so in the statement above, I used the onload event to assign the toggle() event handler function to the 'icon' onclick event. That statement is equivalent to this:

    Code:
    window.onload=initialize:
    function initialize()
    {
        document.getElementById("icon").onclick=toggle;
    }
    However, since I will never need to call the initialize() function again, it does not need to be a named function, so I used the shorthand form:

    window.onload=function(){........};

    When you assign named functions to events like I did, you use only the function name:

    initialize

    or

    toggle

    without the '()' operator. If you did this:

    document.getElementById("icon").onclick=toggle();

    then when that line is processed, the toggle() function would immediately execute, and the results would be assigned to the onclick event. That's not what you want. What you want is for nothing to happen when that line is processed, and only when the onclick event happens do you want the toggle() function to execute. The way you do that is by only using the function name.

    The toggle() function uses what's called the DOM, to obtain the first and third <span>, and change their properties. The 'icon' <span> has its .nodeValue property, which is the text contained in the <span>, changed from '+' to '-', and the 'sub' <span> gets it's .className property changed from 'show' to 'hide', which determines the css style that applies to the <span>, and therefore whether it is visible or hidden.

    For a tutorial on the DOM, see here:

    http://www.sitepoint.com/article/rough-guide-dom

    I hope that helps.
    Last edited by 7stud; Nov 10, 2004 at 12:06.

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2004
    Location
    Rochester, NY
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's great! I understand much better now. I'll be sure to read up on that tutorial too! Thanks 7stud

  6. #6
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You can download tree code like that at any decent Javascript site including examples at Microsoft's MSDN website.
    Wayne Luke
    ------------


  7. #7
    SitePoint Guru
    Join Date
    Jul 2004
    Location
    Raleigh, NC
    Posts
    783
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i stripped it down here
    http://www.sitepoint.com/forums/showthread.php?t=207071

    also, there are some pointers here for how to do it with text only (ie: not using images for the + and - signs)

  8. #8
    SitePoint Zealot
    Join Date
    Oct 2004
    Location
    Rochester, NY
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well W. Luke, I did a brief search before posting but only could come up with the folder/directory type of style, which wasn't really what I was interested in. Thanks Darchangel for the link to your former post as well!


Bookmarks

Posting Permissions

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