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, 25,459 hits)
Previous Versions of Easy Tabs
EasyTabs 1.1 (Infos here)
Easy Tabs 1.1 (7.0 KiB, 3,898 hits)
EasyTabs 1.0 (Infos here)
Easy Tabs 1.0 (1.2 KiB, 3,121 hits)
Joomla Plugin JooTabs by Ricardo Sousa und Andy Sikumbang
- jooTabs english
- jooTabs deutsch [German translation by Niko Winckel]
(82 votes, average: 4.29 out of 5)
Loading ...Top News by
News Übersicht
Aktuelle Kommentare
Über Kollermedia.at
Willkommen! Mein Name ist Jürgen Koller, 27 Jahre alt aus Baden bei Wien & seit 2004 als selbstständiger New Media Producer tätig. Mehr über meine Arbeiten finden Sie im Work Bereich.
Schalten Sie Werbung auf Kollermedia.at - über 34.000 Unique Visitors und 90.000 Pageviews pro Monat.mehr Informationen
Verfolgen Sie die News von Kollermedia.at bequem via RSS Feed:
Empfehlung
Empfehlung
Portfolio Showcase
Letzte Updates
-
2010-02-03 23:54
Robert Downey Jr. und Jude Law ein wirklich großartiges Duo...wirklich guter und teilweise sehr lustiger Film.
0.3 -
2010-01-03 14:30
Großartiger Film, 3D Version war wunderbar...beeindruckend das man sowas umsetzen kann...extrem farbenfroh..super film
0.3
133 Responses »
20 Trackbacks
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!
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″
Hi Sakalli,
just write: onclick=”easytabs(‘2′, ‘1′); return false;”
Thats it.
cheers!
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
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
Hello,
nice work….! but if possible place images at tabs so that it can add life to it
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
I somehow missed the solution in the above, sorry for the duplicate question, thank you for the fix up
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
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
that’s all was amazing .. but can I load tabs content to external file ?
thanks for share dude
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?
Hi,
How do I install this on wordpress?
Thanks!
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,
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?
it doesnt work inside a table!
wen charge it look disabled
how to fix that ?
@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.
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
awesome …. nice share … thanks dudee
Very easy example and work in IE, Opera and Firefox
Nice!
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
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!