PDA

View Full Version : tab content script CSS/HTML/JAVA



HellBoys
01-11-2007, 05:41 AM
I have probleme whit my code: first - when i select a tab it dont stay highlight and it not disable. second the tab content dont work in ie. third - when i try to make style for my tab content i always have a space. Cant some one check my code and tell me my error i am a noob. sorry for my bad english.

Here the tree part


-------------------CSS----------------------

body{
margin: 0px auto;
padding: 0px;
width:700px;
background:#000000;
}

#wrap{
}

/*-----HEADER-----*/

#header{
height:95px;
background:url("images/Logo_top.png") 0 0 no-repeat;
}

/*-----BANNER-----*/

#banner{
height:150px;
background:url(images/Banner.gif) 0 0 no-repeat;
}

/*-----NAVIGATION-----*/

#nav{
height:50px;
background:#282828;
}

table#tabmenu{
height:31px;
margin-top:19px;
margin-left:60px;
}

table#tabmenu td.tab{
width:125px;
text-align:center;
}

table#tabmenu td.tab a{
background-image:url(images/tab_up.gif);
background-repeat:no-repeat;
text-decoration:none;
font:Verdana;
font-size:12px;
color:#FFFFFF;
display:block;
line-height: 31px;
}

table#tabmenu td.tab a:hover, table#tabmenu td.tab.current{
background-image:url(images/tab_down.gif);
background-repeat:no-repeat;
color:#282828;
}

table#tabmenu td.separator{
width:2px;
}

/*-----TABCONTENT-----*/


#tabcontentcontainer{
width:700px;
background:#FFFFFF;
}

.tabcontent{
display:none;
background:#FFFFFF;
}

#sc5{
margin:0 ;
padding:0;
}

p{
margin: 0;
padding:0;
height:1000px;
text-align:justify;
font:Verdana;
font-size:11px;
color:#660000;
}

/*-----FOOTER-----*/


#footer{
height:50px;
background:#282828;
}

#fmenu li{
position:relative;
top:15px;
display:inline;
}

#fmenu li a{
font:Verdana;
font-size:12px;
color:#666666;
text-decoration:underline;
}


-------------------HTML----------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>QuebecKillers version 1.0</title>
</head>

<link rel="stylesheet" href="global.css" type="text/css">
<script language="JavaScript" src="tabcontent.js"></SCRIPT>



<body class="homepage">

<div id="wrap">

<div id="header"></div>
<div id="banner"></div>

<div id="nav">
<div id="tablist">
<table id="tabmenu" cellpadding="0" cellspacing="0">
<tr>
<td class="tab"><a href="#" class="current" onClick="return expandcontent('sc1', this)">Home</a></td>
<td class="separator"></td>
<td class="tab"><a href="#" onClick="return expandcontent('sc2', this)">Membres</a></td>
<td class="separator"></td>
<td class="tab"><a href="#" onClick="return expandcontent('sc3', this)">Recrutement</a></td>
<td class="separator"></td>
<td class="tab"><a href="#" onClick="return expandcontent('sc4', this)">Ligues</a></td>
<td class="separator"></td>
<td class="tab"><a href="#" onClick="return expandcontent('sc5', this)">Média</a></td>
<td class="separator"></td>
</tr>
</table>
</div>
</div>

<div id="main">
<div id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
</div>

<div id="sc2" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/new.htm">What's New</a> section to see recently added scripts to our archive.
</div>

<div id="sc3" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/hot.htm">Hot</a> section for a list of DD scripts that are popular to the visitors.
</div>

<div id="sc4" class="tabcontent">
Aller toute chier tabarnak de cave d'ostie
</div>

<div id="sc5" class="tabcontent">
<p>The standard Lorem Ipsum passage, used since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum. The standard Lorem Ipsum passage, used since the 1500s
</p>
</div>

</div>
</div>


<div id="footer">
<center><div id="fmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Membres</a></li>
<li><a href="#">Recrutement</a></li>
<li><a href="#">ligues</a></li>
<li><a href="#">Média</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Contact</a></li>
</div><center>
</div>

</div>

</body>
</html>


--------------JAVASCRIPT-----------------

//code by http://www.dynamicdrive.com Thx

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

////////Stop editting////////////////

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)
}
}

var previoustab=""

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

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

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

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

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

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload



Thank you for your time...i realy appreciate if some one cant find the probleme

p.s. the two image i use for tab background have the size of height:31px and width:125px.