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, 572.722 hits)
Previous Versions of Easy Tabs
EasyTabs 1.1 (Infos here)
Easy Tabs 1.1 (7,0 KiB, 12.828 hits)
EasyTabs 1.0 (Infos here)
Easy Tabs 1.0 (1,2 KiB, 11.280 hits)
Joomla Plugin JooTabs by Ricardo Sousa und Andy Sikumbang
- jooTabs english
- jooTabs deutsch [German translation by Niko Winckel]
Dom schreibt:
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 schreibt:
and the rest of the code:
=menucount);
if (autochangemenu!=0){start_autochange();}
}
if (window.attachEvent) window.attachEvent(“onload”, easytabsexe);
Genç Haritacı schreibt:
thanks again 🙂 it s working well
Shalini schreibt:
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
Webdawson schreibt:
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 schreibt:
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 schreibt:
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.
Webdawson schreibt:
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 schreibt:
Hi,
I ask this because it dont work with the TAB Key for me :S
Regards,
Webdawson schreibt:
mh which browser are you using? its working for me with the tab key in the example files
Ricardo Sousa schreibt:
Hi,
Now the module is released and have more than 1.500 downloads in just some days… 😀 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 schreibt:
Good work!
DoomEyes schreibt:
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.
Webdawson schreibt:
Hm i think that’s possible – good idea for a next version.
Scott Seiter schreibt:
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 schreibt:
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
Webdawson schreibt:
no problem
Ricardo Sousa schreibt:
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 😉
yegor moroz schreibt:
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 schreibt:
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 schreibt:
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
Webdawson schreibt:
Hi Deepa, i’m sure that this is possible, i will try it the next days ok. Merry Christmas 🙂
Deepa schreibt:
Tahnk you so much..
Merry christmas to you and family
enjoy and be safe
yabber schreibt:
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…
Webdawson schreibt:
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/)
Michael Oeser schreibt:
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?
Webdawson schreibt:
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/
Michael Oeser schreibt:
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?
Webdawson schreibt:
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 🙂
Michael Oeser schreibt:
Dann versuch ich noch mal mein Glück…
guest schreibt:
subject mouseover -> tab moving stopeed
james schreibt:
Is there a way to stop all the tabs displaying when the page loads.
I have a page that takes 3-4 seconds to load and while it is loading all the tabs are displayed.
eugene schreibt:
Hi Webdawson,
Any idea i can passed some parameter over next page so it can display dedicated
tab page? If visitor click link something likes camps.asp?tab1 where tab1 is the name of the tab name/program.Itt will display automatically the tab1;something behave like the HTML Anchor.Any idea?
thanks
eugene
Yegor Moroz schreibt:
Can I have different autochange options inside one menu? for example, the tabcontentarea has 3 tabs. tabs 1 and 2 visibility rotate using autochange, tab 3 shows only on hover over the tab label.
james, use absolute positioning. you can check the way it’s done by me.
Webdawson schreibt:
Hi Yegor, sorry i don’t think that this is possible.
eugene schreibt:
So webdawson,
any idea pertaning on my anchor function?thanks~
Webdawson schreibt:
Hi eugene sorry for my late answer…busy at the moment…i think thats possible but it’s not includet at the moment.
Here is an example how you can get values from your url via javascript: http://files.polycoder.com/js/query/query3.html?name=max&alter=23&ort=dresden
Just right click and view source code..then you’ll see the javascript code.
Deepa schreibt:
Hi,
I was just wondering , if you have had any ideas for like long title (tabs)
http://timesofindia.indiatimes.com/ (latest news, Most read…etc etc tabs at the right)
Thank you,
Regards
iEn schreibt:
hai.. nice tabs. i did it. but it takes some times to loading my page lol
Peer Wandiger schreibt:
Hallo Jürgen,
tolles Script, welches ich in meinem Blog gleich mal eingebaut habe. Allerdings bleiben alle 3 Tabs untereinander offen, so lange die Seite lädt. Erst wenn die Seite komplett geladen ist, gehen auch die Reiter zu und nur der aktive (der erste) bleibt offen
Kann man diese nicht schon beim Laden schließen?
Webdawson schreibt:
Hi Peer, ich denke auf der folgenden Seite findest du was du brauchst:
http://dean.edwards.name/weblog/2005/09/busted/
Beispiel: http://dean.edwards.name/my/busted.html
LG jürgen
Donggang schreibt:
thank you ! I will see you again!
Sergio Gomez schreibt:
I just tried to use the Easy Tabs 1.2 but it is not working well.
I can see the tabs, but the autochange doesn’t work.
And when the tabs load it goes directly to tab 6 when on the js file I have set it to tab 1.
On the js files I also have the autochange set to 1.
Setting below:
//EASY TABS 1.2 – MENU SETTINGS
//Set the id names of your tablink (without a number at the end)
var tablink_idname = new Array(“tablink”)
//Set the id name of your tabcontentarea (without a number at the end)
var tabcontent_idname = new Array(“tabcontent”)
//Set the number of your tabs
var tabcount = new Array(“6”)
//Set the Tab wich should load at start (In this Example:Tab 1 visible on load)
var loadtabs = new Array(“1”)
//Set the Number of the Menu which should autochange (if you dont’t want to have a change menu set it to 0)
var autochangemenu = 1;
//the speed in seconds when the tabs should change
var changespeed = 4;
//should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes
var stoponhover = 1;
//END MENU SETTINGS
mommaroodles schreibt:
Hi thank you for the great script, I’ve implemented it on my oscommerce site and its working great. I created images to use as backgrounds for the tabs, and in IE is working great, but in FF I have a problem, I dont think I’ve have the images set right in the stylesheet. Any ideas on how I can fix this would be greatly appreciated, i’ve been searching for solutions, but have been unsuccessful so far.
thanks once again, much appreciated 🙂
Sunyata schreibt:
Is there a “transition fade, cross-fade” possibility?
Webdawson schreibt:
Hi Sunyata, no sorry – at the moment there is no transition fade available.
Zeal schreibt:
Hi!
How do i slow down the tabs on interchange intervals?
Zeal schreibt:
Thank you for this nice tab tools, kindly help me slow down the tab slide to maybe 15 seconds.
the ardianz schreibt:
thx brother,. keep workin’ ., i like it much !!!!!!! 🙂
lordmatrix schreibt:
what a great source, thank you! just a question about the tabs: there is any way to disable the hover behaviour and use onclick instead? i look forward to hearing from you, thanks again.
webdawson schreibt:
Hi lordmatrix, no problem just change the
onmouseover=”easytabs(‘1’, ‘1’); to
onclick=”easytabs(‘1’, ‘1’);
lordmatrix schreibt:
thank you very much.
insomniac schreibt:
hi,
i’m using your script on a website for some store’s (25 in franchise). i just love it. it grabs everything from a database, builds the customer page. works really great. thanks.
the only problem is that i can’t figure out how to center the all of the tabs and content on the screen. Can you give me a hint? thanks in advanced,
insomniac
hitman schreibt:
Hello, i added this feature my news portal. There is 4 tab by default, i added 5 more tabs.
For the code which i added my wordpress blog’s featured.php page, there: http://pastebin.ca/1058583
Everything is OK, but my extra tabs(which i added 5 more) don’t work.
You can check it there: http://www.nsohbet.com/
I’m waiting your reply impatiently.
Best regards and thanks;
Mehmet Tahta.
rycur schreibt:
I seem to have a conflict with mootools library… has anyone figured out how to fix it?
AutoTab works in FF both pc and mac, but none others with autoTab on.
Bafrali schreibt:
Hallo
Super ding. Es hat einwandfrei funktioniert. Ich hab kleine frage: Geht das auch mit draufklicken. So dass der fenster erst geöffnet wird wenn man draufklickt. Wie kann man das machen oder ist da neue program schreibung nötig.
Danke und nochmals danke schonmal fürs antwort.
Webdawson schreibt:
Hi Bafrali,
du musst nur bei den links folgendes ändern:
statt onfocus=”easytabs(‘1’, ‘1’);” onclick=”return false;”
schreib: onclick=”easytabs(‘1’, ‘1’);”
speed schreibt:
Hey this is a great script 🙂 Everything working fine here!
Except one problem :
This script stoped working after I included your easytabs.js file in my website : http://www.netzgesta.de/reflex/
Any Fix for this ?
Thanks again, keep it up… I’m still learning javascript so I don’t know how to fix it otherwise I would have never bothered you 🙂
jalmz schreibt:
“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?”
same problem…..
any solution Webdawson? i hope you can fix it..
ZippyT schreibt:
Is it possible to link to a specific tab from another page? It seems like this is possible, but I can’t seem to get the syntax right. Any help would be appreciated.
China_Y schreibt:
Tkank you ! Very Good ! I like !
éžå¸¸æ„Ÿè°¢ï¼
——-Form China
MO schreibt:
Hi, great module for joomla i like so much but i only have one problem i cant validate XHTML and it is very important to me i tried modify some reproted problems by w3.org but i can’t stil..! i am not a developer i try hard to find solutions my self.
Thanks for the great module and your time
Sandy schreibt:
i have copied the whole file in the HTML between
…
my quesiton is how can i make it work.
1. Where do i specify the content of the tabs.
2. how do i make the menu show up.
J Doss schreibt:
I can’t seem to get it to tab. What i mean is everything is there, but they are not layering themselves. It is at http://www.mobiletechmoment.com in the section called “MTM Video Reviews”
I would appreciate ANY help, thanks
J Doss
Xiao J schreibt:
it’s great
Nick schreibt:
how do i set a fixed width of a tab?
Zoran schreibt:
Great work. This is really great. Simple & Powerfull.
One question…
Is there any way to open specific tab wth link?
Let say that I have a link to the page where I have tabs. But I want when that link is clicked tab no2 to be open. Is that possible and how?
Regards, Zoran
Michiel schreibt:
He, nice script. But i’ve just one small bug.
http://www.studentencms.nl/index2.php
When you’ll visit the page ‘Ingredienten’, it won’t start with the default page = ‘1’
How come?
Thnx,
Michiel
pezzolane schreibt:
Great! I would definitely use it at some point!
Keep up the good work.
P.
sammy schreibt:
Thank U much! I have finally found it!
from china
Sebastian schreibt:
Hey,
i nutze das wirklich tolle script easytabs mit greybox, aber greybox hat probleme mit dem initieren des fenster. wie kann ich das umgehen, muss ich etwas bei easytabs ändern oder die initierung selber coden wie:
Name
vielen dank schon vorab
Anon schreibt:
Do you know how I can insert a loading gif instead of letting all the content boxes load as if JS is disabled? At the moment, all of the boxes load on top of each other then they align under the tabs, I would prefer a loading gif instead.
Thanks
Jasper schreibt:
Does anyone know why the content is layered on pageload, and when you mouse-over the first tab, it works fine:
http://www.klima-testtechniek.nl/test.php
Thanks in advance!
ebanwait schreibt:
This is the one of the best light tab script I ever found. Thank you !!!
Nov schreibt:
Matur nuwun alias Thanks..
Chris schreibt:
I have used this many times and love it. Quick and easy. Thank you so much. I have a question though, is it possible to put a few second delay on the tabs onMouseover. It just switches to easy with a rogue cursor.
Thank you again and keep up the good work.
Ross schreibt:
Hi, really great app. I would like to know, when using the .js file, how to have 3 tabs on one page and say 4 tabs on another page. The tab count is fixed : var tabcount = new Array(“3”) in the file.
Thanks in advance
Subir Ghosh schreibt:
I am currently using it on a test server. It is working fine except one problem.
The content of all the tabs are showing for about 5-10 seconds till such time that the page loads up fully. After the page had loaded, the display is fne.
How do I eliminate the possibility of showing the tab content while page is still loading?
Thanks Dawson.
Webdawson schreibt:
The tabs are loading on “onload” so the tabs are just showing up after the full page was loaded.
You could use jQuery and the $(document).ready(function(){}); to avoid this – like i do on my page.
Subir Ghosh schreibt:
Thanks 🙂 It worked like a breeze 😀