http://www.example.com/page/#comment-12

You want to get the value after the hash tag (#), which is comment-12

The following Javascript code will help you achieve what you’re after:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
<script type="text/javascript">
 
//check if hash tag exists in the URL
if(window.location.hash) {
 
 //set the value as a variable, and remove the #
 var hash_value = window.location.hash.replace('#', '');
 
 //show the value with an alert pop-up
 alert(hash_value);
 
}
</script>

That’s it. It’s as easy that.

Please let me know if it did or didn’t work for you. Alternatively, if you know of a better way to achieve the same output. Thanks in advance!

Open in new window

Here’s how to make a div into a clickable link that will open the target URL into a new window.

1
2
3
4

 
<div onclick="window.open('http://www.brightcherry.co.uk/');">
 
</div>

Open in same window

Here’s how to make a div into a clickable link that will open the target URL into the same window.

1
2
3
4

 
<div onclick="window.location = 'http://www.brightcherry.co.uk/';">
 
</div>

Notes

The links CAN be relative to the domain, they don’t just work with full URLs. You can use URLs like “/dir/index.html”

So, the scenario is that when I’m writing AJAX code, a lot of the times I use a hyperlink to trigger an action. For example, look at the following code…

1
2
3
4
5
6
7
8
9
10
11

<a href="#" class="open_div">Open Div</a>
 
<div id="show_content" style="display:none">Show stuff here....</div>
 
<script type="text/javascript">
$(document).ready(function(){
	$(".open_div").click(function () {
		$('#show_content').show();
	});
});
</script>

Ok, so what that code is basically doing is displaying a link, with the anchor text, Open Div. When the link is clicked, the show_content div will appear, with the containing content.

But the problem is, if I clicked that link on the BrightCherry homepage (assuming the code was there), the URL would change to this…

Anyone else experience this? It’s not actually a problem, but it irritates me because I find it ugly and weird (probably because I’m very particular).

The Solution

The fix ISN’T to simply remove the hash (#) from the A TAG, because then the code won’t work.

To stop the trailing hash from the URL, you just need to do the following…

1
2

// replace the hash with the following
<a href="javascript:void(0);" class="open_div">Open Div</a>

Ahhh, that’s better.

Out of curiosity, has this problem actually bothered anyone else?

It’s a pretty cool effect, which I’m always using on a lot of projects. Here’s an example (click in the input field, and then click outside the input field):

1
2
3

<form>
<input type="text" value="Your Name" name="name" onblur="if (this.value == '') {this.value = 'Your Name';}"  onfocus="if (this.value == 'Your Name') {this.value = '';}" />
</form>