SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Small problem with hide / show content - document.getElementById(id); novice

    Hi all my first time with javascript I'm using this code from a example i found.. my problem is that when the page loads it shows the id's content, but I want the content to be hidden until the link gets pressed.

    Javascript
    Code JavaScript:
    <script type="text/javascript">
    <!--
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        }
    //-->
    </script>

    What do I need to change?

    body
    Code HTML4Strict:
    <p><a href="#" onclick="toggle_visibility('pki');">Click here for pki</a></p>
    <div id="pki"><p>This is pki information</p></div>
    <p><a href="#" onclick="toggle_visibility('vendors');">Click here for vendors</a></p>
    <div id="vendors"><p>This is pki vendor information</p></div>

    Also if you can answer these questions also about the above? thanks again!

    1. if I put the first Snippet above(javascript code) below the body tag it works, but it also works if i put the code in the <head> tag? Whats the best way?

    2.Why do i need a second click for the above example to work? Meaning I need to click the link twice first until it will hide the content?

    3. Is there anyway I can alter my code so that when a link is clicked it doesn't display # in my address bar? example: www.example.com/#

    Cheers guys, hope you can help

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by computerbarry View Post
    Hi all my first time with javascript I'm using this code from a example i found.. my problem is that when the page loads it shows the id's content, but I want the content to be hidden until the link gets pressed.
    At the bottom of the page you should run the toggle_visibility function.

    Code HTML4Strict:
    <script type="text/javascript">
    toggle_visibility('pki');
    toggle_visibility('vendors');
    </script>
    </body>
    </html>

    By the way, get rid of the comments in the javascript. That was done back in 1995 when Netscape 2 came out with the scripting ability. Because Netscape 1 (and only that one) didn't have scripting and would show the code instead, those comments were used so that Netscape 1 would still look okay. That issue is long gone now so get rid of the comments.

    Quote Originally Posted by computerbarry View Post
    1. if I put the first Snippet above(javascript code) below the body tag it works, but it also works if i put the code in the <head> tag? Whats the best way?
    When script are loaded, all loading gets halted until the script has finished what it's doing. With scripts in the head there can be quite a delay before anything appears on the screen. When scripts at the end of the body, your page appears to load a whole lot faster.

    Quote Originally Posted by computerbarry View Post
    2.Why do i need a second click for the above example to work? Meaning I need to click the link twice first until it will hide the content?
    The style starts off as an empty string, even if you have a class applied to the element. Using the value of 'block' is not a good idea either, because you may want to toggle other elements that don't have a normal block display. If you set the style back to empty then the default display is used instead.

    Both of these can be resolved by changing the test to the following.

    Code Javascript:
    if(e.style.display == 'none')
        e.style.display = '';
    else
        e.style.display = 'none';

    or if you want to get fancy

    Code Javascript:
    e.style.display = (e.style.display == 'none') ? '' : 'none';

    Quote Originally Posted by computerbarry View Post
    3. Is there anyway I can alter my code so that when a link is clicked it doesn't display # in my address bar? example: www.example.com/#
    Yes there is. When the event has the value of false returned to it, that will cancel the default action that would occur, in this case going to the link itself.

    Update the onclick event so that it returns the function value. You should also change the # link to an actual link that makes sense, #pki and #vendors in this case - that way if javascript is not available it will still work, and search engines become a lot happier too.

    Code HTML4Strict:
    <a href="#pki" onclick="return toggle_visibility('pki');">

    and add the following to the end of the function.

    Code Javascript:
    return false;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot! Some great advice there, thanks for your help

    Ok. where do I place 'return false;' like you mentioned?

    Code HTML4Strict:
    <ul><li><a href="#pki" onclick="return toggle_visibility('pki');">PKI</a></li>
    	  <div id="pki">
    	  	<li><a href="?" class="sub">Enterprise PKI</a></li>
    	  	<li><a href="?" class="sub">An Introduction to PKI</a></li>
    		<li><a href="?" class="sub">PKI Vendor Questions</a></li>
    	  </div>
    	  <li><a href="#vendors" onclick="return toggle_visibility('vendors');">PKI Vendors</a></li>
    		<div id="vendors">
    	  	<li><a href="?" class="sub">UniCERT PKI</a></li>
    	  	<li><a href="?" class="sub">Entrust PKI</a></li>
    		<li><a href="?" class="sub">RSA Keon</a></li>
    	  </div>
     
    ...

    What is this actually doing?
    Code JavaScript:
    <script type="text/javascript">
    toggle_visibility('pki');
    toggle_visibility('vendors');
    </script>

    Thanks

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    That last piece of code, when placed at the end of the document will hide each div, so that they each can be revealed when the appropriate link is clicked.

    The end of the toggle_visibility function is where you place the return false statement.

    Code Javascript:
    function toggle_visibility(id) {
        // function code here
        return false;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks I understand hiding the div now.. but still not sure with return false;?

    Will return false; hide the #pki in the address bar?

    do you mean:
    Code JavaScript:
    <script type="text/javascript">
    toggle_visibility('pki') {
    return false; }
    toggle_visibility('vendors') {
    return false; }
    </script>

    Thanks again like I said javascript novice cheers

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    When someone clicks on the link the browser will perform the onclick event. If the event returns false then that cancels the click, and the browser doesn't try to go to the link.

    Please note the function attached to the onclick event gets run regardless of what is returned.

    To cancel the default action of the link (so it doesn't follow the link) you need to return the value of false, which will come from the toggle_visibility() function, to the onclick event.

    Code HTML4Strict:
    <a href="#pki" onclick="return toggle_visibility('pki');">

    The above returns a value from the toggle_visiblity() function. Now we just need the function to return the value of false, which cancels the default action of the link.

    Code Javascript:
    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'none') {
            e.style.display = '';
        } else {
            e.style.display = 'none';
        }
        // cancel default action for the link
        return false;
    }

    When the page first loads and you run the function to hide the appropriate areas, no links are clicked on at that stage so you don't need to return false to anything.

    Leave the code that initially hides the areas as it was.

    Code HTML4Strict:
    <script type="text/javascript">
    toggle_visibility('pki');
    toggle_visibility('vendors');
    </script>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works great pmw57 thanks again!!

    I'm getting a better understanding now, and thanks for your time and the big explanations cheers


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
  •