Tricky... Javascript ændring af styles
Hej kodehoveder.....Synes jeg har lavet et ret ok tab interface, der dog opfører sig lidt sjovt, deraf spørgsmålet...
Jeg har følgende kode stumper
Koden virker som sådan fint, men når jeg har en tabel i andet end den første "hovedtabel celle", så går det galt og mit tab interface generes ikke korrekt, hvorfor.....
serveren er ikke online, så derfor paster jeg lidt kode her.....
main.html -------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>New website configuration</title><link rel=stylesheet type=text/css href=formStyles.css>
<script language="JavaScript" type="text/javascript" src="mc_cookies.js" charset="UTF-8">
</script>
<script language="JavaScript" type="text/javascript" src="mc_tabs.js" charset="UTF-8">
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" onload="initializeTabs()">
<form method="post" action="/wm/wwwdmin.nsf/fCREATESITE?OpenForm&Seq=1" name="_fCREATESITE">
<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tr>
<td id="mc_t_h_0_0" onclick="mc_showTab(0,0)">General site configuration</td>
<td id="mc_t_h_0_1" onclick="mc_showTab(0,1)">Database defaults</td>
<td id="mc_t_h_0_2" onclick="mc_showTab(0,2)">Security</td>
<td id="mc_t_h_0_3" onclick="mc_showTab(0,3)">Meta Information</td>
<td id="mc_t_h_0_4" onclick="mc_showTab(0,4)">Error Pages</td>
<td id="mc_t_h_0_5" onclick="mc_showTab(0,5)">Search Setup</td>
<td id="mc_t_h_0_6" onclick="mc_showTab(0,6)">Sitemap configuration</td>
<td id="mc_t_h_0_7" onclick="mc_showTab(0,7)">Replication Setup</td>
</tr>
<tr>
<td id="mc_t_t_0_0"><img src="/icons/ecblank.gif" width="1" height="1"></td>
<td id="mc_t_t_0_1"><img src="/icons/ecblank.gif" width="1" height="1"></td>
<td id="mc_t_t_0_2"><img src="/icons/ecblank.gif" width="1" height="1"></td>
<td id="mc_t_t_0_3"><img src="/icons/ecblank.gif" width="1" height="1"></td>
<td id="mc_t_t_0_4"><img src="/icons/ecblank.gif" width="1" height="1"></td>
<td id="mc_t_t_0_5"><img src="/icons/ecblank.gif" width="1" height="1"></td>
<td id="mc_t_t_0_6"><img src="/icons/ecblank.gif" width="1" height="1"></td>
<td id="mc_t_t_0_7"><img src="/icons/ecblank.gif" width="1" height="1"></td>
</tr>
<tr id="mc_t_cr_0_0">
<td colspan="8" id="mc_t_c_0_0">
<table border="0" cellspacing="0" cellpadding="2" width="96%">
<tr>
<td id="mc_t_h_2_0" onclick="mc_showTab(2,0)">General site configuration</td>
<td id="mc_t_h_2_1" onclick="mc_showTab(2,1)">Database defaults</td>
<td id="mc_t_h_2_2" onclick="mc_showTab(2,2)">Security</td>
</tr>
<tr>
<td id="mc_t_t_2_0"><img src="/icons/ecblank.gif" width="1" height="1"></td>
<td id="mc_t_t_2_1"><img src="/icons/ecblank.gif" width="1" height="1"></td>
<td id="mc_t_t_2_2"><img src="/icons/ecblank.gif" width="1" height="1"></td>
</tr>
<tr id="mc_t_cr_2_0">
<td id="mc_t_c_2_0" colspan="3">1</td>
</tr>
<tr id="mc_t_cr_2_1">
<td id="mc_t_c_2_1" colspan="3">2</td>
</tr>
<tr id="mc_t_cr_2_2">
<td id="mc_t_c_2_2" colspan="3">3</td>
</tr>
</table>
</td>
</tr>
<tr id="mc_t_cr_0_1">
<td colspan="8" id="mc_t_c_0_1">
<table border="0" cellspacing="0" cellpadding="2" width="96%">
<tr>
<td id="mc_t_h_1_0" onclick="mc_showTab(1,0)">General site configuration</td>
<td id="mc_t_h_1_1" onclick="mc_showTab(1,1)">Database defaults</td>
<td id="mc_t_h_1_2" onclick="mc_showTab(1,2)">Security</td>
</tr>
<tr>
<td id="mc_t_t_1_0"><img src="/icons/ecblank.gif" width="1" height="1"></td>
<td id="mc_t_t_1_1"><img src="/icons/ecblank.gif" width="1" height="1"></td>
<td id="mc_t_t_1_2"><img src="/icons/ecblank.gif" width="1" height="1"></td>
</tr>
<tr id="mc_t_cr_1_0">
<td id="mc_t_c_1_0" colspan="3">1</td>
</tr>
<tr id="mc_t_cr_1_1">
<td id="mc_t_c_1_1" colspan="3">2</td>
</tr>
<tr id="mc_t_cr_1_2">
<td id="mc_t_c_1_2" colspan="3">3</td>
</tr>
</table>
</td>
</tr>
<tr id="mc_t_cr_0_2">
<td colspan="8" id="mc_t_c_0_2">3</td>
</tr>
<tr id="mc_t_cr_0_3">
<td colspan="8" id="mc_t_c_0_3">
<table border="0" cellspacing="0" cellpadding="2" width="96%">
<tr>
<td id="mc_t_h_3_0" onclick="mc_showTab(3,0)">General site configuration</td>
<td id="mc_t_h_3_1" onclick="mc_showTab(3,1)">Database defaults</td>
<td id="mc_t_h_3_2" onclick="mc_showTab(3,2)">Security</td>
</tr>
<tr>
<td id="mc_t_t_3_0"><img src="/icons/ecblank.gif" width="1" height="1"></td>
<td id="mc_t_t_3_1"><img src="/icons/ecblank.gif" width="1" height="1"></td>
<td id="mc_t_t_3_2"><img src="/icons/ecblank.gif" width="1" height="1"></td>
</tr>
<tr id="mc_t_cr_3_0">
<td id="mc_t_c_3_0" colspan="3">1</td>
</tr>
<tr id="mc_t_cr_3_1">
<td id="mc_t_c_3_1" colspan="3">2</td>
</tr>
<tr id="mc_t_cr_3_2">
<td id="mc_t_c_3_2" colspan="3">3</td>
</tr>
</table>
</td>
</tr>
<tr id="mc_t_cr_0_4">
<td colspan="8" id="mc_t_c_0_4">5</td>
</tr>
<tr id="mc_t_cr_0_5">
<td colspan="8" id="mc_t_c_0_5">6</td>
</tr>
<tr id="mc_t_cr_0_6">
<td colspan="8" id="mc_t_c_0_6">7</td>
</tr>
<tr id="mc_t_cr_0_7">
<td colspan="8" id="mc_t_c_0_7">8</td>
</tr>
</table>
</form>
</body>
</html>
-------------------------------formstyles.css----------
body,td,div{font-family:arial,helbetica,verdana,sans-serif;font-size:11px;color:#000000}
---------------------mc_cookies.js---------------------
function getCookie(NameOfCookie){
if (document.cookie.length > 0) {
begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1){
begin += NameOfCookie.length+1;
end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end));
}
}
return null;
}
function setCookie(NameOfCookie, value, expiredays) {
var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
document.cookie = NameOfCookie + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}
function delCookie (NameOfCookie) {
if (getCookie(NameOfCookie)) {
document.cookie = NameOfCookie + "=" +"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
-----------------------mc_tabs.js------------------------
mc_thetabs = new Array()
mc_thetabs[0] = 8
mc_thetabs[1] = 3
mc_thetabs[2] = 3
mc_thetabs[3] = 3
var mc_t_activeBorder = new Array("#000000","yellow")
var mc_t_inactiveBorder=new Array("#555555","#fafafa")
var mc_t_align = new Array("center","right")
var mc_t_activeBg = new Array("#999999","blue")
var mc_t_inactiveBg = new Array("#777777","red")
var mc_t_activeColor = new Array("white","yellow")
var mc_t_inactiveColor = new Array("lightgrey","lightgrey")
var mc_t_activeWeight = new Array("bold","bolder")
var mc_t_inactiveWeight = new Array("normal","normal")
setCookie('mc_adm_theme',0,365)
if(getCookie('mc_adm_theme')==null){
var getTheme = 0
}else{
var getTheme = getCookie('mc_adm_theme')
setCookie('mc_adm_theme',getCookie('mc_adm_theme'),365)
}
function initializeTabs(){
for(i=0;i<mc_thetabs.length;i++){
for(j=0;j<mc_thetabs[i];j++){
d = document.getElementById('mc_t_h_'+i+'_'+j).style
d.width=Math.round(100/mc_thetabs[i])+'%'
dt = document.getElementById('mc_t_t_'+i+'_'+j).style
dcr = document.getElementById('mc_t_cr_'+i+'_'+j).style
dc = document.getElementById('mc_t_c_'+i+'_'+j).style
dc.backgroundColor=mc_t_activeBg[getTheme]
dc.borderRight=mc_t_activeBorder[getTheme] +' 1px solid'
dc.borderLeft=mc_t_activeBorder[getTheme] +' 1px solid'
dc.borderBottom=mc_t_activeBorder[getTheme] +' 1px solid'
d.textAlign=mc_t_align[getTheme]
if(j==0){
d.backgroundColor=mc_t_activeBg[getTheme]
d.borderTop= mc_t_activeBorder[getTheme] +' 1px solid'
d.borderRight= mc_t_activeBorder[getTheme] +' 1px solid'
d.borderLeft= mc_t_activeBorder[getTheme]+' 1px solid'
d.color=mc_t_activeColor[getTheme]
d.fontWeight=mc_t_activeWeight[getTheme]
dt.backgroundColor=mc_t_activeBg[getTheme]
dt.borderLeft= mc_t_activeBorder[getTheme] +' 1px solid'
dcr.display='block'
}else{
d.backgroundColor=mc_t_inactiveBg[getTheme]
d.borderTop= mc_t_inactiveBorder[getTheme] +' 1px solid'
d.borderRight= mc_t_inactiveBorder[getTheme] +' 1px solid'
d.borderBottom= mc_t_inactiveBorder[getTheme] +' 1px solid'
d.borderLeft=(j==1)?mc_t_inactiveBorder[getTheme] +' 1px solid':''
d.color=mc_t_inactiveColor[getTheme]
d.fontWeight=mc_t_inactiveWeight[getTheme]
dt.backgroundColor=mc_t_activeBg[getTheme]
dt.borderRight=(j==mc_thetabs[i]-1)?mc_t_activeBorder[getTheme] +' 1px solid':''
dt.borderTop=mc_t_activeBorder[getTheme]+' 1px solid'
dcr.display='none'
}}}}
function mc_showTab(tab,item){
for(i=0;i<mc_thetabs[tab];i++){
d = document.getElementById('mc_t_h_'+tab+'_'+i).style
dt = document.getElementById('mc_t_t_'+tab+'_'+i).style
dcr = document.getElementById('mc_t_cr_'+tab+'_'+i).style
dc = document.getElementById('mc_t_c_'+tab+'_'+i).style
if(item==i){
d.backgroundColor=mc_t_activeBg[getTheme]
d.borderTop= mc_t_activeBorder[getTheme] +' 1px solid'
d.borderRight= mc_t_activeBorder[getTheme] +' 1px solid'
d.borderLeft= mc_t_activeBorder[getTheme]+' 1px solid'
d.color=mc_t_activeColor[getTheme]
d.fontWeight=mc_t_activeWeight[getTheme]
dt.backgroundColor=mc_t_activeBg[getTheme]
d.borderBottom=mc_t_activeBg[getTheme]
dt.borderTop=mc_t_activeBg[getTheme]
dt.borderLeft=(i==0)?mc_t_activeBorder[getTheme] +' 1px solid':''
dcr.display='block'
dc.backgroundColor=mc_t_activeBg[getTheme]
dc.borderRight=mc_t_activeBorder[getTheme] +' 1px solid'
dc.borderLeft=mc_t_activeBorder[getTheme] +' 1px solid'
dc.borderBottom=mc_t_activeBorder[getTheme] +' 1px solid'
}else{
d.backgroundColor=mc_t_inactiveBg[getTheme]
d.borderTop= mc_t_inactiveBorder[getTheme] +' 1px solid'
d.borderRight= mc_t_inactiveBorder[getTheme] +' 1px solid'
d.borderBottom= mc_t_inactiveBorder[getTheme] +' 1px solid'
d.borderLeft=(i==item+1||i==0)?mc_t_inactiveBorder[getTheme] +' 1px solid':''
d.color=mc_t_inactiveColor[getTheme]
d.fontWeight=mc_t_inactiveWeight[getTheme]
dt.backgroundColor=mc_t_activeBg[getTheme]
dt.borderRight=(i==mc_thetabs[tab]-1)?mc_t_activeBorder[getTheme] +' 1px solid':''
dt.borderTop=mc_t_activeBorder[getTheme]+' 1px solid'
dcr.display='none'
}
}
}
