Tip: Hide tabs with javascript for more accurate preview

Posted by Andreas Radloff on June 23, 2009 at 8:07pm

Sometimes I get annoyed by having to log out to see what the page looks like without the editing-tabs (like when doing pixel-precise positioning). I just wanted to share this bit of code for adding a link for removing the tabs with a click while developing your theme. I'm working with Zen sub-theme and it requires jquery javascript library to be included.

Just add this
<a href="#" onclick="$('div.tabs').hide()" style="float:right; margin-top:-15px;"><?php print t('Hide'); ?></a>

in page.tpl.php like so:

<?php if ($tabs): ?>
              <div class="tabs"><?php print $tabs; ?><a href="#" onclick="$('div.tabs').hide()" style="float:right; margin-top:-15px;"><?php print t('Hide'); ?></a></div>
<?php endif; ?>

Enjoy!

Comments

Nice, it's simple yet

Posted by marcvangend on June 23, 2009 at 8:18pm

Nice, it's simple yet effective. Maybe you can create a feature request in the Zen issue queue right here: http://drupal.org/project/issues/zen.

For anyone who's interested, there is another method to do something similar: the admin_menu module (a must have for every site if you ask me) offers the option to move local tasks (tabs) to the menu bar.

Why haven't I found this before?

Posted by Andreas Radloff on June 23, 2009 at 10:44pm

Thanks for the tip, what a great module!

Frilansande Drupalutvecklare | Freelance Drupal Developer in Sweden