1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Javascript Anchor

Discussion in 'Web Design & Development' started by bob121, Sep 30, 2008.

Thread Status:
Not open for further replies.
Advertisement
  1. bob121

    bob121 Thread Starter

    Joined:
    Sep 10, 2006
    Messages:
    207
    Hey,,

    Over the past few days i have posted 2 posts to repair a script I made, but it's functionality is very poor. I was hoping someone could help me write a new, better one.

    I'll explain what i want it do.

    I would like it to read the name of example.html#name and then alter a div with that name to display:block;


    So,
    example.html#test

    Would make the <div id="test"> show. which has been declared as display:none; in the CSS.

    Thanks James
     
  2. MMJ

    MMJ Guest

    Joined:
    Oct 15, 2006
    Messages:
    3,625
    PHP:
    if (location.hash){
        var 
    el document.getElementById(location.hash.substr(1));
        if (
    el)
            
    el.style.display 'block';
    }
    Which means that if the url is http://example.com#hello it will look for an element with an id of hello and show it.
     
  3. bob121

    bob121 Thread Starter

    Joined:
    Sep 10, 2006
    Messages:
    207
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #hello{
    display:none;
    }
    </style>
    <script language="javascript">
    if (location.hash){
        var el = document.getElementById(location.hash.substr(1));
        if (el)
            el.style.display = 'block';
    }  
    </script>
    </head>
    
    <body>
    <div id="hello">Hello</div>
    </body>
    </html>
    

    Doesn't seem to work. In any browser
     
  4. MMJ

    MMJ Guest

    Joined:
    Oct 15, 2006
    Messages:
    3,625
    You need to put it in the onload:

    HTML:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #hello{
    display:none;
    }
    </style>
    <script type="text/javascript">
    onload = function(){
    	if (location.hash){
    	    var el = document.getElementById(location.hash.substr(1));
    	    if (el)
    	        el.style.display = 'block';
    	}
    };	
    </script>
    </head>
    
    <body>
    <div id="hello">Hello</div>
    </body>
    </html>
     
  5. bob121

    bob121 Thread Starter

    Joined:
    Sep 10, 2006
    Messages:
    207
    That works but there is a wierd bug. In IE when you load the page with #hello nothing happends, then as soon as you press f5/refresh it works, but only ever works through this process. :S


    Thanks James
     
  6. MMJ

    MMJ Guest

    Joined:
    Oct 15, 2006
    Messages:
    3,625
    Yeah, that doesn't work because it only checks the hash once and when the hash changes the code doesn't fire again. So it only works if when you load the page the url has #hello in it. If you add it after you open the page it won't work.

    If you are making it a link than put it in the onclick:

    HTML:
    <a href="#hello" onclick="document.getElementById('hello').style.display = 'block';">SHOW HELLO</a>
     
  7. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Similar Threads - Javascript Anchor
  1. darshit
    Replies:
    1
    Views:
    436
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/754812

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice