Get Hash URL from anchor and load into Div

Question

Hello there,

I have a video gallery that has a menu on the left and loads the content into a div on the right hand side. The menu is generated from php video posts so we need a general script that will effect everything.

-- The problem --

The links will load the URL of the video as an anchor on the current URL -

eg.

http://www.divethegap.com/update/community/videos/#http://www.divethegap.com/update/2010/10/test-video-2/

So all I need is a script that will get the hash tag and load the content into a div. So far I have failed miserably trying to do that. I imagine it is something along the lines of document.location.hash but don't know where to go from there.

Help much appreciated.

Thanks

Answer 1

Note: this answer users jQuery because 1.4.2 is included and being used extensively in the page already.

You can attach a click handler to the anchors, for example:

$("#nav a").click(function() {
  $("#content").load(this.hash.substring(1));
});

You can test it out against your markup here, not it won't actually load in the demo since it's on a separate domain, but will work fine on the same domain.

Answer 2

You can try this -

$('a').click(function(){

  $('#content').load(document.location.hash.replace(/#/,''));

});

This will load the content after hash part from the current url.