So, as the title suggests, I'm trying to figure out how to retrieve the current address of the page being shown and then, well, do stuff with it...

 

The problem is, virtually all the information I can find about this works with parameters passed to the URL, for example:

http://domain.com?param1=val1&param2=val2

This would work fine if I was using something like WordPress's permalink options, but currently I'm trying to do this in straight HTML/CSS/JS. I thought I'd struck gold when I found this thread on StackOverflow, but again, the examples there aren't really structured for my needs (well, not as far as I know anyway).

 

 

So, working with the following example URL:

http://domain.com/index.html#anchor1

This project involves applying a tab style (example) layout to a website's main navigation, so it works perfectly on it's own page... But if I open one of these links in a new tab, because of the jQuery behind the scenes, it loads on the original 'Landing Page'.

 

Can somebody perhaps help me retrieve this #anchor1 on page load? Just a few hints would be awesome; I am trying to figure out as much as I can on my own, but at the moment I'm not even sure where I should be looking...

If you just want the anchor, use something like:

 

var hash = location.hash;
if(hash){
  //Do something with the hash variable
}

var hash = location.hash;

That... Right there... That's just perfect, and so beautifully simple. If I'd known what the heck it was called, I probably would've been able to find it. Thanks Spitfire.

 

Edit: Yup, confirmed.. It is working exactly as intended.

Edited September 20, 201114 yr by ZaLiTH

As a follow-up to this query, I have another question... I've managed to get the page set up so that pointing the browser to an anchor with the address bar (i.e.: open link in new tab, or from a bookmark) displays the correct 'page', but I can't get the navigation to update as well.

 

On load, I now check for any hash tags in the address bar, and if there is one it goes to that page.. The navigation is laid out using this:

<ul id="nav" class="nav">
<li><a href="#page1">Page 1</a></li>
<li><a href="#page2">Page 2</a>
	<ul>
		<li><a href="#article1">Sub-page 1</a></li>
		<li><a href="#article2">Sub-page 2</a></li>
		<li><a href="#article3">Sub-page 3</a></li>
	</ul>
</li>
<li><a href="#page3">Page 3</a></li>
</ul>

 

Using a tip I found here, I tried to set the script to update the navigation as well:

$(function(initPages) {
var hash = location.hash;

if(hash) {
	// Set linked page as visible
	initPages(hash).show().addClass('current');
	// Update nav li class
	initPages('#nav > a[href=hash]').parent('li').addClass('current'); // CURRENTLY BROKEN RULE
} else {
	// Set landing page as visible
	initPages('#page0').show().addClass('current');
};
});

 

As you can see, my styling makes use of class="current" on the 'li' tag (not the 'a' tag), but I can't get the rule in the middle to update my navigation correctly... It doesn't give any errors, but it doesn't apply the class to any element (not that I can see anyway).

 

So.. Where am I going wrong? I suspect it's to do with the '#nav > a[href=hash]' section, but I'm honestly not sure..

initPages('#nav > a[href=hash]')

In the above, jQuery wouldn't read hash as a variable. It would see it as normal text and try to find <a href="hash"> in your code.

 

Change it to:

initPages('#nav > a[href="' + hash + '"]')

 

You need the " " quotes around the value of the selector, eg: [name=value].

 

The other quotes and plus signs let jQuery know you're using a variable in string of text.

initPages('#nav > a[href=hash]')

In the above, jQuery wouldn't read hash as a variable. It would see it as normal text and try to find <a href="hash"> in your code.

Oh right, I see.. That would explain why there were no errors then. Thanks again.