A bookmarklet to hide the Drupal 7 administration toolbar

by Rob Cottingham | May 11, 2012 | Everything Else, Social Signal

The (barely-tested) bookmarklet: Drag this link to your browser’s bookmarks bar: Hide toolbar | Restore toolbar

I love the administration toolbar that comes with Drupal 7, the one that puts the admin menu within easy reach at all times. It’s one of the most convenient developments in my online life.

But there are times when it’s really inconvenient – like when you I want to show an unpublished page the way an ordinary mortal will see it when they visit. There’s a shortcut bar underneath it, which you can hide or show at will… but that toolbar stays there, come hell or high water, as long as you’re logged in.

Short of installing a module (which would be rude of me, if I’m not the guy actually developing the site), I’ve resorted to hiding the toolbar by manually editing the CSS properties in my browser. A little “display:none” here, a sprinkle of “padding-top:0px” there, and we’re in business.

But that gets old pretty quickly. How about handling it in one click? The JavaScript is actually pretty straightforward (this is on a site where the body‘s CSS “padding-top” value is zero throughout):

javascript:document.getElementById(“toolbar”).setAttribute(“style”, “display:none”);void(document.body.style.paddingTop=”0px”);

It works by hiding the contents of the toolbar, and resetting the body‘s padding-top value to zero.

I tested it successfully in Safari, Firefox and Chrome, but I ran it through John Gruber’s JavaScript bookmark builder to work its magic encoding on the spaces and punctuation just to be safe. It now looks like this:

javascript:document.getElementById(%22toolbar%22).setAttribute(%22style%22,%20%22display:none%22);void(document.body.style.paddingTop=%220px%22);

Of course, you might want the toolbar back again. So:

javascript:document.getElementById(“toolbar”).setAttribute(“style”, “display:block”);void(document.body.style.paddingTop=”65px”);

…and, encoded:

javascript:document.getElementById(%22toolbar%22).setAttribute(%22style%22,%20%22display:block%22);void(document.body.style.paddingTop=%2265px%22);

Limitations:

• It only disables the toolbar until you reload the page or navigate to another one.
• I haven’t tested it in anything except the Mac versions of Safari 5.1.5, Firefox 11 and Chrome 19.0.1084.46. Oh, and I’ve tested it on all of one Drupal site.
• It assumes the body‘s padding-top CSS value is zero pixels.

Let me know if it works for you – or if you’ve found a more useful/robust solution.

Bookmarklets: Hide toolbar | Restore toolbar (or, if you get easily frustrated, Die, toolbar, die! | Restore toolbar)