Pages

Thursday, December 1, 2011

32

Gadget tabifying widget for Blogger

Sidebar gadgets may be an important part of your blog. There are literally hundreds of different gadgets you could have in your blog. But the size is kind of limited, if you have too many, users might not scroll pages after pages to see what gadgets there are. I have had one hack in mind, that would collapse/expand single gadgets, when user clicks on the gadget title, to save space so user finds the gadgets easier. I started playing around with this idea, hiding and showing the gadget divs... And then I realized...

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.

Data provided by Pastebin.com - Download Raw

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.


[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

32 comments:

Alex said... [reply]
This comment has been removed by the author.
Pastaarj said... [reply]

That's just PERFECT!!
see @ http://reggaetubewatcher.blogspot.com
THANKS!!

MS-potilas said... [reply]

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

Sandy said... [reply]

Hi,

Where in the template should I paste this code?

MS-potilas said... [reply]

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

Sandy said... [reply]

@MS-potilas

Oh! That's really easy thanks ^_^. I'll give it a shot and get back to you.

Jose Ponce said... [reply]

Nice blog you have there, I was wondering how you did that scrolling thing on the RTW@Pastaarj

Berliniquais said... [reply]

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,

MS-potilas said... [reply]

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

Berliniquais said... [reply]

@MS-potilas

Thank you! I'm exploring your blog for more awesome hacks :-)

A good day to you

Adam said... [reply]

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.

MS-potilas said... [reply]

@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. :)

Adam said... [reply]

@MS-potilas Thanks! Will have to get more javascript literate one of these days.

Erwin Van de Velde said... [reply]

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

Blogghidee - Ximi - said... [reply]

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

MS-potilas said... [reply]

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

Thomas Marcum said... [reply]

any tips for getting it to work with IE 10?

Thomas Marcum said... [reply]

@Thomas Marcum

Forget that...the update from MS fixed IE 10 - works fine.

Oyon said... [reply]

You're amazing! I wish I could learn coding from you!

Shelly said... [reply]

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 :)

MS-potilas said... [reply]

@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. :)

Lolly Lilly said... [reply]

thats just perfect! thanks a lot~ your tutorial was great! ;)

Cris BrasilEgito said... [reply]

thank you! after 2 days searching for something simple i found your post. excellent!

Spandan Sarkar said... [reply]

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

Invest Alt said... [reply]

Wow great script, I like it verymuch. Thanks for sharing.

Roger H. Charles said... [reply]

Thank you. Trying it out on my blog: http://tangentsphere.blogspot.com/

Roger H. Charles said... [reply]

Only the first gadget of my group shows up in Chrome for Android. Anyway to make this mobile friendly?

MS-potilas said... [reply]

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

Roger H. Charles said... [reply]

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

MS-potilas said... [reply]

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

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: