Need help to get a tabbed table work in Netscape 6+

@rexianApr 27.2005

Guys,

Please review my site ~~[url]~~http://mysite.verizon.net/n00bieputer/[/url]. But, here’s the dillema. In my site, I have created a tabbed table and the thing works alright in IE but, does not do jack in Netscape. in Netscape 8.0 beta I can see the first tab but I can’t switch. What code changes do I need to do to get this thing work in Netscape 6+?

Also, is there a way I can dynamically change class attribute on BODY tag depending on screenwidth/resolution? I have designed this page for 1024×768 (600 availability).

Will appreciate your feedbacks greatly. Hundred thanks in advance.

– Rex

to post a comment

JavaScript

6 Comments(s) _↴

@rexianauthorApr 28.2005 — #bump...plz help

@scragarApr 28.2005 — #how many different services/developers have made that page?

you have about 4 style tags(and the same with invalid script tags), just stick it all in one and stick to one presentation method throught your code.

have you tried veiwing the page with Javascript disabled? it's completely useless.

you should cater for all users, not just those with javascript enabled and browsers you are prepared for.

@FangApr 28.2005 — #18 tables too many, time to learn css. The 'tabbed table' effect can be done with css: http://www.meyerweb.com/eric/css/edge/popups/demo.html

The JavaScript was written for IE and will NEVER work in any other browser: http://www.reloco.com.ar/mozilla/compat.html

@rexianauthorApr 29.2005 — #Thanks. But, I am not targeting this page for anyone other than myself. If someone ends up to this webpage he/she is welcome. The only other browser that I want it to work is Netscape. Also, if some one does not have a javascript enable browser, I am sorry. He/she does not need 64-bit computing anyway. I am not here to start a "what is good" war. I just needed some help in getting the script work in Netscape for tabbed interface. But, well..

Thanks a bunch.

@rexianauthorApr 29.2005 — #Let me make this simple...how do I make the following work in Netscape...no CSS rollovers/popups. ...just the script below:

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

@rexianauthorMay 02.2005 — #help plz.........bump

Also in #JavaScript _↴

.php vs .html/.htm Best way to act on select option working with existing script

Success!

Help @rexian spread the word by sharing this article on Twitter...

Tweet This

Need help to get a tabbed table work in Netscape 6+

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Need help to get a tabbed table work in Netscape 6+

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴