Javascript Gurus : Tab menu

Hi !

If you are using IE, look at the nice tab menu with the down arrow on http://www.yahoo.com
I'd like something similar that would work with Netscrap. If you try to view the same page using
Netscape, the tab menu won't appear because I guess they haven't or didn't want it to work with
it. Please help...this would be a nice code to submit on DynamicDrive :-)

Thanks
rouxjeanAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

archrajanCommented:
0
archrajanCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
<!--
A:link, A:active, A:visited {color:navy; text-decoration:none; font-weight:bold; font-size:12pt; font-family:garamond}
A:hover {color:blue; text-decoration:underline; font-weight:bold; font-size:12pt; font-family:garamond}

.thistab
 {
      font-family:garamond;
      font-size:10pt;
      font-weight: bold;
      text-align:center;
      color: navy;
      background:#ddeeff;
      border-top: solid thin white;
      border-right: solid thin none;
      border-left: solid thin white;
      border-bottom: solid thin #ddeeff;
      cursor:hand;
      visibility:show;
      z-index:1;
      }
.tab
 {
      font-family:garamond;
      font-size:10pt;
      font-weight: bold;
      text-align:center;
      background:#aabbff;
      color: navy;
      border-top: solid thin white;
      border-right: none thin white;
      border-left: solid thin white;
      border-bottom: thin white;
      cursor:hand;
      visibility:show;
      z-index:20
      }
.contents
      {
      text-align:center;
      background:#ddeeff;
      border-left: solid thin white;
      position:absolute;
      visibility:show;
      left:250px;
      top:130px;
      width:500px;
      height:200px;
      }
-->
</style>

</HEAD>

<BODY>
<script>

if (document.all) {navigator.family = "ie4"}
if (window.navigator.userAgent.toLowerCase().match(/gecko/)) {navigator.family = "gecko"}
if (window.navigator.userAgent.toLowerCase().indexOf('opera') != -1) {navigator.family = 'opera';}

toplevel="4";

function DoChanges(num)
{
toplevel++;
var box = "box" + num;

if (navigator.family == "ie4")
{
document.all[box].style.zIndex = toplevel;

i=1;
for (i=1; i<8; i++)
{
var mytab="tab" + i;
document.all(mytab).className = "tab";
if (i == num)
{
document.all(mytab).className = "thistab";
}
}
}

if (navigator.family == "opera" || navigator.family == "gecko")
{
document.getElementById(box).style.zIndex = toplevel;
i=1;
for (i=1; i<8; i++)
{
var mytab="tab" + i;
document.getElementById(mytab).className = "tab";
if (i == num)
{
document.getElementById(mytab).className = "thistab";
}
}
}
}
</script>

<DIV STYLE="position:absolute; top:100; height:300; width:500px; left:250;">
<TABLE STYLE="width:100%" CELLPADDING=0 CELLSPACING=0>
 <TR>
  <TD id="tab1" class=thistab onclick="javascript:DoChanges(1);" height=30>Tab 1 Title</TD>
  <TD id="tab2" class=tab onclick="javascript:DoChanges(2)">Tab 2 Title</TD>
  <TD id="tab3" class=tab onclick="javascript:DoChanges(3)">Tab 3 Title</TD>
  <TD id="tab4" class=tab onclick="javascript:DoChanges(4)">Tab 4 Title</TD>
  <TD id="tab5" class=tab onclick="javascript:DoChanges(5)">Tab 5 Title</TD>
  <TD id="tab6" class=tab onclick="javascript:DoChanges(6)">Tab 6 Title</TD>
  <TD id="tab7" class=tab style="border-right: solid thin white" onclick="javascript:DoChanges(7)">Tab 7 Title</TD>
 </TR>
</TABLE>
</div>

<div class=contents id="box1"  style="z-index:2">
Your Box 1 HTML goes here
 </div>

<div id="box2" class=contents style="z-index:1; background-color:#ddeeff">
Your Box 2 HTML goes here
</div>
<div id="box3" class=contents style="z-index:1">
Your Box 3 HTML goes here
</div>

<div id="box4" class=contents style="z-index:1">
Your Box 4 HTML goes here
</div>

<div id="box5" class=contents style="z-index:1;">
Your Box 5 HTML goes here
</div>

<div id="box6" class=contents style="z-index:1;">
Your Box 6 HTML goes here
</div>

<div id="box7" class=contents style="z-index:1;">
Your Box 7 HTML goes here
</div>

</BODY>
</HTML>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

rouxjeanAuthor Commented:
archrajan: really nice links ! I want to avoid amazon onmouseover tabs because they are glitchering on slow computer/internet connection...and even on not-so-slow computer/internet connection like mine. I'll test the other ones at home where I can play with Netscape. However, I am still totally clueless as of how to recreate the nice effect seen on yahoo !!!
0
archrajanCommented:
thats just playing with colors.. i shall giv a try
0
archrajanCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
<!--
A:link, A:active, A:visited {color:navy; text-decoration:none; font-weight:bold; font-size:12pt; font-family:garamond}
A:hover {color:blue; text-decoration:underline; font-weight:bold; font-size:12pt; font-family:garamond}

.thistab
 {
     font-family:garamond;
     font-size:10pt;
     font-weight: bold;
     text-align:center;
     color: navy;
     background:#ddeeff;
     border-top: solid thin white;
     border-right: solid thin none;
     border-left: solid thin white;
     border-bottom: solid thin #ddeeff;
     cursor:hand;
     visibility:show;
     z-index:1;
     }
.tab
 {
     font-family:garamond;
     font-size:10pt;
     font-weight: bold;
     text-align:center;
     background:#aabbff;
     color: navy;
     border-top: solid thin white;
     border-right: none thin white;
     border-left: solid thin white;
     border-bottom: thin white;
     cursor:hand;
     visibility:show;
     z-index:20
     }
.contents
     {
     text-align:center;
     background:#ddeeff;
     border-left: solid thin white;
     position:absolute;
     visibility:show;
     left:250px;
     top:130px;
     width:500px;
     height:200px;
     }
-->
</style>

</HEAD>

<BODY>
<script>

if (document.all) {navigator.family = "ie4"}
if (window.navigator.userAgent.toLowerCase().match(/gecko/)) {navigator.family = "gecko"}
if (window.navigator.userAgent.toLowerCase().indexOf('opera') != -1) {navigator.family = 'opera';}

toplevel="4";

function DoChanges(num)
{
toplevel++;
var box = "box" + num;

if (navigator.family == "ie4")
{
document.all[box].style.zIndex = toplevel;

i=1;
for (i=1; i<8; i++)
{
var mytab="tab" + i;
document.all(mytab).className = "tab";
if (i == num)
{
document.all(mytab).className = "thistab";
}
}
}

if (navigator.family == "opera" || navigator.family == "gecko")
{
document.getElementById(box).style.zIndex = toplevel;
i=1;
for (i=1; i<8; i++)
{
var mytab="tab" + i;
document.getElementById(mytab).className = "tab";
if (i == num)
{
document.getElementById(mytab).className = "thistab";
}
}
}
}
</script>

<DIV STYLE="position:absolute; top:100; height:300; width:500px; left:250;">
<TABLE STYLE="width:100%" CELLPADDING=0 CELLSPACING=0>
 <TR>
  <TD id="tab1" class=thistab onclick="javascript:DoChanges(1);" height=30 style = "background-color:lightblue">Tab 1 Title</TD>
  <TD id="tab2" class=tab onclick="javascript:DoChanges(2)" style = "background-color:yellow" >Tab 2 Title</TD>
  <TD id="tab3" class=tab onclick="javascript:DoChanges(3)" style = "background-color:lightgreen">Tab 3 Title</TD>
  <TD id="tab4" class=tab onclick="javascript:DoChanges(4)" style = "background-color:orange">Tab 4 Title</TD>
  <TD id="tab5" class=tab onclick="javascript:DoChanges(5)" style = "background-color:red">Tab 5 Title</TD>
  <TD id="tab6" class=tab onclick="javascript:DoChanges(6)" style = "background-color:green">Tab 6 Title</TD>
  <TD id="tab7" class=tab style="border-right: solid thin white" onclick="javascript:DoChanges(7)">Tab 7 Title</TD>
 </TR>
</TABLE>
</div>

<div class=contents id="box1"  style="z-index:2;background-color:lightblue">
Your Box 1 HTML goes here
 </div>

<div id="box2" class=contents style="z-index:1; background-color:yellow">
Your Box 2 HTML goes here
</div>
<div id="box3" class=contents style="z-index:1;background-color:lightgreen" >
Your Box 3 HTML goes here
</div>

<div id="box4" class=contents style="z-index:1;background-color:orange">
Your Box 4 HTML goes here
</div>

<div id="box5" class=contents style="z-index:1;background-color:red">
Your Box 5 HTML goes here
</div>

<div id="box6" class=contents style="z-index:1;background-color:green">
Your Box 6 HTML goes here
</div>

<div id="box7" class=contents style="z-index:1;">
Your Box 7 HTML goes here
</div>

</BODY>
</HTML>
0
archrajanCommented:
this is a more clear version
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
<!--
A:link, A:active, A:visited {color:navy; text-decoration:none; font-weight:bold; font-size:12pt; font-family:garamond}
A:hover {color:blue; text-decoration:underline; font-weight:bold; font-size:12pt; font-family:garamond}

.thistab
 {
     font-family:garamond;
     font-size:10pt;
     font-weight: bold;
     text-align:center;
     color: navy;
     background:#ddeeff;
     
     cursor:hand;
     visibility:show;
     z-index:1;
     }
.tab
 {
     font-family:garamond;
     font-size:10pt;
     font-weight: bold;
     text-align:center;
     background:#aabbff;
     color: navy;
   
 
   
   
     cursor:hand;
     visibility:show;
     z-index:20
     }
.contents
     {
     text-align:center;
     background:#ddeeff;
   
     position:absolute;
     visibility:show;
     left:250px;
     top:130px;
     width:500px;
     height:200px;
     }
-->
</style>

</HEAD>

<BODY>
<script>

if (document.all) {navigator.family = "ie4"}
if (window.navigator.userAgent.toLowerCase().match(/gecko/)) {navigator.family = "gecko"}
if (window.navigator.userAgent.toLowerCase().indexOf('opera') != -1) {navigator.family = 'opera';}

toplevel="4";

function DoChanges(num)
{
toplevel++;
var box = "box" + num;

if (navigator.family == "ie4")
{
document.all[box].style.zIndex = toplevel;

i=1;
for (i=1; i<8; i++)
{
var mytab="tab" + i;
document.all(mytab).className = "tab";
if (i == num)
{
document.all(mytab).className = "thistab";
}
}
}

if (navigator.family == "opera" || navigator.family == "gecko")
{
document.getElementById(box).style.zIndex = toplevel;
i=1;
for (i=1; i<8; i++)
{
var mytab="tab" + i;
document.getElementById(mytab).className = "tab";
if (i == num)
{
document.getElementById(mytab).className = "thistab";
}
}
}
}
</script>

<DIV STYLE="position:absolute; top:100; height:300; width:500px; left:250;">
<TABLE STYLE="width:100%" CELLPADDING=0 CELLSPACING=0>
 <TR>
  <TD id="tab1" class=thistab onclick="javascript:DoChanges(1);" height=30 style = "background-color:lightblue">Tab 1 Title</TD>
  <TD id="tab2" class=tab onclick="javascript:DoChanges(2)" style = "background-color:yellow" >Tab 2 Title</TD>
  <TD id="tab3" class=tab onclick="javascript:DoChanges(3)" style = "background-color:lightgreen">Tab 3 Title</TD>
  <TD id="tab4" class=tab onclick="javascript:DoChanges(4)" style = "background-color:orange">Tab 4 Title</TD>
  <TD id="tab5" class=tab onclick="javascript:DoChanges(5)" style = "background-color:red">Tab 5 Title</TD>
  <TD id="tab6" class=tab onclick="javascript:DoChanges(6)" style = "background-color:green">Tab 6 Title</TD>
  <TD id="tab7" class=tab style="border-right: solid thin white" onclick="javascript:DoChanges(7)">Tab 7 Title</TD>
 </TR>
</TABLE>
</div>

<div class=contents id="box1"  style="z-index:2;background-color:lightblue">
Your Box 1 HTML goes here
 </div>

<div id="box2" class=contents style="z-index:1; background-color:yellow">
Your Box 2 HTML goes here
</div>
<div id="box3" class=contents style="z-index:1;background-color:lightgreen" >
Your Box 3 HTML goes here
</div>

<div id="box4" class=contents style="z-index:1;background-color:orange">
Your Box 4 HTML goes here
</div>

<div id="box5" class=contents style="z-index:1;background-color:red">
Your Box 5 HTML goes here
</div>

<div id="box6" class=contents style="z-index:1;background-color:green">
Your Box 6 HTML goes here
</div>

<div id="box7" class=contents style="z-index:1;">
Your Box 7 HTML goes here
</div>

</BODY>
</HTML>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rouxjeanAuthor Commented:
archrajan: i don't want to sound like an ass...but I can do this, thing I I'm not able to figure out is the arrow thingy...
0
archrajanCommented:
thats two different images ...
0
rouxjeanAuthor Commented:
archrajan: So would you be able to make it work with Netscape then ?
0
archrajanCommented:
already www.yahoo.com works in netscape for me..
it works in fine
0
archrajanCommented:
and my code also works in netscape
0
rouxjeanAuthor Commented:
archrajan: what version are you using ?
0
DLancyCommented:
I have code for tabs at my site also:

http://www.geocities.com/douglancy
0
archrajanCommented:
netscape 7
0
rouxjeanAuthor Commented:
The arrow thingy nor the tab menu are showing up on my Netscape 7...you can see them ??
0
archrajanCommented:
yeah i can see it on netscape guess my version is 7.1
it works fine in firefox also
0
rouxjeanAuthor Commented:
weird, I guess it's my computer then...i'm using the same version.
Sometimes I'm wondering if my computer is not cursed :-S
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.