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

zip  Easy Tabs 1.2 (9,9 KiB, 569.426 hits)

Previous Versions of Easy Tabs

EasyTabs 1.1 (Infos here)

zip  Easy Tabs 1.1 (7,0 KiB, 10.649 hits)

EasyTabs 1.0 (Infos here)

zip  Easy Tabs 1.0 (1,2 KiB, 9.336 hits)

Joomla Plugin JooTabs by Ricardo Sousa und Andy Sikumbang


178 Kommentare

  1. Jared Ritchey 30. Juni 2009 um 5:45

    Beautiful work man, I use this tab tool on one of my clients real estate search pages and they are extremely happy with it. Excellent work.

    Jared Ritchey

  2. John Stevens 2. Juli 2009 um 12:50

    [qoute]

    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.

    [/qoute]

    Could you please give an example (it doesn't work for me yet.

    here's what I have:

    window.onload=function(){
    var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount);
    if (autochangemenu!=0){start_autochange();}
    }

    thanks in advance!

  3. Webdawson 2. Juli 2009 um 15:05

    Hi John,
    forget the window.onload=function

    include the jquery library and use:

    $(document).ready(function(){
    var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount);
    if (autochangemenu!=0){start_autochange();}
    });

  4. John Stevens 2. Juli 2009 um 16:26

    Thanks!

    It works like a charm!

  5. Subir Ghosh 24. Juli 2009 um 15:39

    Is it possible to use multiple instances of the script on the same page?

  6. Subir Ghosh 24. Juli 2009 um 15:59

    sorry. my mistake. i noticed the examples later. apologies.

  7. Dwight Scoles 29. September 2009 um 4:39

    Very Very nice... most auto tabs fail in IE6 which must work for us.

  8. Matthew 29. September 2009 um 21:44

    I would like to have 2 rotating menus.
    Thanks!
    Matt

  9. Rendra 30. September 2009 um 8:50

    Hoooiii,,,, gud ... thanks

  10. sakalli 5. Oktober 2009 um 21:22

    hi, thanks for this! i changed the onmouseover to onclick, i.e.:
    bla bla

    otherwise works ok but everytime i click on a tab the page jumps up to top position. any clues how to fix this?

    cheers!

  11. sakalli 5. Oktober 2009 um 21:27

    sorry the bla bla vas supposed to be a sample of the code. ill try once more without the tags:

    onmouseover="return false;" onfocus="return false;" onclick="easytabs('2', '1');" title="" id="tablink2_1"

  12. Webdawson 5. Oktober 2009 um 21:56

    Hi Sakalli,
    just write: onclick="easytabs('2', '1'); return false;"

    Thats it.

  13. sakalli 6. Oktober 2009 um 17:05

    cheers!

  14. Dan 21. Oktober 2009 um 11:15

    Hey,
    How can I link to a specific tabcontent from another page?
    e.g a href=newpage.html#tabcontent2 to display content from the 2nd tab.

    I have tried using the tags #tablink2 and #tabcontent2 - tablink does select the correct tab 'link' but still doesn't seem to click it to show the content..

    i'd like to be able to link directly to specific tabs from another page if possible, so once clicked it will load that page and the tab content i specified in the url string, how can I do this?

    I checked all comments and documentation and i'm scratching my head =p

  15. Ajax scripts 22. Oktober 2009 um 12:04

    Hello,

    Very nice work. I hope you don't mind - I have added your script to my free scripts directory: http://freeajaxscripts.net/directory/Ajax_tabs/Easy_Tabs_1.2/details.html

  16. Phaneendra 28. Oktober 2009 um 14:14

    Hello,

    nice work....! but if possible place images at tabs so that it can add life to it

  17. securitywonks 23. November 2009 um 12:34

    thank you for the nice script. I observed one little issue, i.e. page moving to the top, when a tab is clicked (onclick mode) or mouseovered (onmouseover mode).

    this is troubling when we place the tabed content in the middle or bottom of the page. thank you.

    overall, this is nice work, I hope you will fix this, thank you

  18. securitywonks 23. November 2009 um 12:45

    I somehow missed the solution in the above, sorry for the duplicate question, thank you for the fix up :)

  19. securitywonks 23. November 2009 um 13:08

    when we use onclick mode, how it will be to automatically initiate STOP autochange until a page reload or until the user clicks on restart (if stopped) link kind of, just some thoughts, thank you

  20. securitywonks 23. November 2009 um 13:27

    enabling var stoponhover = 1; in settings when using onclick mode helps to have autochange disabled in that event either until page is refreshed or restart (if stopped) link is clicked upon.

    coming to the [Stop the Change] and [Restart (if stopped)] links, when they are clicked, again the browser moves to the top. The solution is simple again, just replace "onmousedown" with "onclick", it just works :)

    thank you for the nice script :)

  21. lutvia 13. Dezember 2009 um 8:20

    that's all was amazing .. but can I load tabs content to external file ?
    thanks for share dude

  22. Sandro 14. Dezember 2009 um 16:13

    Hello, is it possibile to return (after X seconds) to the active tag chosen with JS even if the user try to navigate through the tabs?

  23. kikko 16. Dezember 2009 um 19:16

    Hi,

    How do I install this on wordpress?

    Thanks!

  24. Gioithieugame 26. Dezember 2009 um 22:59

    Hello,

    Very nice work. It's very helpful for me. I have installed on my wordpress site: http://gioithieugame.com/

    But your script does not work on Opera, could you please fix it?

    Thanks,

  25. elp 1. Januar 2010 um 1:45

    why there's some space between first tab with the second tab when i change the border of the tab with other color than the background?

  26. Edduard 4. Januar 2010 um 6:11

    it doesnt work inside a table!
    wen charge it look disabled
    how to fix that ?

  27. elp 4. Januar 2010 um 12:18

    @Edduard
    it's works 4 me. i added a table outside the tabs and also inside the tabs body ( content ). but there some bug when i view it in IE, but it runs normal in FF or opera. there a space between the tabs with the tab's body. then, after a change it with table, the space's is gone. i don't know if something's wierd with those css, but what i can make sure is, that i lack knowledge about how css runs in IE.

  28. Alidad 3. Februar 2010 um 23:45

    Hi, this tabs are great code, and i'm using this for my site, on question, where do i can change color font on the each tabs! I'm trying to find out where to change color font from default light gray on the tabs to other color, i could not figure out where to change that.

    please let me know thanks.

    AM

  29. pakaian bayi 10. Februar 2010 um 3:56

    awesome .... nice share ... thanks dudee

  30. ojotour 11. Februar 2010 um 16:06

    Very easy example and work in IE, Opera and Firefox
    Nice!

  31. koii 22. Februar 2010 um 7:15

    hello, I have some problem, why the tab content are show all in IE but in FF is OK.
    how can i fix its!! thanks

  32. Jeff 8. März 2010 um 21:37

    For use on a Sharepoint page (as in a Web Part or in an ItemStyle XSL template) the OnLoad statement will interfere with other page content scripts. Instead, change the OnLoad into a function and push the name to Sharepoint.

    E.g. change this

    window.onload=function(){
    var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount); if (autochangemenu!=0){start_autochange();}}

    to

    function startEasyTabs(){
    var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount); if (autochangemenu!=0){start_autochange();}
    }
    _spBodyOnLoadFunctionNames.push('startEasyTabs');

    Cheers!

  33. name 4. Mai 2010 um 12:18

    Give somebody the to a site about the,

  34. name 4. Mai 2010 um 20:04

    Best,

  35. name 4. Mai 2010 um 22:25

    really great sites, thank you,

  36. Peter G. 10. Mai 2010 um 14:22

    Valuable news and excellent sketch you got here! I would like to thank you against sharing your thoughts and occasion into the poppycock you collection!! Thumbs up

  37. Flory 1. Juni 2010 um 19:30

    Hello,

    I set 2 tabmenu, one for the featured post (this works fine) and one to display Website info in home page and in single post (this doesn't work).

    If I view it in home page it works fine, but if I view it in a single post it doesn't hide all the tabs except the clicked one.

    Is this a bug?
    Please help me.
    Thank you.

  38. Belle 5. Juni 2010 um 5:47

    Hi,
    Great work thanks for sharing! Any chance you'd share the script for the Tab Menu you have in this page which includes the Print, Email and PDF version options?
    Thanks again!!

  39. Jenell 8. Juni 2010 um 20:08

    Hi- Great script..

    I have it loaded and it works However content from all tabs appear when the page is first loaded. When I mouse over any tab - then the content from just that tab appears.... but on initial page load all content from all tans appears on one page.

    This site isnt live yet so I cant provide an example url- but hoping you have an idea based on my description ?? please help

    and thanks so much

    Jenell

  40. Flory 9. Juni 2010 um 7:44

    @ Jonell:
    I have your same problem.
    I solved simply using another script: jQuery UI.

    Now with just one line I can make tabs with a lot of visual effects (rotate, slide, etc.).
    Furthermore, jQuery is compatible with all existing browsers.

    http://jqueryui.com/demos/tabs/

  41. Ryann 17. Juni 2010 um 5:13

    Is it possible to dynamically set var loadtabs? I'd like a different tab to be default depending on which page is loaded. I believe I may be able to read a session variable in javascript by writing it to a hidden text box. Any help on how to do this would be appreciated. Thanks in advance.

  42. Mathias 5. Juli 2010 um 20:48

    How does it come that, when i open my website that the comment
    boxes of the differtent tabs are underneed each other...

    I you open the site i want that only the comment box of tab1 is viseble.

    How should i do that ?

  43. Jürgen Koller 6. Juli 2010 um 21:32

    Do you have a link for me Mathias?

    @Ryann - You can do this with php: if ($page =="news") {echo "1";} else if ($page=="archiv") {echo "2";}
    just echo the value in the line: var loadtabs = new Array("")

  44. Hector 14. Juli 2010 um 21:54

    Hello,
    I'm also having problems with the tabs showing up one below the other. It seems to start working once I hover on any of the tab headings. I'm using ItemStyle XSL template on my site so I believe this is why it's not working properly. I tried previous solutions but nothing seems to work.

    Here's a link to one of my site's products:

    http://www.carrodelectronica.com/store/index.php?_a=viewProd&productId=14037

    Thanks!

  45. Hector 15. Juli 2010 um 0:13

    Never mind... figure it out. I found an article that outlines how to add jQuery library when using Cubecart V4 shopping cart. Thanks!

    http://benfrain.com/notepad/2010/01/adding-jquery-and-jquery-lightbox-to-cubecart-4.html

  46. Krach 30. Juli 2010 um 16:20

    unpack the zip archive does not work. can you repair it?

  47. Jerry V 18. August 2010 um 16:07

    Can not down you Easy Tabs 1.2 version get an error

    Can you email it to me or provide another link?

    Thanks

  48. Gary Szeto 18. November 2010 um 11:45

    Easy tab 1.2 zip file is empty.

  49. Carlos 25. Dezember 2010 um 11:36

    This worked perfectly for me. I run a joomla website and some times adding more functions or another jquery file can lead to conflicts. This is old school but it worked like a charm. Thank You!!!

  50. Keith Templeman 12. Januar 2011 um 11:32

    Hi - this is not actually my site but I am trying to help the owner with a persistent problem. When a page loads the menu is expanded until I mouse over a menu/tab item, when it contracts. How can I get this behaviour to stop or at least correct itself automatically?

  51. Sky Woo 30. Januar 2011 um 5:36

    The file i downloaded is useless......

  52. Thái Nguyên 26. Juni 2011 um 11:47

    Thanks a lot .
    what a pity !

  53. Thái Nguyên 26. Juni 2011 um 11:50

    Sorry i have a little mistake .
    It is a very great thing, instead of "what a pity !"

  54. Parth 4. September 2011 um 20:27

    thank you for wonderful script

  55. Halil 12. Oktober 2011 um 15:49

    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.

  56. chok 19. Dezember 2011 um 22:47

    What an amazing script, simple, easy to read, and without using "replace" that eay is not allow.
    Thank you very much!!!

  57. paolo 14. Januar 2012 um 12:08

    thanks for that one, it save my day :D

  58. ????? 16. Januar 2012 um 9:53

    thanks,so cool

  59. hopea 16. Februar 2012 um 17:33

    Thanks for your nice work. Now, the content is displayed when I move the mouse on a tab. What should I do if I want to read the content by clicking a tab rather than moving the mouse on a tab? Thanks.

  60. Paolo 29. Februar 2012 um 9:57

    It's ok, it easy to use, thanks

  61. Ramona 16. März 2012 um 0:01

    Hi there, great script, thanks for providing it. I would like to use the one tabmenu for a project. Wondering how I could make one menu, but two (or more, possibly) rows in the menu. Again, don't need a separate menu, because I want the content for all the tabs to display in the same place. However, it's going to be a menu with about 10 items in it, and there won't be enough room on most screens for it to be entirely within one horizontal line.

    Or, do I just keep adding items, and perhaps they'll wrap? Is that supposed to be the strategy here? Thanks for any feedback!

  62. Ramona 16. März 2012 um 0:10

    Er, I just experimented a bit, and I don't think they're going to wrap automatically. At least, in Safari, they certainly don't seem to be.

    Can anyone tell me how to accomplish wrapping / additional rows? Thanks!

  63. FQueen 16. April 2012 um 7:31

    thank you for wonderful script, how to scrip jquery ?

  64. Jquery ajax data 17. Oktober 2012 um 21:15

    How come I actually i never thought of these?

  65. Vadim Volos 15. März 2013 um 20:14

    Please tell. How to install wordpress?

  66. Subhajit Das 21. März 2013 um 7:28

    Hi I want to add a fade in fade out function with this tab content, how can I do this. please help me out

  67. ??? 28. April 2013 um 4:49

    this is china ?????????????thanks for your code,it's nice

  68. techpaul 20. Juli 2013 um 11:14

    Thought about using it, gave up as soon as I saw typical CSS madness.

    FONTS are measured in POINTS and EMS not pixels. Points will rescale whatever the screen resolution and size. Measurements in pixels are for graphic items images, lines, tiny paddings.

    Font related heights should be in points, widths should be in EMS or ENS.
    General widths should be in PERCENTAGE so it scales with window size/resolution/ screen size.

    As soon as you measure everything in pixels it ONLY works on ONE screen size and resolution

  69. Ignacio 30. September 2013 um 5:42

    I'm not sure why but this site is loading extremely slow for me.
    Is anyone else having this issue or is it a problem on my end?
    I'll check back later on and see if the problem still exists.

  70. Arpita Singh 30. September 2013 um 6:57

    how can pause the slider on mouse hover instead of stopping it????

  71. dog training denver 2. Oktober 2013 um 6:29

    Today, I went to the beachfront with my children. I found a
    sea shell and gave it to my 4 year old daughter and said "You can hear the ocean if you put this to your ear." She put
    the shell to her ear and screamed. There was a hermit crab inside and
    it pinched her ear. She never wants to go back! LoL I know this is totally off topic but I had to tell
    someone!

  72. Debbra 2. Oktober 2013 um 9:12

    Hi colleagues, how is everything, and what you would like to say regarding this article, in my view its in fact awesome
    designed for me.

  73. Toko Boneka 3. Februar 2014 um 10:22

    I always emailed this blog post page to all my associates, for the reason that if like to read it afterward my friends will too.

    my site Toko Boneka

  74. bird is cool 19. Februar 2014 um 2:28

    Hello, just wanted to tell you, I liked this post.

    It was helpful. Keepp on posting!

  75. sopa para bajar la p 27. Februar 2014 um 15:01

    What's up, just wanted to say, I loved this post. It was funny.
    Keep on posting!

  76. Vincent 29. April 2014 um 7:58

    Hello Juergen,

    I love your tabs and would like to use them on my website. However I run into a problem and I can't figure out what I am doing wrong. I changed onmouseover to onclick but when clicking on a tab, the page jumps back to the top (the tab opens correctly though). Any idea how I can fix it?

    Thanks in advance.

  77. Hay Day Android Chea 5. Mai 2014 um 9:00

    I usually do not write a comment, but I looked at through some responses here Easy Tabs 1.2 -
    now with autochange | Kollermedia.at. I do have a few questions
    for you if it's okay. Could it be simply me or do some of these
    remarks look as if they are written by brain dead people?
    :-P And, if you are posting on additional places, I would like to
    keep up with everything new you have to post. Would you list of all of your social sites like your
    Facebook page, twitter feed, or linkedin profile?

Kommentar verfassen


 
Produced and © by Koller Jürgen | Impressum | Love and Joy to everyone