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 appear

Answer 1

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.

Answer 2

as it seems this little status with link is poped up on with href. you can create the element without the href attribute and instead use the onclick event to direct the user.

just on thing, I think you'll lack the visited functionallity.

Answer 3

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".