If I have say four subsequent gadgets, and I hide three of them and show only one at a time, it is like showing one page of four gadget pages. And a good UI component for selecting one of several pages is "tabs". So my idea of one hack turned into another: tabbed sidebar gadgets (I still might do the collapsing gadgets some day, too).
Some coding, and my javascript widget that tabifies other gadgets (gadget tabifying widget) was ready for testing. Look at this picture:
See how much vertical space is saved! A couple of these tabifying gadgets, and your new sidebar could be just a fraction of the old sidebar. You can see a working demo in my other blog, MS-potilas (blog is in Finnish). Later when I have time I will install these tabbed gadgets on this blog, too.
(Dec 4th 2011: installed on YABTB.)
The tabifier script
You have say 2–5 gadgets that you want to tabify (turn into "tabs"). Place a HTML/Javascript gadget just above them, and in the gadget put my code. You may give the gadget a title for housekeeping, by default the script hides it when run.
Script does not need jQuery library, which is often used in making user interface tabs. I wanted a clean and light, low level approach, and learn more, so I coded it just using CSS/html and javascript without any libraries.
Script configuration
There are some configurable variables in the beginning of the script. But first, if you use more than one set of tabs in your blog, for the second gadget, you must do a search and replace, and replace all instances of "tabnav0" by "tabnav1" (and "tabnav2" in third tab set, etc) in the script.
Configure the number of gadgets you want to tabify. By default the tab titles are taken from gadget titles, which are then hidden by the script. Short titles are preferred, so the tabs don't span on several lines, which does not look good, works though. If you want, you can specify the tab titles in the array tabnav#_tabtitles, so you don't have to shorten the titles of the actual gadgets.
You can also style the tabs using CSS. Every tabset has different IDs and so can have different styles. I've added some simple grey gradients to the tabs, which I made using my gradient png data URI maker, but the tabs look ok without gradients, too.
Nested tabs
My tabbed gadgets can be nested. But if nested, the gadget that contains another tab set must always be the last tab of the "upper" tabbed gadged. And also increase the two z-index values by one in CSS of the inner tabifier script(s), so they are rendered better. I suggest you to not use nested tabs, because the user interface might get confusing to the blog reader.
Another tabify gadgets implementation, using jQuery
I googled for other tabbed gadgets' implementations, and found one at Blogger Sentral: The easiest tabbed content widget for Blogger, demo here, which looks very good. It uses jQuery to draw the tabs and is quite different from mine. You might want to check out that one, too, and decide whether use that script or mine. There is also much other interesting stuff @ Blogger Sentral.
New info January 30th 2012: Gadgets with iframe and Internet Explorer 9
This hack hides "hidden tabs" (gadgets) using CSS display:none. In Internet Explorer 9 for some reason, if gadget has an iframe, it won't be shown. You can specify your blog to use Internet Explorer 8 document mode, if you have iframe-containing gadgets you want to tabify. I.e. in the <head> section, there should be line:
<meta content='IE=EmulateIE8' http-equiv='X-UA-Compatible'/>
Or don't tabify iframe containing gadgets. If you do, make sure you test it with Internet Explorer. This might be related to this feature, but my script is not altering the DOM, only visibility, so I'm not sure. If you have some clue why it does not show in IE9 document mode, please let me know.
A small visual update, May 6th 2013:: Fade in effect for tabs, see the hack.
Post Comments (Atom)
Click on a single comment to hide/show its text
32 comments:
That's just PERFECT!!
see @ http://reggaetubewatcher.blogspot.com
THANKS!!
@Pastaarj Thanks :) You have a great reggae music blog. One cosmetic suggestion about the tabs: If you want more space between tabs and the gadget contents, change this line (#138):
elm.style.marginBottom="-24px";
to this, for example:
elm.style.marginBottom="-20px";
which gives 4 pixels space.
Hi,
Where in the template should I paste this code?
@Sandy Hi, you don't have to edit the template with this hack. Place a HTML/Javascript gadget on the page just before the gadgets you wish to "tabify", and put the code in that gadget.
@MS-potilas
Oh! That's really easy thanks ^_^. I'll give it a shot and get back to you.
Nice blog you have there, I was wondering how you did that scrolling thing on the RTW@Pastaarj
@Jose Ponce
Maybe you mean this expand/collapse hack sidebar gadgets hack?
Hello!
This is really awesome. Thanks a lot for these great tips & tutorials.
I have 3 questions:
- How is it possible to change the font name/type/size of the tab text?
- How is it possible to change the top border line (shorten it and change the colour)?
- How is it possible to change the background colour of the tabs (I'considering making them appear a little darker although I could decide not to).
Thanks a lot anyway! This is a very good hack, I just would like to make it look a little bit better on my blog.
I really wish your health condition improves.
Best regards,
@Berliniquais
Hi, and thanks :) You can do all that stuff, it is all just CSS. I can't go much into details here, hope you know the basics :)
Font you can change in "#tabnav0 a" using for example property font-family or font.
Line under tabs is defined in #tabnav0h in properties background, margin-right and border-right, widths are in margin-right and border-right.
Background color is defined in "#tabnav0 a" and "#tabnav0 .here a:link, #tabnav0 .here a:visited" in property "background" using data url (data:image/png;base64,...) which makes the gradient, you can drop the data url and use just a solid color. Or make your own gradient.
@MS-potilas
Thank you! I'm exploring your blog for more awesome hacks :-)
A good day to you
MSP, it's great how easy this is to install, thank you.
Is there a way to cause a tab (and gadget) other than the first one to be active on initial load?
In my case I'd like to make the third of three gadgets (and tabs) be active as the default, with the same functionality to activate the others by clicking on the tabs of course.
@Adam
Hi, yes it is quite easy to open some other tab than first. Line 179 is now:
tabnav0_avaa(tabnav0_tabids[0]);
To make the second tab open by default, change line to:
tabnav0_avaa(tabnav0_tabids[1]);
or third tab:
tabnav0_avaa(tabnav0_tabids[2]);
etc. :)
@MS-potilas Thanks! Will have to get more javascript literate one of these days.
Great widget! Although it has cost me some time to get it working for me, I am not that well versed in XHTML/CSS :-)
rainbowtux.blogspot.com
Thanks a lot! This gadget is super! It's simply the best :)))) I have recensed your tut on my blog of resources for baby blog with link to your post, of course!! :)
I'm looking for a script to post an archive with images, I found a tube yahoo but only takes 25 images, you have any suggestions? Come and see me, I'd love to, thank you very much!
Ximi
@Blogghidee - Ximi - Hi, thank you for the review :)
I think it is best to make own script to display the Yahoo pipe contents, like I did here.
any tips for getting it to work with IE 10?
@Thomas Marcum
Forget that...the update from MS fixed IE 10 - works fine.
@Thomas Marcum
That's good news, thanks. :)
You're amazing! I wish I could learn coding from you!
I can't get this to work for me?? idk what I could be doing wrong. It's even showing up with the title showing and you said it should be hidden automatically. It seems like the only thing that's happening is adding the word "tabs gadget" above the things that I want tabs of.. I'm not very technically inclined(if you can't tell) Lol :)
@Shelly
Hi, sounds like the javascript code is not executing. Use the "Download raw" link to get the code, and copy paste it again to the gadget. Gadget must be html/javascript type. Hope you get it working. :)
thats just perfect! thanks a lot~ your tutorial was great! ;)
thank you! after 2 days searching for something simple i found your post. excellent!
Thank You so much for this wonderful script....it fitted seamlessly into our site design.
Thanks so much from Frankly Virtual team.
See your code at work on our site:
http://www.franklyvirtual.com
Wow great script, I like it verymuch. Thanks for sharing.
Thank you. Trying it out on my blog: http://tangentsphere.blogspot.com/
Only the first gadget of my group shows up in Chrome for Android. Anyway to make this mobile friendly?
@Roger H. Charles
Hi,
there should not be anything that breaks the code in mobile browsers. I don't have Chrome installed on my Android but I tested this blog and its tabs using Samsung's mobile internet browser, and the tabs worked fine.
Do the tabs display OK when you open yabtb.blogspot.com in mobile Chrome? If so, then you probably have some error in the scripts, maybe some tabnav0* variable name not changed (see Script configuration).
If yabtb's tabs don't display OK, then I think it may be a bug in mobile Chrome.
So sorry for not replying right away. I was waiting for an email, but perhaps I forgot to check the box.
Your code works fine in the desktop ui of mobile Chrome, but not in the mobile ui--which is all vertical scroll. As said, only first gadget shows up there for me. None of yours do.
Maybe not a whole lot you can do about it. And not a critical error anyway. But the push is on for mobile friendly.
Thanks for your time, and I'm very pleased with your script.
@MS-potilas
@Roger H. Charles
Hi,
thanks for clarifying. I'm not at all familiar with the mobile template, how it is constructed, and how much it can be modified. When I use the mobile template to view my blog I don't see any of the sidebar widgets, only the top menu, and posts scrolling vertically.
See the hack to make the 'Post a Comment' link bigger.
Post a Comment