Post by Tom on Sept 4, 2010 6:19:20 GMT -8
A very simple tabbed table which remembers the tab selected in cookies. The styles can be adjusted to fit any site.
tomstest2.proboards.com/index.cgi
Works in IE 6+, FF 2+ and Chrome.
<!--
- LITEtabs v1.0
- Copyright (C) 2010 Thomas Oldbury
-
- This software is licensed under a CC BY-SA v3 license.
- http://creativecommons.org/licenses/by-sa/3.0/
-->
<!-- Begin LITEtabs -->
<style type="text/css">
.tab
{
margin-top: 3px;
/* Change #000000 below to your table border colour. */
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
/* Change #ffffff below to your link/tab colour. Do NOT remove "!important". */
color: #ffffff !important;
margin-bottom: 0px;
padding: 4px;
display: inline-block;
/* Have mercy on me for using such awful positioning. */
position: relative;
top: 2px;
}
.activetab
{
/* Change #000000 below to your tab background colour. */
background-color: #ffffff;
/* Change #000000 below to your active link/tab colour. Do NOT remove "!important". */
color: #000000 !important;
}
.tabholder
{
/* If you don't want your tabs to scroll, remove the overflow-y definition below. */
overflow-y: auto;
/* Adjust the height as you want. */
height: 260px;
}
</style>
<table align="center" border="0" width="500" cellspacing="0" cellpadding="0" bgcolor="419a96" class="bordercolor">
<tr>
<td>
<table cellspacing="1" border="0" width="100%">
<tr>
<td width="100%" class="titlebg" bgcolor="57bab6" style="text-align: center;">
<a href="javascript:void(0);" onclick="lite_show_tab(this, 1);" class="tab" id="link1">Tab #1</a>
<a href="javascript:void(0);" onclick="lite_show_tab(this, 2);" class="tab" id="link2">Tab #2</a>
<a href="javascript:void(0);" onclick="lite_show_tab(this, 3);" class="tab" id="link3">Tab #3</a>
<a href="javascript:void(0);" onclick="lite_show_tab(this, 4);" class="tab" id="link4">Tab #4</a>
<a href="javascript:void(0);" onclick="lite_show_tab(this, 5);" class="tab" id="link5">Tab #5</a>
</td>
</tr>
<tr>
<td width="100%" class="windowbg" bgcolor="95dad4">
<div class="tabholder">
<div id="tab1" style="display:none;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper posuere dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec nec quam quis eros pellentesque condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sit amet nisl a metus scelerisque pulvinar a in nisl. Phasellus ac suscipit felis. Nulla suscipit, quam sit amet fermentum sodales, nulla velit mollis turpis, a cursus mi tellus id orci. Sed interdum porttitor ante, quis lacinia leo hendrerit eu. Aliquam egestas, diam sed tempor venenatis, felis velit convallis nisi, ut tempus nunc lorem auctor odio. Sed scelerisque, est et interdum posuere, nisi erat pharetra risus, et luctus neque dolor sed orci. Proin condimentum, justo at tristique congue, sem magna elementum mi, vitae lacinia leo justo at sem. Fusce luctus porta nulla vitae vehicula. Sed ante lacus, luctus id scelerisque consequat, gravida eu mauris. Pellentesque ut ornare risus. Nulla egestas, orci nec tempor feugiat, ligula ante pharetra est, vitae accumsan lacus risus vel sapien. Nunc consequat lorem non leo iaculis nec dignissim ipsum sollicitudin.
</p>
<p>
Suspendisse facilisis lacinia quam ut ultricies. Ut laoreet lacus id elit pulvinar pharetra. Phasellus non dui nulla, vel tincidunt magna. Nunc nec felis at arcu sagittis fermentum at quis lacus. Fusce condimentum, felis at ullamcorper cursus, eros est blandit nisi, ac feugiat lorem justo at turpis. Sed pretium mi non nulla euismod in tincidunt purus lobortis. Morbi ipsum augue, fermentum sit amet porttitor et, auctor at lacus. Quisque leo metus, interdum vel luctus sed, vestibulum molestie sem. Nam ac diam magna. Quisque semper bibendum feugiat. Maecenas suscipit, nisl eget blandit rhoncus, augue purus convallis risus, non iaculis erat elit eget neque. Nam porttitor dignissim nulla, id aliquam sem blandit at. Quisque commodo leo a quam porta quis euismod dui sagittis.
</p>
</div>
<div id="tab2" style="display:none;">
<p>
Hello, world.
</p>
</div>
<div id="tab3" style="display:none;">
<p>
Put something you want in here.
</p>
</div>
<div id="tab4" style="display:none;">
<p>
You can have more than 5 tabs if you want.
</p>
</div>
<div id="tab5" style="display:none;">
<p>
<!-- don't use marquee unless you absolutely have to -->
<marquee>You can include any HTML you want.</marquee>
</p>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<noscript>
<style type="text/css">
#tab1 { display: none; }
</style>
</noscript>
<script type="text/javascript">
/*
* LITEtabs v1.0
* Copyright (C) 2010 Tom Oldbury
*
* This software is licensed under a CC BY-SA v3 license.
* http://creativecommons.org/licenses/by-sa/3.0/
*/
// ** User defined config. **
// Default tab to use if no cookie is set.
//
// Note that the cookie will then be set to this value. If there is no
// support for cookies on the user's browser, or if they are disabled,
// then this will always be the selected tab.
var lite_defaultTab = 1;
// Whether to remember the tab when the page changes; uses/reqires cookies.
var lite_rememberTabs = true;
// A unique ID to prevent clashes with other liteTAB installs on other
// forums. Choose something like your ProBoards forum id.
var lite_cookieUID = "your_unique_id";
// ** End of user defined config. **
// Touching the below stuff might break things! You have been warned!
var lite_currentTab = -1;
var lite_currentTabLinkObj = null;
var lite_cookieName = "";
function lite_load()
{
// Read cookie
lite_cookieName = "__remember_tab_" + lite_cookieUID;
if(!lite_rememberTabs || lite_readCookie(lite_cookieName) == null)
lite_currentTab = lite_defaultTab;
else
lite_currentTab = parseInt(lite_readCookie(lite_cookieName));
// Set tab to correct tab
lite_currentTabObj = document.getElementById("link" + lite_currentTab);
lite_show_tab(lite_currentTabObj, lite_currentTab);
}
/* (C) PPK - http://www.quirksmode.org/js/cookies.html */
/* Formatting changes by Tom Oldbury. */
function lite_createCookie(name, value, days)
{
if(days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function lite_readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function lite_show_tab(linkobj, id)
{
var oldTab = document.getElementById("tab" + lite_currentTab);
var tab = document.getElementById("tab" + id);
oldTab.style.display = "none";
tab.style.display = "block";
if(lite_currentTabLinkObj != null && lite_currentTabLinkObj != linkobj)
lite_currentTabLinkObj.className = "tab";
linkobj.className = "tab activetab";
lite_currentTab = id;
lite_currentTabLinkObj = linkobj;
if(lite_rememberTabs)
{
lite_createCookie(lite_cookieName, id, 365); // 365 days - remember for a year
}
}
lite_load();
</script>
<!-- End LITEtabs -->
tomstest2.proboards.com/index.cgi
Works in IE 6+, FF 2+ and Chrome.