• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 274
  • Last Modified:

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
0
rouxjean
Asked:
rouxjean
  • 11
  • 6
2 Solutions
 
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 11
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now