CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: Multiple tab list in a Page

  1. 09-12-2006, 11:52 PM #1
    miumiu
    miumiu is offline Junior Coders
    Join Date
    Dec 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Multiple tab list in a Page

    Tab Content Script
    http://www.dynamicdrive.com/dynamici...abcontent2.htm

    Not sure why the thread starter delete the whole thread.
    Anyway, somebody had post a mod on this script before, that it is able to display multiple tablist in a page.

    It works very well.

    Here are the code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Tabs multiple</title>
<style type="text/css">

.tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}

.tablist li{
list-style: none;
display: inline;
margin: 0;
}

.tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}

.tablist li a:link, #tablist li a:visited{
color: navy;
}

.tablist li a.current{
background: lightyellow;
}

.tabcontentcontainer{
width: 400px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid black;
}

.tabcontent{
display:none;
}

</style>

<script type="text/javascript">

/***********************************************
* Tab Content script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}

function expandcontent(cid, aobject, cible, id){
if (document.getElementById){
highlighttab(aobject,cible,id)
detectSourceindex(aobject,id)
if (previoustab[id]!=undefined){
document.getElementById(previoustab[id]).style.display="none"
}
document.getElementById(cid).style.display="block"
previoustab[id]=cid
if (aobject.blur)
aobject.blur()
return false
}else
return true
}

function highlighttab(aobject,cible,id){
if (typeof tabobjlinks[id]=="undefined")
collecttablinks(id)
for (i=0; i<tabobjlinks[id].length; i++)
tabobjlinks[id][i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById(cible).style.backgroundColor=themecolor
}

function collecttablinks(id){
var tabobj=document.getElementById(id)
tabobjlinks[id]=tabobj.getElementsByTagName("A")
}

function detectSourceindex(aobject,id){
for (i=0; i<tabobjlinks[id].length; i++){
if (aobject==tabobjlinks[id][i]){
tabsourceindex[id]=i //source index of tab bar relative to other tabs
break
}
}
}


function do_onload(id,cible){
var cookiecheck=false;
if (enablepersistence) {
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? cookieBase+id : window.location.pathname+id
cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
}
collecttablinks(id)
initTabcolor=cascadedstyle(tabobjlinks[id][1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[id][0], "backgroundColor", "background-color")
if (enablepersistence && cookiecheck) {
// alert("persistence");
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
}
if (whichtab!="undefined"){
expandcontent(tabcontentid, tabobjlinks[id][whichtab],cible,id)
}else{
expandcontent(initialtab[id][1], tabobjlinks[id][initialtab[id][0]-1],cible,id)
}
}else{
// alert("pas de persistence");
expandcontent(initialtab[id][1], tabobjlinks[id][initialtab[id][0]-1],cible,id)
}
}


//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=Array();
var previoustab=Array();
var tabobjlinks=Array();
var tabsourceindex=Array();
var tabIds = Array();
var currTab = -1;
var cookieBase = "tabcontent";
</script>

<script type="text/javascript">

//Dynamicdrive.com persistence feature add-on
var enablepersistence=true //true to enable persistence, false to turn off (or simply remove this entire script block).
var persisttype="sitewide" //enter "sitewide" for Tab content order to persist across site, "local" for this page only

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function saveAllTabState(){
for(i=-1;i<tabIds.length;i++) {
id=tabIds[i];
var cookiename=(persisttype=="sitewide")? cookieBase+id : window.location.pathname+id
var cookievalue=(persisttype=="sitewide")? tabsourceindex[id]+"|"+previoustab[id]+";path=/" : tabsourceindex[id]+"|"+previoustab[id]
document.cookie=cookiename+"="+cookievalue
}
}

if (enablepersistence) window.onunload=saveAllTabState;
</script>

</head>
<body>



<ul id="tablist" class="tablist">
<li><a href="javascript:;" onClick="return expandcontent('sc1', this, 'tabcontentcontainer', 'tablist')" theme="#EAEAFF">Content 1</a></li>
<li><a href="javascript:;" onClick="return expandcontent('sc2', this, 'tabcontentcontainer', 'tablist')" theme="#EAEAFF">Content 2</a></li>
<li><a href="javascript:;" onClick="return expandcontent('sc3', this, 'tabcontentcontainer', 'tablist')" theme="#EAEAFF">Content 3</a></li>
<li><a href="javascript:;" onClick="return expandcontent('sc4', this, 'tabcontentcontainer', 'tablist')" theme="#EAEAFF">Content 4</a></li>
</ul>
<DIV id="tabcontentcontainer" class="tabcontentcontainer">
<div id="sc1" class="tabcontent">Content 1</div>
<div id="sc2" class="tabcontent">Content 2</div>

<div id="sc3" class="tabcontent">Content 3</div>
<div id="sc4" class="tabcontent">Content 4</div>
</DIV>
<script>
tabIds[currTab++] = "tablist";
initialtab["tablist"] = [1, "sc1"]
do_onload("tablist","tabcontentcontainer");
</script>
<p>&nbsp;</p>


<ul id="tablist2" class="tablist">
<li><a href="javascript:;" onClick="return expandcontent('sc5', this, 'tabcontentcontainer2', 'tablist2')" theme="#EAEAFF">Content 5</a></li>
<li><a href="javascript:;" onClick="return expandcontent('sc6', this, 'tabcontentcontainer2', 'tablist2')" theme="#EAEAFF">Content 6</a></li>
<li><a href="javascript:;" onClick="return expandcontent('sc7', this, 'tabcontentcontainer2', 'tablist2')" theme="#EAEAFF">Content 7</a></li>

</ul>
<DIV id="tabcontentcontainer2" class="tabcontentcontainer">
<div id="sc5" class="tabcontent">Content 5</div>
<div id="sc6" class="tabcontent">Content 6</div>
<div id="sc7" class="tabcontent">Content 7</div>
</DIV>

<script>
tabIds[currTab++] = "tablist2";
initialtab["tablist2"] = [1, "sc5"]
do_onload("tablist2","tabcontentcontainer2");
</script>


<p>&nbsp;</p>


<ul id="tablist3" class="tablist">
<li><a href="javascript:;" onClick="return expandcontent('sc8', this, 'tabcontentcontainer3', 'tablist3')" theme="#EAEAFF">Content 8</a></li>
<li><a href="javascript:;" onClick="return expandcontent('sc9', this, 'tabcontentcontainer3', 'tablist3')" theme="#EAEAFF">Content 9</a></li>
<li><a href="javascript:;" onClick="return expandcontent('sc10', this, 'tabcontentcontainer3', 'tablist3')" theme="#EAEAFF">Content 10</a></li>
<li><a href="javascript:;" onClick="return expandcontent('sc11', this, 'tabcontentcontainer3', 'tablist3')" theme="#EAEAFF">Content 11</a></li>
<li><a href="javascript:;" onClick="return expandcontent('sc12', this, 'tabcontentcontainer3', 'tablist3')" theme="#EAEAFF">Content 12</a></li>
</ul>
<DIV id="tabcontentcontainer3" class="tabcontentcontainer">
<div id="sc8" class="tabcontent">Content 8</div>
<div id="sc9" class="tabcontent">Content 9</div>

<div id="sc10" class="tabcontent">Content 10</div>
<div id="sc11" class="tabcontent">Content 11</div>
<div id="sc12" class="tabcontent">Content 12</div>
</DIV>
<script>
tabIds[currTab++] = "tablist3";
initialtab["tablist3"] = [1, "sc8"]
do_onload("tablist3","tabcontentcontainer3");
</script>


</body>
</html>
    Reply With Quote Reply With Quote
  2. 09-12-2006, 11:56 PM #2
    miumiu
    miumiu is offline Junior Coders
    Join Date
    Dec 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I am able to mod it with the following instruction
    http://www.dynamicdrive.com/forums/s...ead.php?t=6678

    by editing the following section
    Code:
    function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].id=''
var themeId=aobject.getAttribute("theme")? aobject.getAttribute("theme") : ''
aobject.id=themeId
}
    It works well in firefox
    but in IE, there is some script error

    it says,
    'CurrentStyle' is null or not and object

    Is that a bug in IE?
    Hope some nice guy will show me some light to it.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules