Log in

View Full Version : Tab Script - Select tab from hash tag


X96 Web Design
12-29-2009, 01:03 AM
I'm working on a dynamic tab menu (powered by jQuery) for my site. It works perfectly, but I want to make it so that it selects a certain tab depending what the hash in the URL is.

So if the URL was #contact it would select the "Contact" tab and show the associated content.

Here's what I have: [Live Demo (http://x96webdesign.uuuq.com/web_app/demo/jquery_tab_hash_select/)]

<!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" xml:lang="en" lang="en">
<head>
<title>X96 Design and Development</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { margin:10px; padding:0; font:1em "trebuchet ms", verdana, arial, sans-serif; font-size:100%; }
h1 { margin-bottom:2px; font-family:garamond, Georgia, "times new roman", times, serif;}
div.container { margin:auto; width:800px; margin-bottom:10px;}
textarea { width:80%;}
fieldset { border:1px solid #ccc; padding:1em; margin:0; }
legend { color:#ccc; font-size:120%; }
input, textarea { font-family:arial, verdana; font-size:125%; padding:7px; border:1px solid #999; }
label { display:block; margin-top:10px; }
img { margin:5px; }

ul.tabNavigation {
list-style:none;
margin:0;
padding:0;
}

ul.tabNavigation li {
display:inline;
}

ul.tabNavigation li a {
padding:3px 15px;
background-color:#ededed;
color:#555;
text-decoration:none;
text-shadow:0 1px 0 #fff;
}
ul.tabNavigation li a:hover {
color:#000;
text-decoration:none;
}

ul.tabNavigation li a.selected, ul.tabNavigation li a.selected:hover {
background-color:#333;
color:#fff;
padding-top:7px;
text-shadow:0 -1px 0 #000;
text-decoration:none;
}

ul.tabNavigation li a:focus {
outline:0;
}

div.tabs > div {
padding:5px;
margin-top:3px;
border-top:3px solid #333;
}

div.tabs > div h2 {
margin-top:0;
}
#logo {
text-decoration:none;
background:transparent url(includes/logo.png) no-repeat scroll 0 0;
display:block;
width:436px;
height:93px;
text-indent:-9999em;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>
</head>
<body>
<div class="container">
<a id="logo" href="#home">X96 Design and Development</a>
<div class="tabs">
<ul class="tabNavigation">
<li><a href="#home">Home Slice</a></li>
<li><a href="#portfolio">Our Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div id="home">
<h1>Welcome.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="portfolio">
<h1>What We've Done.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="contact">
<h1>Get in Touch.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</body>
</html>

Any help would be appreciated...

// X96 \\
twQ
12-29-2009, 02:41 AM
I'm confused, is something not working. On your live demo when you click a tab it changes? I'm using FF if that helps.
X96 Web Design
12-29-2009, 04:25 AM
Ya - it works perfectly fine; I just wanted to know how to get it to change via a URL parameter, like if the URL was index.html#contact then it would automatically select the contact tab, or if it was index.html#about it would automatically select the about tab, etc.

It's mostly for SEO, but also if the page is refreshed.

Hope this clears it up, I'm never very good at explaining things... :P

// X96 \\
twQ
12-29-2009, 04:33 AM
Oh I get it haha. Neither am I, that's why I don't help much I always confuse myself while trying to give an answer unconfusing to the OP.

Anyways, I'm not sure here. I tried to replicate this same thing and eventually decided on cookies until I realized that would make bookmarking not work. I also thought of other reasons that would make it hard to function and in the end abandoned AJAX, for now, in favor of normal linking.

So now that I've told you why I can't help you :p, I'll say I hope you find your answer. If you do without the thread please post your solution here or PM it to me. I would be interested to know. If it's possible I'm sure someone on here will tell us how.

Tim
jscheuer1
12-29-2009, 04:35 AM
You can probably work out the details for yourself. I think the property you are looking for is:


location.hash

You would want to find that, well anytime, as its value is always available as soon as the page starts to load. But you would want to act upon it onload or document ready, that sort of thing.

To get an idea of what it returns, paste this into the browser's address bar on a page with a hash (#whatever), and on one without one:


javascript:alert(location.hash)

Hit enter.

Any questions, feel free to ask.

If I missed the point, let me know.
X96 Web Design
12-29-2009, 04:55 AM
Thank you!

I got the page content to load, but the selected class isn't being applied to the menu items... I should probably be able to figure it out...

Here's the JS I have now:

<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
var hashme = location.hash;
tabContainers.hide();
tabContainers.filter(location.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$('div.tabs ul.tabNavigation a' + hashme).addClass('selected');
return false;
});
</script>

It loads the page content, but, as mentioned, I can't get the selected class the be applied automatically...

Any help would be appreciated!

// X96 \\
jscheuer1
12-29-2009, 05:40 AM
I think there may be one or more kinks yet to work out (like at least dealing with URL's with no hash). But, the a tag you want to select doesn't have an id of the hash - '#' (if it did, that part should work), it has an href ending in the hash. So, instead of:


$('div.tabs ul.tabNavigation a' + hashme).addClass('selected');

You would want:


$('div.tabs ul.tabNavigation a[href$=' + hashme + ']').addClass('selected');
X96 Web Design
12-29-2009, 07:15 AM
Wow... I can't believe I didn't figure that out! Thank you! Some days I just can't think strait... :D

I'm not the best with Javascript; could you tell me what I'm doing wrong with this IF statement, please?

var hasme = location.hash;
if(hashme == null){
$('div.tabs ul.tabNavigation a:first').click();
}

Thank you for all your help!!

// X96 \\
jscheuer1
12-29-2009, 07:33 AM
Well, unless that's a typo:



var hasme = location.hash;
if(hashme == null){
$('div.tabs ul.tabNavigation a:first').click();
}

It's either in null, which should work for any 'falsy' value for the hash, but might not, as an empty hash might not be an empty string or other 'falsy' value. But if that part's OK, it would then have to be the:


$('div.tabs ul.tabNavigation a:first').click();

part.

To eliminate the first possibility, load a page with no hash, then paste this into the address bar:


javascript:alert(location.hash == null)

If that doesn't come back true, the test you have will never work.

But I'm currently voting for the typo hypothesis. However, who knows? The live page hasn't been updated, so I cannot be sure how the new code is being used.
jscheuer1
12-29-2009, 07:42 AM
I just tried my own test, you need:


javascript:alert(location.hash == '')

or:


javascript:alert(location.hash === '')

to get true. Comparing it to null, even with a type conversion operator like == just doesn't seem to work. Perhaps location.hash can be viewed as an object when compared to other objects (null is an object). In cases like that, the two objects must be the same object, not just identical in meaning and/or composition.