Is there a fast way to see a site without the drupal admin elements?

Question

Once in a while various Drupal elements can be a real pain:

• The context menu covers the search menu & prevents me from clicking into the text field
• A co-worker is worried that the user is seeing things like 'Available Updates' notifications
• View/Edit tabs and action links are present in screenshots

The easy answer is to log out and view the page again, but that's a pain when you just want to do a very quick thing.

What is a quick, easy way to jump in/out of Drupal?

Answer 1

I put together a simple javascriptlet that I can click on to show/hide most admin elements. It is kind of a static solution (I'll need to update it periodically as new admin elements appear that need to be hidden), but it's simple. Works with the Admin-Menu module too.

Just make a new bookmark and paste this into the 'url' field:

javascript:(function($){ if( $('html').data('drupal_clutter_hidden') ){ $('html').data('drupal_clutter_hidden', false); $('#block-search-form').css('z-index', ''); if( $('html').data('drupal_has_adv_toolbar') ){$('body').addClass( $('html').data('drupal_has_adv_toolbar') );$('#admin-menu').show();$('html').removeData('drupal_has_adv_toolbar');} else {$('body').css('padding-top', '64px'); $('#toolbar').show(); }$('.alpha-grid-toggle, .alpha-block-toggle,em.placeholder, #messages, .krumo-root, ul.tabs.primary, .region-inner > .tabs, .contextual-links-wrapper').show(); } else { $('html').data('drupal_clutter_hidden', true); $('#block-search-form').css('z-index', '100'); if( $('body').hasClass('admin-menu') ){var classes = $('body').hasClass('admin-menu-with-shortcuts') ? 'admin-menu admin-menu-with-shortcuts' : 'admin-menu';$('html').data('drupal_has_adv_toolbar', classes); $('body').removeClass( $('html').data('drupal_has_adv_toolbar') );$('#admin-menu').hide();} else {$('body').css('padding-top', '0'); $('#toolbar').hide(); }$('.alpha-grid-toggle, .alpha-block-toggle,em.placeholder, #messages, .krumo-root, ul.tabs.primary, .region-inner > .tabs, .contextual-links-wrapper').hide(); } }(jQuery));

Before:

After: