Hoverless Current Links sans Titles
August 9, 2004
Recently, Mike Rundle wrote one of those articles that makes you slap your forehead and say, "How in the world did I not think of that?". Mike's idea was to use the CSS cursor rule to make a link to the page you were currently view appear not to be a link. By using cursor:default there is no change to that ever telling hand cursor, making the user think there is no link to be found. As Mike states, nothing is more frustrating than clicking a piece of the navigation, only to see the same page load again. UPDATE: Through the comments on Mike's article, some are suggesting using cursor:text to show the text selection tool instead of the cursor. Works too, I still prefer the default cursor.
I started applying this to a site I was working on and quickly ran into a new issue, what about the title attribute?
The site Mike applied this fix to was BusinessLogs, which does not use title attributes in the affected navigation. This is all well and good, there is nothing in spec that requires the title attribute. But what if we wanted to use them in our navigation? How can we combine them with the Hoverless Current Link technique?
This seems to be what Javascript is really made for. Just as CSS separates presentation, JS is to separate behavior from the document. I am not a JavaScript expert, I welcome any modifications and suggestions to the code I will show here.
Start with this. I have created a simple, painfully ugly header and 3 link navigation. I am using an id in the body element for each of the sections. This id controls which link receives the Hoverless Current Link status. White background, no cursor change. But that pesky title tooltip still pops up. Enter a lil' Java...
function strip_title() {
var num = '';
var whoDat = document.body.id;
if (whoDat == 'h'){
num = 0;
}
if (whoDat == 'a'){
num = 1;
}
if (whoDat == 'c'){
num = 2;
}
a = document.getElementsByTagName('A');
for (var i = 0; i < a.length; i++) {
a[num].title = '';
}
}
This is really straightforward, the whoDat variable finds the body id, and then assigns a number based on which navigation element's title attribute we want to kill. This works in this instance because the navigation is the first three links on the page, always. In other situations you could use id's to specifically call them out if they were buried in more varied content.
Thats it. All you have to do is call the function when the page loads and it's good to go. Check out the finished product here. Jump around to the different pages to see it in action. Of course, I'd recommend dumping the CSS and JS out to an external file for use in the real world.
Filed under Design
Comments
scott says:
There is no really compelling reason not to just remove the link in the actual html page.
It does not take that much time, and doesn't require a bunch of extra coding or anything, just highlight and delete. You have to open the document to put the content in there, so just go ahead and take the extra 10 seconds to remove the link.
If you want another style applied to differentiate it so peopel see it is the current location, "ID=current".
I think there is sometimes a tendency to make things less usable, and more complicated in the interest of being "pure".
The user's experience is WAAAAAAY more important than the coder's.
Meitar Moscovitz says:
Scott said in a previous comment: "There is no really compelling reason not to just remove the link in the actual html page."
This technique is a scalability issue. I use PHP to make dynamic web sites and in these sites I only have one location for a navigation section, either in a template, an external file or a database. In cases where more than a single page use the same navigation, it isn't possible to just "remove the actual link" in that page, and that's why this technique is so helpful.
Although to be honest, I'm surprised it's considered "new." I've been doing this ever since I found CSS's cursor property. Stripping the title attribute is, admittedly, a nice extra touch, though. :)
Gary R says:
I agree with Scott here. Just remove the link. Certainly, it isn't 'impossible' to remove the link the link in PHP templating. In fact, it is generally a fairly trivial piece of programming to do so.
Brad Daily says:
Removing the link might work as well, but with my formatting in CSS, it would cause headaches without the presence of an anchor. The compromise here might be to just strip the title and href attributes...
Bruce Boughton says:
Surely it's far better to simply not have a link rather than trying to camouflage it. For me, that's doubly confusing -- some navigation element that looks just plain text and I click it (perhaps by accident) and get whisked away and confused.
I would think a better way would be to use some kind of MT/PHP script to replace the relevant anchor tag with a span instead and apply all navigation styles to both the anchor and span if necessary.
Brad Daily says:
That very well may be true, Bruce. But you won't get "whisked away". Remember it would only reload the page you are viewing, not take you away to the bright blue yonder of the web. For me, emphasis on me, this is an acceptable solution considering most sites have no system in place to disable or mask current links.
But the idea to strip the whole tag is fine, and I would be more than happy to see one of you guys write it up :)
won says:
I just include the two words 'this page' in titles of links that reload the current page:
‹a href="here.html" title="Here (this page)"›Here‹/a›
won
Garth Ogle says:
Actually, you can solve this whole pickle with just a little bit of php. Now, I know this isn't a php site, but since I use php scripts to generate pretty much everything, I'd like to mention that you can just have the script determine which page it is, and simply not echo the link at all (and apply the correct style tag.)
Of course, this is a great deal easier if all of your pages are just scripts that say which htm/php/css files to include, as you can just set a variable with the page's name which the navigation bar script checks.
I think nearly everything runs php, and its free, anyway. I'm sure you can achieve a similar thing with java or asp.
kinda like...
$page = "home";
include("navbar.php");
echo $navbar;
forget the javascript =P
Cheers,
-Garth
justin says:
Got to agree with some of the folks here, better to remove the link altogether. Think no Javascript, think no CSS, think accessibility...if you're on X page, why are is there a link to X page?? It just doesn't make any sense. It shouldn't be in the markup at all, either in the DOM or in the source.
Regardless of if you have a static site (does anybody anymore) or a server-side script driven site, it is a trivial task to *NOT* write out an anchor tag for the current page.
Moving your menu into a central template makes it even easier.
All server-side code has access to the server variables collection, just check it (URL) and write out appropriate XHTML.
Lucas Carlson says:
The tooltip problem is a LOT easier if you just add the following to the head of the document:
Lucas Carlson says:
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
Brad Daily says:
Lucas - Did you read the article? :)
We don't want to eliminate them altogether, we just want to selectively remove the one that cooresponds to the current page's link.
Ben says:
Slightly cooler javascript :)
Instead of looking for document.body.id, which is definitely not standards compliant, you can look for links that link to the page you are on.
You might have to do tweaking depending on how you code your links, but I think this ought to catch pretty much anything linking to the page you are on.
so something more along the lines of
function searchLinks() {
var currentPage = String(window.location)
var links = document.getElementsByTagName('a')
for ( var i = 0; i
if ( currentPage.indexOf(links[i].getAttribute('href') != -1 ) {
links[i].setAttribute('title','')
links[i].style.cursor = 'default'
}
}
}
window.onload = searchLinks
This will pick up any links in the page that reference the current page, and allow to modify as you like.
Peace!
Comments are closed for this entry
Doy says:
Nice, man. I wouldn't have thought of that, either. I need to slap that into our templates on the CSBS website, because people go through that here all the time. Sweet idea, too, to strip that title attribute.
So all this is prep for our secret project, right?