Easy Tabs 1.2 – now with autochange

A new Version of the free EasyTabs Script is available. You can now set a autochange modus to one of your menus. Accessible compact and compatible with all browsers as always.

Examples

Here are three basic examples:

Basic Infos and Features

  • Free for private and commercial projects
  • successfully tested in IE5.0, IE5.5, IE6, IE7, Firefox 2, Opera 9.2
  • if Javascript is disabled - all contentboxes are visible
  • you can navigate between the tabs with the keyboard TAB Key
  • you can easy define which Tab shoud be active @ start
  • you can easy add as much tabmenus as you want on one site
  • If you want that the tabs are changing on click and not on mouseover -> then just change the onmouseover to onclick
  • Of course you can set a link to each Menu Tab - just set the linkurl in the href and delete the onclick="return false"
  • In the Examples i've packed everything (Html, CSS, Javascript) in 1 File - but you can also put the css in an external css file and the javascript in an external javascript file. I've included one clean example in the Download Zip File below.

Code Explanation

There are 3 new Settings you can set in the javascript

//Set the number of your menu which should autochange
var autochangemenu = 1;
//Set the speed in seconds when tabs should change
var changespeed = 3;
//should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes
var stoponhover = 0;

I hope this Tab Menu is useful for you, if you have questions or improvements please post a comment, thank you.

Download EasyTabs 1.2 Example Package

  Easy Tabs 1.2 (9,9 KiB, 177.667 hits)

Previous Versions of Easy Tabs

EasyTabs 1.1 (Infos here)

  Easy Tabs 1.1 (7,0 KiB, 7.958 hits)

EasyTabs 1.0 (Infos here)

  Easy Tabs 1.0 (1,2 KiB, 6.745 hits)

Joomla Plugin JooTabs by Ricardo Sousa und Andy Sikumbang


 

159 Kommentare »

20 Trackbacks

University Update - Firefox - Easy Tabs 1.2 - now with autochange Cloud of May » Blog Archive » Easy Tabs 1.2——简单、轻量级的滑动菜单效果 Mostrando conteudo em abas >> Clubepc 37+ Great Ajax, CSS Tab-Based Interfaces 37个Ajaxå’ŒCSS实现的Tab选项卡切换效果界面 | å¸•å…°æ˜ åƒ Great Ajax Tab-Based Interfaces … | Media attribute - what have you done for me lately? Easy Tabs 1.2 - now with autochange | Kollermedia.at Download Tabmenu for free | Kollermedia.at Easy Tabs 1.1 - free Tab Menu | Kollermedia.at jooTabs - joomla tab solution | Kollermedia.at OHZE.NET » Great Ajax, CSS Tab-Based Interfaces 37个Ajaxå’ŒCSS实现的Tab选项卡切换效果界面 | CodeLog 站在巨人的肩膀上 » 37个Ajaxå’ŒCSS实现的Tab选项卡切换效果界面 28 AJAX Scripts for Designers | Vietnamese Webmaster 28 AJAX Scripts for Designers | Cổng thông tin hty.net 37个Ajaxå’ŒCSS实现的Tab选项卡切换效果界面 | Primus 南开飞扬 » 存档 » 若干个Ajaxå’ŒCSSæ‰“é€ çš„Tab links for 2008-09-21 | 甘先生blog 我是UI » 37个Ajaxå’ŒCSS实现的Tab选项卡切换效果界面
Dom
verfasst am 23. August 2007 um 11:06

Hi, nice solution, just one little prob i came accross - i tried to add the javascript ot a ,js file i have and in IE7 and FF2 it won't load the default tab despite setting the tab id correctly.

In the example files you give it worked fine... so thought it might be the onload function, but not knowing javascript, I have had trouble - what I came up with was this, but it works in IE but not in FF ?? any ideas what I need to alter / include to get this to work with other onload functions I already have ?

easytabsexe = function() {
var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b

Dom
verfasst am 23. August 2007 um 11:08

and the rest of the code:

=menucount);
if (autochangemenu!=0){start_autochange();}
}

if (window.attachEvent) window.attachEvent("onload", easytabsexe);

verfasst am 31. August 2007 um 1:11

thanks again :) it s working well

Shalini
verfasst am 7. September 2007 um 5:47

Hi,

I implement the code and whew..its working great..

I just wanted to refresh it as tabs flipped. My tab contents contains data from database, i want data to be fetched from table everytime tab is flipped.

How can this be done?

Thanks
Shalini

verfasst am 7. September 2007 um 8:40

Hi, mh thats not that easy and not implemented in this script yet - you need an ajax request/response for this. Maybe i add this in the next version (as soon i have time).

Shalini
verfasst am 10. September 2007 um 8:03

hmm..ok

One more thing..How can we make scrollable tabs. With this script if we have say 10-12 tabs, it gets wrap to 2nd line. instead of that can we use left right arrow to scroll tab panels?

Ricardo Sousa
verfasst am 19. September 2007 um 19:28

hI,
First off all congratulations for the great work…
I am considering to make a joomla! module with this script…
Can you please tell me if this keyboard navigation is just with the tab key or we can use other?

Regards.

verfasst am 19. September 2007 um 20:27

It's just for the tab key - but a other solution is to set a acceskey for each link - for example accesskey="a" then you can activate a tab with the acceskey combination.

Ricardo Sousa
verfasst am 22. September 2007 um 18:45

Hi,

I ask this because it dont work with the TAB Key for me :S

Regards,

verfasst am 27. September 2007 um 9:02

mh which browser are you using? its working for me with the tab key in the example files

verfasst am 1. Oktober 2007 um 23:36

Hi,

Now the module is released and have more than 1.500 downloads in just some days... :D you can find it at: http://www.templateplazza.com and is named "JooTabs"!

Thank you for the great source...

The problem with the tab key still in Opera Browser this dont work

Regardsm

hecini
verfasst am 4. Oktober 2007 um 20:58

Good work!

DoomEyes
verfasst am 8. Oktober 2007 um 18:00

Is there a way to modify this script so that when the user hovers over the tab, there is a slight delay before the content shows up? A good example of this is on the ibm.com or hp.com site. Thank you.

verfasst am 8. Oktober 2007 um 18:26

Hm i think that's possible - good idea for a next version.

Scott Seiter
verfasst am 20. Oktober 2007 um 1:55

Can I make it so that the content does not flicker on the page? it will show all 4 boxes the instant the page loads and it pushes my content down for that moment. Is there a way to hide this so that the user will never know that there is something more there than what they see?

Alex
verfasst am 27. Oktober 2007 um 17:29

Y can remove the next lines to reduced script?
"Need Help? http:/www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange
You can use this Script for private and commercial Projects, but just leave the two credit lines, thank you."
I don't remove the credits, only these lines.

Thanks

verfasst am 27. Oktober 2007 um 23:45

no problem

verfasst am 4. November 2007 um 18:48

Webdawson,

With Jootabs (our adaptation of your great code) when page is loading it shows the content of the tabs not in tabs (one after other) and after it appear in tabs...

Any solution to beat this?

Regards ;)

verfasst am 19. Dezember 2007 um 20:09

Regarding Ricardo Sousa and others comments. I had the same problem with default values.
It's quite easy to avoid showing the content of tabs before js stacks them in tabs by using CSS rules for tabcontainers classes
position:absolute;
top:0px;
left:0px;
and stating width and height
this will make them overlap, and only the first one will be shown while pageload
I think this should be included into default CSS file, but absolute positioning can be buggy in older browsers, so test before implement!

Deepa
verfasst am 20. Dezember 2007 um 7:05

Hi,
This was a long-time requirement for my blog and i would love to use this
I wanted some help in one matter

when the title of the tab is looong, is it possible to give it a word-wrap kind of action
... so that if my sidebar can hold 4 tabs, but due to the length of tilte, the tabs gets placed in 2 lines... gives a wierd look

i tried givng br tags between the title ( eg:- for the title Internet Intrests, ) but it messed up the look

Thank you so much for this script - code -and instruction,
Deepa

Deepa
verfasst am 21. Dezember 2007 um 3:56

Here is a good example how i would like long title (tabs)
http://timesofindia.indiatimes.com/ (latest news, Most read...etc etc tabs at the right)
thank you
Deepa

verfasst am 21. Dezember 2007 um 10:34

Hi Deepa, i'm sure that this is possible, i will try it the next days ok. Merry Christmas :)

Deepa
verfasst am 21. Dezember 2007 um 15:52

Tahnk you so much..
Merry christmas to you and family
enjoy and be safe

yabber
verfasst am 21. Januar 2008 um 2:21

the tabmenu gadget is really nice!!!!!!!!

but how do you do the thing at the top with the top news thing that falles down when you click it? srry if i missed something redundant...

verfasst am 21. Januar 2008 um 9:55

Hi yabber, the top news slide effect is done with mootools (http://mootools.net/) but for these things i would recommend the jQuery library (http://jquery.com/)

verfasst am 4. Februar 2008 um 18:46

Hi,

Super Sache und sehr einfach zu verwenden, auch wenn man im Grunde keinen Schimmer von Javascript hat, wie ich ;-)

Ich möchte die Tabs in der Weiterentwicklung meines WordPress Themes BranfordMagazine und auch für weitere Themes einsetzen (natürlich mit Hiweis auf Dich als Autor des Scripts)

Ich würde gerne zusätzlich einen Fade-Effekt (oder andere Effekte z.B. mit Scriptacolous) auf die Tabs anwenden. Kannst Du mir beschreiben, wie man das macht?

verfasst am 4. Februar 2008 um 19:03

Hi, also ich könnt dir da die jQuery Tabs empfehlen, die sind wirklich gut und auch mit diversen effekten möglich: http://stilbuero.de/jquery/tabs_3/

verfasst am 4. Februar 2008 um 19:47

Servus, die hatte ich auch schon versucht. Bekomme sie aber einfach nicht zum laufen. Lokal geht´s gut, aber wenn ich es online versuche klappt´s nicht. Und ich hab schon Stunden damit zugebracht, herauszufinden, woran es liegt :-(

Keine Chance, sowas mit Easytabs zu realisieren?

verfasst am 4. Februar 2008 um 21:03

Naja nicht wirklich, zumindest hab ichs selbst noch nicht versucht das zu kombinieren. Fehlt mir leider die Zeit dazu im Moment. Aber wenns Lokal klappt kann ja eigentlich nicht viel sein damits online auch funktioniert :)

verfasst am 4. Februar 2008 um 21:19

Dann versuch ich noch mal mein Glück...

Seite 1 von 512345»
Kommentar schreiben

(erforderlich)

(required but will not be published)

(if you have one)

Bild einfügen:<img src="http://www.website.com/meinbild.jpg" alt="bildbeschreibung" />


 
Produced and © by Koller Jürgen | Powered by the awesome WP | Love and Joy to everyone