can I change this?

liunx · Jan 10, 2008

Check This (<a class="postlink" href="http://www.geocities.com/youlilsheshe/idk.html">http://www.geocities.com/youlilsheshe/idk.html</a>) Out. can I make it to where it takes up the whole page and to where the tabs are: smaller and on the sides?

This is the HTML: 
 
 
 
<HTML> 
<HEAD> 
<TITLE>Document Title</TITLE> 
<STYLE> 
.conts{visibility:hidden} 
.tab{border-top:solid thin #E0E0E0; 
border-right:solid thin gray; 
border-left:solid thin #E0E0E0; 
font-family:Verdana; 
font-size:10pt; 
text-align:center; 
font-weight:normal} 
 
.selTab{border-left:solid thin white; 
border-top:solid thin white; 
border-right:solid thin black; 
font-weight:bold; 
text-align:center} 
 
</STYLE> 
<SCRIPT LANGUAGE=JavaScript> 
 
//a public function that the container uses to pass in values for the labels 
function public_Labels(label1, label2, label3, label4, label5, label6, label7){ 
 
t1.innerText = label1; 
t2.innerText = label2; 
t3.innerText = label3; 
t4.innerText = label4; 
t5.innerText = label5; 
t6.innerText = label6; 
t7.innerText = label7; 
} 
 
//a public function that the container uses to pass in values for the card containers 
function public_Contents(contents1, contents2, contents3, contents4, contents5, contents6, contents7){ 
 
t1Contents.innerHTML = contents1; 
t2Contents.innerHTML = contents2; 
t3Contents.innerHTML = contents3; 
t4Contents.innerHTML = contents4; 
t5Contents.innerHTML = contents5; 
t6Contents.innerHTML = contents6; 
t7Contents.innerHTML = contents7; 
 
init(); 
} 
 
//sets the default display to tab 1 
function init(){ 
tabContents.innerHTML = t1Contents.innerHTML; 
} 
 
//this is the tab switching function 
var currentTab; 
var tabBase; 
var firstFlag = true; 
 
 
function changeTabs(){ 
 
if(firstFlag == true){ 
currentTab = t1; 
tabBase = t1base; 
firstFlag = false; 
} 
 
if(window.event.srcElement.className == "tab"){ 
 
currentTab.className = "tab"; 
 
tabBase.style.backgroundColor = "white"; 
 
currentTab = window.event.srcElement; 
 
tabBaseID = currentTab.id + "base"; 
 
tabContentID = currentTab.id + "Contents"; 
 
tabBase = document.all(tabBaseID); 
 
tabContent = document.all(tabContentID); 
 
currentTab.className = "selTab"; 
 
tabBase.style.backgroundColor = ""; 
 
tabContents.innerHTML = tabContent.innerHTML; 
 
} 
} 
 
</SCRIPT> 
</HEAD> 
<BODY BGCOLOR=#C0C0C0 onclick="changeTabs()" onload="init()"> 
 
 
<DIV STYLE="position:absolute; top:40; height:350; width:500; left:25; border:none thin gray"> 
 
 
<TABLE STYLE="width:100%; height:250" CELLPADDING=0 CELLSPACING=0> 
<TR> 
<TD ID=t1 CLASS=selTab HEIGHT=25>tab 1</TD> 
<TD ID=t2 CLASS=tab>tab 2</TD> 
<TD ID=t3 CLASS=tab>tab 3</TD> 
<TD ID=t4 CLASS=tab>tab 4</TD> 
<TD ID=t5 CLASS=tab>tab 5</TD> 
<TD ID=t6 CLASS=tab>tab 6</TD> 
<TD ID=t7 CLASS=tab>tab 7</TD> 
</TR> 
<TR> 
<TD ID=t1base STYLE="height:2; border-left:solid thin white"></TD> 
<TD ID=t2base STYLE="height:2; background-color:white"></TD> 
<TD ID=t3base STYLE="height:2; background-color:white"></TD> 
<TD ID=t4base STYLE="height:2; background-color:white"></TD> 
<TD ID=t5base STYLE="height:2; background-color:white"></TD> 
<TD ID=t6base STYLE="height:2; background-color:white"></TD> 
<TD ID=t7base STYLE="height:2; background-color:white; border-right:solid thin white"></TD> 
</TR> 
 
 
<TR> 
<TD HEIGHT="*" COLSPAN=7 ID=tabContents 
STYLE="border-left:solid thin white; 
border-bottom:solid thin white; 
border-right:solid thin white">sample contents</TD> 
 
</TR> 
</TABLE> 
</DIV> 
 
 
<DIV CLASS=conts ID=t1Contents>This text is on tab one</DIV> 
<DIV CLASS=conts ID=t2Contents>This text is on tab two</DIV> 
<DIV CLASS=conts ID=t3Contents>This text is on tab three</DIV> 
<DIV CLASS=conts ID=t4Contents>This text is on tab four</DIV> 
<DIV CLASS=conts ID=t5Contents>This text is on tab five</DIV> 
<DIV CLASS=conts ID=t6Contents>This text is on tab six</DIV> 
<DIV CLASS=conts ID=t7Contents>This text is on tab seven</DIV> 
</BODY> 
</HTML>ugh, that whole layout will need to be gutted. The working code can stay though. But I actually suggest dropping it all together because it is done client side. If you used server side scripting you could make the stuff the client browser sees more simplistic and it would be better supported. You could also do this with a few html pages too and just haveing different images on each one too.What!!!!!! I work with Html so can someone give me a script with what i asked? Does one exist? Or doesn't it? im not yelling im just askinYou can modify that but keep in mind it is not going to work on anything but ie. It does not work with mozilla which means it will not work with ns either. I did not test it in opera but the chances are it will not work in that either. Thats why I say ditch it. There is also and additional 13% of the internet population it will not work for that keep their java script off or can't read it. You are probably making your page content that is on the other tabs inaccessable to as high as 30% of the users on the internet since you are excluding ns based browsers and older version of ie and opera.is there something else that i can use that is sort of like that, that works for everyone? I need to make some kind of online newspaper and I thought that this would be good cause it hase tabs that i could put on the side so that people could get to different parts of the paper without having to load a new page everytime. So do you have anything else?

I changed the size of the table to 100% in your code at this point. 
 
<DIV STYLE="position:absolute; top:40; height:350; width:100%; left:5; border:none thin gray"> 
 
It worked in NS 7 for meHi! 
 
If you insist in handling things at least similar to what you have now, I only see one way: 
 
The changetab has to be an onclick event on each tab - toggling visibility (note that the function for that has to be browser specific). The content for the tab which is clicked has to be set to visible all others to hidden. 
 
One word about Opera: afaik, Opera cannot handle changing the contents of a div or something. The contents of each container has to be already predefined - the rest is dealing with the visibility of the container... 
 
This innerText and innerHTML stuff will keep off your contents from non-IE users (just what PeOfEo said!) 
 
Cheers - PitYou might swap out the visibility your divs using this java script 
 
function showmenu(elmnt) 
{ 
document.getElementById(elmnt).style.visibility = "visible"; 
} 
function hidemenu(elmnt) 
{ 
document.getElementById(elmnt).style.visibility = "hidden"; 
} 
 
and calling those on mouseclick of tab. It would mean putting the code to make all of the others invisible on each tab though. The problem is your code now is ie specific. But this code here, something that pyro and toicontein (I probably spelled that wrong) showed me. It is not ie specific and I used it for the drop downs on the new site I am making, <a class="postlink" href="http://www.paxonradio.vze.com">www.paxonradio.vze.com</a>i dont understand!!!!!!This is your page on mozilla btw, those tabs do nothing on mouse click, its as if I were clicking plain text.

can I change this?

liunx

Guest