Javascript Anchor

bob121 · Sep 30, 2008

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

MMJ · Sep 30, 2008

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.

bob121 · Oct 1, 2008

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

MMJ · Oct 1, 2008

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>

bob121 · Oct 1, 2008

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

MMJ · Oct 4, 2008

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>

Log in or Sign up

Javascript Anchor

bob121 Thread Starter

MMJ Guest

bob121 Thread Starter

MMJ Guest

bob121 Thread Starter

MMJ Guest

Sponsor

Welcome to Tech Support Guy!

Print pyramid in following pattern in javascript

Log in or Sign up

Javascript Anchor

bob121 Thread Starter

MMJ Guest

bob121 Thread Starter

MMJ Guest

bob121 Thread Starter

MMJ Guest

Sponsor

Welcome to Tech Support Guy!

Print pyramid in following pattern in javascript

Useful Searches