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

guest
verfasst am 20. Februar 2008 um 1:23

subject mouseover -> tab moving stopeed

james
verfasst am 21. Februar 2008 um 18:58

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
verfasst am 24. Februar 2008 um 14:50

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

verfasst am 4. März 2008 um 8:22

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.

verfasst am 4. März 2008 um 10:04

Hi Yegor, sorry i don't think that this is possible.

eugene
verfasst am 12. März 2008 um 13:54

So webdawson,
any idea pertaning on my anchor function?thanks~

verfasst am 12. März 2008 um 14:03

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
verfasst am 22. März 2008 um 11:34

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

verfasst am 23. März 2008 um 2:06

hai.. nice tabs. i did it. but it takes some times to loading my page lol

verfasst am 26. März 2008 um 17:20

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?

verfasst am 26. März 2008 um 17:26

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
verfasst am 2. April 2008 um 4:33

thank you ! I will see you again!

verfasst am 3. April 2008 um 21:00

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

verfasst am 27. April 2008 um 9:56

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

verfasst am 29. April 2008 um 23:20

Is there a "transition fade, cross-fade" possibility?

verfasst am 30. April 2008 um 8:47

Hi Sunyata, no sorry - at the moment there is no transition fade available.

verfasst am 23. Mai 2008 um 7:45

Hi!

How do i slow down the tabs on interchange intervals?

verfasst am 23. Mai 2008 um 7:47

Thank you for this nice tab tools, kindly help me slow down the tab slide to maybe 15 seconds.

the ardianz
verfasst am 30. Mai 2008 um 1:16

thx brother,. keep workin' ., i like it much !!!!!!! :)

lordmatrix
verfasst am 6. Juni 2008 um 21:31

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
verfasst am 6. Juni 2008 um 21:48

Hi lordmatrix, no problem just change the
onmouseover="easytabs('1', '1'); to
onclick="easytabs('1', '1');

lordmatrix
verfasst am 7. Juni 2008 um 9:14

thank you very much.

verfasst am 17. Juni 2008 um 16:40

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

verfasst am 30. Juni 2008 um 0:53

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.

verfasst am 8. Juli 2008 um 6:05

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.

verfasst am 16. Juli 2008 um 2:12

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.

verfasst am 16. Juli 2008 um 8:52

Hi Bafrali,
du musst nur bei den links folgendes ändern:

statt onfocus="easytabs('1', '1');" onclick="return false;"
schreib: onclick="easytabs('1', '1');"

speed
verfasst am 19. Juli 2008 um 1:33

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
verfasst am 26. Juli 2008 um 4:25

"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
verfasst am 30. Juli 2008 um 15:36

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.

Seite 2 von 5«12345»
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