Remove / move the Google Chrome bottom left status bar (link address bar)

Question

I am working on a website which is designed with a key navigation element in the lower left corner. Within Google Chrome there is a status bar on the lower left which appears when you roll over a link on the page and displays the URL of the page. Though if you get close enough this moves to the lower right. This is getting in the way of this navigation element.

My question is can this be removed / moved (lower right) using CSS, HTML or JavaScript? Please see some notes below.

• Ideally I would like to move this to the right permanently.
• I am aware this is required / best practice for many reasons so I would like to avoid removing.
• I am aware I can remove the href from the link and use an onClick event, this might be a possible workaround but moving right would be a better solution in this instance.
• I am also sure there is a large debate to be had to about having this navigation element lower left anyway, but I am looking for a solution within the parameters I have to work with.

Thanks

Answer 1

Chrome reads the HREF attribute from your link to display the link in the status bar.

So if you remove the HREF from your A tags, the status bar will not be displayed. However the link won't work either, :). That's why you can create an event handler on MouseOver to address that and keep your links working.

$("body").on('mouseover', 'a', function (e) {
    var $link = $(this),
        href = $link.attr('href') || $link.data("href");

    $link.off('click.chrome');
    $link.on('click.chrome', function () {
        window.location.href = href;
    })
    .attr('data-href', href) //keeps track of the href value
    .css({ cursor: 'pointer' })
    .removeAttr('href'); // <- this is what stops Chrome to display status bar
});

You might run in extra issues, like disabled links or links that have other event handlers. In this case, you can tweak your selector to 'a:not(.disabled)' or perhaps just add this delegation to known elements with the css class ".disable-status", therefore your selector would be: "a.disable-status".

Answer 2

As you can see from this screenshot, it seems that Chrome moves the status bar outside the extent of the window when you roll-over a link that is on the edge (the "add comment" link in this instance).

So... I wouldn't worry about it. It's built in browser behaviour, so it's going to be very hard to alter. Once upon a time you could use javascript to modify the content of the status bar, but the browser vendors put a stop to this for all sorts of security reasons.

Don't be tempted down the onclick bodge. You will lose accessibility, and the html demons will haunt your every sleeping moment.

In fact, you could think of this all as desirable behaviour: your navigation and the status are right next to each other, making it very easy for the user to make the right navigation choice (assuming your URLs are user friendly).

tl/dr: Don't.