Cycle Tabs
Support Pages »
Cycle Tabs
This script enables you to cycle through tabs. It does not use the native wikidot tabs but tabs within the javascript and html code below. The time delay can be adjusted in the menu settings in the code.
[[module css]]
iframe.html-block-iframe {
height:200px !important;
}
[[/module]]
[[html]]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Scrolling Tabs</title>
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.menu {background-color:#206FA8; color:#ffffff; border-bottom:1px solid #d7d7d7; width:400px;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:left;}
.menu li {display:inline; line-height:23px;}
.menu li a {color:#ffffff; font-weight:bold; text-decoration:none; padding:4px 5px 6px 5px; border: #ececec; height:200px; }
.menu li a.tabactive {background-color:darkgray; font-weight:bold; position:relative; }
#tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4 {border:1px solid darkgray; width:398px; text-align:center;padding:6px 0px; font-size:12px; margin-bottom:5px;}
</style>
<script type="text/javascript">
//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("4")
//Set the Tab to 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 don'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 = 5;
//should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes
var stoponhover = 0;
//END MENU SETTINGS
/*Functions - do not change*/
function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0)) {counter=0;}menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}
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();}
}
</script>
</head>
<body>
<!--Start of the Tabmenu1 -->
<div class="menu">
<ul>
<li><a href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;" title="This is tab 1" id="tablink1">Tab 1</a></li>
<li><a href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;" title="This is tab 2" id="tablink2">Tab 2 </a></li>
<li><a href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;" title="This is tab 3" id="tablink3">Tab 3 </a></li>
<li><a href="#" onmouseover="easytabs('1', '4');" onfocus="easytabs('1', '4');" onclick="return false;" title="This is tab 4" id="tablink4">Tab 4 </a>
</li>
</ul>
</div>
<!--End of the Tabmenu1 -->
<!--Start Tabcontent 1 -->
<div id="tabcontent1">
Séc nětkeni oktá o clač úfry cha difrá účlib žruh v tětlébrůca.
<img src="http://www.strathviewconsultants.co.uk/local--files/support:images/jay.jpg" />
</div>
<!--End Tabcontent 1-->
<!--Start Tabcontent 2-->
<div id="tabcontent2">
Vypy a tošt sečlovo přuzké a diň sloděs. šídlo lkyv z úhrý tidě hřoň? Děglo tidibřeré žrůb a šreděni byl skátě v puď, kladi chrep zkýdětětřá.
</div>
<!--End Tabcontent 2 -->
<!--Start Tabcontent 3-->
<div id="tabcontent3">
Vybla veh. Uplé tliř o nito mynikrá bodi úmrégloď huc tidě ťůkré?
</div>
<!--End Tabcontent 3-->
<!--Start Tabcontent 4-->
<div id="tabcontent4">
Zrech věni, brch glišlýř tůc dlistůchlí, ukroust grusrou s hruň úšlu mož z zkyluš? Nižladěd žrymredě nidě put til vevrýhy úmoh.
</div>
<!--End Tabcontent 4-->
<a href="#" onmousedown="javascript:stop_autochange(); return false;">Stop the Change</a> | <a href="#" onmousedown="javascript:restart_autochange(); return false;">Restart (if stopped)</a>
</body>
</html>
[[/html]]
Page tags:
javascript
