How to hide link targets in the status bar

Often when I use Gmail or other Google web apps, I notice that hyperlinks don’t reveal their target in the browser status bar. As a user of course I would be interested to know what will happen when I click a link, so I check the status bar and ideally it will show the target URL.

In rich web applications like Gmail for instance, links often don’t point to real URLs but to Javascript actions instead. However revealing Javascript actions in the status bar isn’t always appreciated since it might scare off users when they see it’s not a ‘normal’ link.

The traditional way of writing links is something like this:

<!-- shows # in status bar -->
<a href="#" onclick="do_something()">Click here</a>

<!-- most browsers reveal the script target in status bar -->
<a href="javascript:do_something()">Click here</a>

Now from a user perspective it’s kind of ugly to see javascript:do_something() in the status bar, and using the good old hash sign isn’t very cool either. It looks bad and can make browsers jump to the top of the page if your action doesn’t return false. In the early days you simply used window.status = ""; to override the status bar, but today this is blocked by most modern browsers by default. People simply used it to do annoying things. Fortunately there are other ways.

The way Google & Co keep their design sleek is easy: simply define links on elements other than <a> tags. If the element has no href attribute, the target won’t be shown in the status bar.

With Javascript it’s easy to define click events on whatever element on the page, and with frameworks like MooTools and jQuery it’s even easier. So if you want to keep the status bar empty, try writing links this way:

<!-- shows nothing in status bar -->
<span id="my_new_link">Click here</span>

Don’t forget to add some nice CSS with hover effects and cursor:pointer; so people can recognise it as a link, and then define the link action with Javascript:

// with MooTools
$('my_new_link').addEvent('click', function() {
	...
});

// with jQuery
$('#my_new_link').click(function() {
	...
});

Of course you could argue this is completely unnecessary, but it’s simply a way to hide links completely if that’s desired.