getElementById and Firefox

T

the other john

I came across a third party script I want to learn how to configure as
well as learn more dhtml in the doing. I'm not much of a JS guy yet
but I'm working on it.

This script works fine in IE6 but is a dead fish in FireFox. There is
no support offered on the site where it came from. I'd really
appreciate help with this as it will not only to get it working but to
learn how it all works so I can add it to my repertoire.

Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Menu Bar</title>
<style type="text/css">
body {margin:0px; width:100%;}
#tb {position:relative; visibility:hidden;}
#tb a {color:#006699; text-decoration:none; font-size:16px;
font-weight:bold;}
#tb a:hover {color:blue; text-decoration:underline; font-size:16px;
font-weight:bold;}
#content{position:relative; width:100%; height:24px;
background-color:#006699;}
#menu1 {position:absolute; left:20px; top:0px;}
#menu2 {position:absolute; left:90px; top:0px;}
#menu3 {position:absolute; left:200px; top:0px;}
#menu4 {position:absolute; left:320px; top:0px;}
#menu5 {position:absolute; left:420px; top:0px;}
..menu {position:relative; cursor:pointer; font-weight:bold;
color:#ffffff; padding:2px; z-index:999;}
..sub {position:relative; width:120px; background-color:#000000;
visibility:hidden; cursor:pointer; padding:7px; z-index:999;}
..sub a {color:#ffffff; text-decoration:none;
font-family:tahoma,arial,helvetica,sans-serif; font-size:12px;}
..sub a:hover{color:#ff0000; text-decoration:none;
font-family:tahoma,arial,helvetica,sans-serif; font-size:12px;}
</style>
<script type="text/javascript">
/*
Script made by Martial Boissonneault © 2002-2003
http://getElementById.com/
This script may be used and changed freely as long as this msg is
intact
Visit http://getElementById.com/ for more free scripts and tutorials.
*/
var ie5 = (document.getElementById && document.all);
var ns6 = (document.getElementById && !document.all);

// there are 25 differents effects you can use.
// to change the duration of the effect, change the duration number.
"Duration=2" => 2 seconds
var fade = "blendTrans(Duration=1.2)";
var boxIn = "revealTrans(Duration=0.7,Transition=0)";
var boxOut = "revealTrans(Duration=0.3,Transition=1)";
var circleIn ="revealTrans(Duration=0.7,Transition=2)";
var circleOut ="revealTrans(Duration=0.7,Transition=3)";
var wipeUp = "revealTrans(Duration=0.5,Transition=4)";
var wipeDown = "revealTrans(Duration=0.5,Transition=5)";
var wipeRight = "revealTrans(Duration=0.5,Transition=6)";
var wipeLeft = "revealTrans(Duration=0.5,Transition=7)";
var verticalblinds = "revealTrans(Duration=0.7,Transition=8)";
var horizontalblinds = "revealTrans(Duration=0.7,Transition=9)";
var checkerboardAcross = "revealTrans(Duration=0.7,Transition=10)";
var checkerboardDown = "revealTrans(Duration=0.7,Transition=11)";
var dissolve = "revealTrans(Duration=0.7,Transition=12)";
var splitVerticalIn = "revealTrans(Duration=0.5, Transition=13)";
var splitVerticalOut = "revealTrans(Duration=0.3, Transition=14)";
var splitHorizontalIn = "revealTrans(Duration=0.7, Transition=15)";
var splitHorizontalOut = "revealTrans(Duration=0.3, Transition=16)";
var stripsLeftDown = "revealTrans(Duration=0.7, Transition=17)";
var stripsLeftUp = "revealTrans(Duration=0.7, Transition=18)";
var stripsRightDown = "revealTrans(Duration=0.7,Transition=19)";
var stripsRightUp = "revealTrans(Duration=0.7,Transition=20)";
var randomBarsHorizontal = "revealTrans(Duration=0.7,Transition=21)";
var randomBarsVertical = "revealTrans(Duration=0.7,Transition=22)";
var random = "revealTrans(Duration=0.7,Transition=23)";

var myEffect = splitVerticalOut;

function showFilter(obj, visibility) {
if(ie5){
menu[obj].style.filter = myEffect; // set your effect from one of the
top 25 differents effects
menu[obj].filters[0].Apply();
menu[obj].style.visibility = visibility;
menu[obj].filters[0].Play();
}
else if(ns6){
menu[obj].style.visibility = visibility;
}
}

function showHide(obj, visibility) {
if(ie5 || ns6){
menu[obj].style.visibility = visibility;
}
}

function menuBarInit() {
if(ie5 || ns6){
menu = document.getElementsByTagName("div");
}
}

function MakeActive(num) {
if(ie5 || ns6) {
for(i=0;i<lnk.length;i++) {
lnk.style.color = "#006699";
lnk[num].style.color = "red";
}
}
}

function makeActiveInit() {
if(ie5 || ns6){
lnk = document.getElementById("tb").getElementsByTagName("a");
for(i=0;i<lnk.length;i++){
lnk.onfocus=new Function("if(this.blur)this.blur()");
lnk[16].style.color = "red";
}
}
if(ie5)
document.getElementById("tb").style.visibility = "visible";
}
</script>
</head>
<body onload="menuBarInit();makeActiveInit()">
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<div id="content">
<span id="menu1">
<div class="menu" id="menuTitle1"
onmouseover="showFilter('subMenu1','visible')"
onmouseout="showHide('subMenu1','hidden')">home</div>
<div class="sub" id="subMenu1"
onmouseover="showHide('subMenu1','visible')"
onmouseout="showHide('subMenu1','hidden')">
<a href="http://kinane.net">English Version</a><br>
<a href="#">French Version</a><br>
</div>
</span>


<span id="menu2">
<div class="menu" id="menuTitle2"
onmouseover="showFilter('subMenu2','visible')"
onmouseout="showHide('subMenu2','hidden')">dhtml scripts</div>
<div class="sub" id="subMenu2"
onmouseover="showHide('subMenu2','visible')"
onmouseout="showHide('subMenu2','hidden')">
<a href="#">Fading Tooltips </a><br>
<a href="#">DOM Window</a><br>
<a href="#">Zoom Intro</a><br>
<a href="#">Scrolling Page</a><br>
<a href="#">Loading Message</a><br>
</div>
</span>

<span id="menu3">
<div class="menu" id="menuTitle3"
onmouseover="showFilter('subMenu3','visible')"
onmouseout="showHide('subMenu3','hidden')">dhtml tutorials</div>
<div class="sub" id="subMenu3"
onmouseover="showHide('subMenu3','visible')"
onmouseout="showHide('subMenu3','hidden')">
<a href="#"><nobr>Capture Document Size </nobr></a><br>
<a href="#">InnerHTML</a><br>
<a href="#"><nobr>Change Font-Family</nobr></a><br>
</div>
</span>

<span id="menu4">
<div class="menu" id="menuTitle4"
onmouseover="showFilter('subMenu4','visible')"
onmouseout="showHide('subMenu4','hidden')">resources</div>
<div class="sub" id="subMenu4"
onmouseover="showHide('subMenu4','visible')"
onmouseout="showHide('subMenu4','hidden')">
<a href="#"><nobr>See resources list</nobr></a><br>
<a href="#">Add a resources</a><br>
</div>
</span>

<span id="menu5">
<div class="menu" id="menuTitle5"
onmouseover="showFilter('subMenu5','visible')"
onmouseout="showHide('subMenu5','hidden')">forums</div>
<div class="sub" id="subMenu5"
onmouseover="showHide('subMenu5','visible')"
onmouseout="showHide('subMenu5','hidden')">
<a href="#">See All Forums</a><br>
<a href="#"><nobr>Cascading Style Sheets </nobr></a><br>
<a href="#">Javascript</a><br>
<a href="#">DHTML Tutorials</a><br>
<a href="#">DHTML Scripts</a><br>
<a href="#"><nobr>General DHTML issues </nobr></a><br>
<a href="#">Off-topic</a><br>
</div>
</span>
</div>
</td>
</tr>
</table>
<br><br><br><br><br><br><br>
<table id="tb" border=1 bordercolor="#c0c0c0" align="center"
cellpadding=5 cellspacing=1>
<tr>
<td><a href="#"
onclick="MakeActive(0);myEffect=random">random</a></td>
<td><a href="#"
onclick="MakeActive(1);myEffect=fade">fade</a></td>
<td><a href="#"
onclick="MakeActive(2);myEffect=boxIn">boxIn</a></td>
<td><a href="#"
onclick="MakeActive(3);myEffect=boxOut">boxOut</a></td>
<td><a href="#"
onclick="MakeActive(4);myEffect=circleIn">circleIn</a></td>
</tr>
<tr>
<td><a href="#" onclick="MakeActive(5);myEffect=circleOut
">circleOut </a></td>
<td><a href="#"
onclick="MakeActive(6);myEffect=wipeUp">wipeUp</a></td>
<td><a href="#"
onclick="MakeActive(7);myEffect=wipeDown">wipeDown</a></td>
<td><a href="#"
onclick="MakeActive(8);myEffect=wipeRight">wipeRight</a></td>
<td><a href="#"
onclick="MakeActive(9);myEffect=wipeLeft">wipeLeft</a></td>
</tr>
<tr>
<td><a href="#" onclick="MakeActive(10);myEffect=verticalblinds
">verticalblinds </a></td>
<td><a href="#"
onclick="MakeActive(11);myEffect=horizontalblinds">horizontalblinds</a></td>
<td><a href="#"
onclick="MakeActive(12);myEffect=checkerboardAcross">checkerboardAcross</a></td>
<td><a href="#"
onclick="MakeActive(13);myEffect=checkerboardDown">checkerboardDown</a></td>
<td><a href="#"
onclick="MakeActive(14);myEffect=dissolve">dissolve</a></td>
</tr>
<tr>
<td><a href="#" onclick="MakeActive(15);myEffect=splitVerticalIn
">splitVerticalIn </a></td>
<td><a href="#"
onclick="MakeActive(16);myEffect=splitVerticalOut">splitVerticalOut</a></td>
<td><a href="#"
onclick="MakeActive(17);myEffect=splitHorizontalIn">splitHorizontalIn</a></td>
<td><a href="#"
onclick="MakeActive(18);myEffect=splitHorizontalOut">splitHorizontalOut</a></td>
<td><a href="#"
onclick="MakeActive(19);myEffect=stripsLeftDown">stripsLeftDown</a></td>
</tr>
<tr>
<td><a href="#"
onclick="MakeActive(20);myEffect=stripsLeftUp">stripsLeftUp</a></td>
<td><a href="#"
onclick="MakeActive(21);myEffect=stripsRightDown">stripsRightDown</a></td>
<td><a href="#"
onclick="MakeActive(22);myEffect=stripsRightUp">stripsRightUp</a></td>
<td><a href="#"
onclick="MakeActive(23);myEffect=randomBarsHorizontal">randomBarsHorizontal</a></td>
<td><a href="#"
onclick="MakeActive(24);myEffect=randomBarsVertical">randomBarsVertical</a></td>
</tr>
</table>

</body>
</html>
 
V

VK

the said:
I came across a third party script I want to learn how to configure as
well as learn more dhtml in the doing. I'm not much of a JS guy yet
but I'm working on it.

This script works fine in IE6 but is a dead fish in FireFox.
Click to expand...

After I removed extra wraps in two long comment lines, it works fine in
Firefox 1.5: means on hover it opens menu, on out it closes it. I don't
know if it supposes to do anything else, but this it does.

In the posted code you had:

// very very long comment line

which was wrapped as

// very very long
comment line

and it was breaking the parser.

The corrected code is posted below (I hope it will not be wrapped once
again somewhere) .
For future references: Firefox has a very nice JavaScript console. Next
time something is wrong, try first:
1) Tool > JavaScript Console
2) Most probably it will be filled up with different errors from
different pages you collected while browsing the far-of-being-perfect
Web :)
So first press Clear, close the console, reload the offending page and
open the console again. Now it will contain the errors just registered
for this page.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Menu Bar</title>
<style type="text/css">
body {margin:0px; width:100%;}
#tb {position:relative; visibility:hidden;}
#tb a {color:#006699; text-decoration:none; font-size:16px;
font-weight:bold;}
#tb a:hover {color:blue; text-decoration:underline; font-size:16px;
font-weight:bold;}
#content{position:relative; width:100%; height:24px;
background-color:#006699;}
#menu1 {position:absolute; left:20px; top:0px;}
#menu2 {position:absolute; left:90px; top:0px;}
#menu3 {position:absolute; left:200px; top:0px;}
#menu4 {position:absolute; left:320px; top:0px;}
#menu5 {position:absolute; left:420px; top:0px;}
..menu {position:relative; cursor:pointer; font-weight:bold;
color:#ffffff; padding:2px; z-index:999;}
..sub {position:relative; width:120px; background-color:#000000;
visibility:hidden; cursor:pointer; padding:7px; z-index:999;}
..sub a {color:#ffffff; text-decoration:none;
font-family:tahoma,arial,helvetica,sans-serif; font-size:12px;}
..sub a:hover{color:#ff0000; text-decoration:none;
font-family:tahoma,arial,helvetica,sans-serif; font-size:12px;}
</style>
<script type="text/javascript">
/*
Script made by Martial Boissonneault © 2002-2003
http://getElementById.com/
This script may be used and changed freely as long as this msg is
intact
Visit http://getElementById.com/ for more free scripts and tutorials.
*/
var ie5 = (document.getElementById && document.all);
var ns6 = (document.getElementById && !document.all);

// there are 25 differents effects you can use.
// to change the duration of the effect, change the duration number.
var fade = "blendTrans(Duration=1.2)";
var boxIn = "revealTrans(Duration=0.7,Transition=0)";
var boxOut = "revealTrans(Duration=0.3,Transition=1)";
var circleIn ="revealTrans(Duration=0.7,Transition=2)";
var circleOut ="revealTrans(Duration=0.7,Transition=3)";
var wipeUp = "revealTrans(Duration=0.5,Transition=4)";
var wipeDown = "revealTrans(Duration=0.5,Transition=5)";
var wipeRight = "revealTrans(Duration=0.5,Transition=6)";
var wipeLeft = "revealTrans(Duration=0.5,Transition=7)";
var verticalblinds = "revealTrans(Duration=0.7,Transition=8)";
var horizontalblinds = "revealTrans(Duration=0.7,Transition=9)";
var checkerboardAcross = "revealTrans(Duration=0.7,Transition=10)";
var checkerboardDown = "revealTrans(Duration=0.7,Transition=11)";
var dissolve = "revealTrans(Duration=0.7,Transition=12)";
var splitVerticalIn = "revealTrans(Duration=0.5, Transition=13)";
var splitVerticalOut = "revealTrans(Duration=0.3, Transition=14)";
var splitHorizontalIn = "revealTrans(Duration=0.7, Transition=15)";
var splitHorizontalOut = "revealTrans(Duration=0.3, Transition=16)";
var stripsLeftDown = "revealTrans(Duration=0.7, Transition=17)";
var stripsLeftUp = "revealTrans(Duration=0.7, Transition=18)";
var stripsRightDown = "revealTrans(Duration=0.7,Transition=19)";
var stripsRightUp = "revealTrans(Duration=0.7,Transition=20)";
var randomBarsHorizontal = "revealTrans(Duration=0.7,Transition=21)";
var randomBarsVertical = "revealTrans(Duration=0.7,Transition=22)";
var random = "revealTrans(Duration=0.7,Transition=23)";

var myEffect = splitVerticalOut;

function showFilter(obj, visibility) {
if(ie5){
menu[obj].style.filter = myEffect;
menu[obj].filters[0].Apply();
menu[obj].style.visibility = visibility;
menu[obj].filters[0].Play();
}
else if(ns6){
menu[obj].style.visibility = visibility;
}

}

function showHide(obj, visibility) {
if(ie5 || ns6){
menu[obj].style.visibility = visibility;
}

}

function menuBarInit() {
if(ie5 || ns6){
menu = document.getElementsByTagName("div");
}

}

function MakeActive(num) {
if(ie5 || ns6) {
for(i=0;i<lnk.length;i++) {
lnk.style.color = "#006699";
lnk[num].style.color = "red";
}
}

}

function makeActiveInit() {
if(ie5 || ns6){
lnk =
document.getElementById("tb").getElementsByTagName("a");
for(i=0;i<lnk.length;i++){
lnk.onfocus=new
Function("if(this.blur)this.blur()");
lnk[16].style.color = "red";
}
}
if(ie5)
document.getElementById("tb").style.visibility = "visible";
}

</script>
</head>
<body onLoad="menuBarInit();makeActiveInit()">
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<div id="content">
<span id="menu1">
<div class="menu"
id="menuTitle1"
onMouseOver="showFilter('subMenu1','visible')"
onMouseOut="showHide('subMenu1','hidden')">home</div>
<div class="sub" id="subMenu1"
onMouseOver="showHide('subMenu1','visible')"
onMouseOut="showHide('subMenu1','hidden')">
<a
href="http://kinane.net">English Version</a><br>
<a href="#">French
Version</a><br>
</div>
</span>

<span id="menu2">
<div class="menu"
id="menuTitle2"
onMouseOver="showFilter('subMenu2','visible')"
onMouseOut="showHide('subMenu2','hidden')">dhtml scripts</div>
<div class="sub" id="subMenu2"
onMouseOver="showHide('subMenu2','visible')"
onMouseOut="showHide('subMenu2','hidden')">
<a href="#">Fading
Tooltips </a><br>
<a href="#">DOM
Window</a><br>
<a href="#">Zoom
Intro</a><br>
<a href="#">Scrolling
Page</a><br>
<a href="#">Loading
Message</a><br>
</div>
</span>

<span id="menu3">
<div class="menu"
id="menuTitle3"
onMouseOver="showFilter('subMenu3','visible')"
onMouseOut="showHide('subMenu3','hidden')">dhtml tutorials</div>
<div class="sub" id="subMenu3"
onMouseOver="showHide('subMenu3','visible')"
onMouseOut="showHide('subMenu3','hidden')">
<a
href="#"><nobr>Capture Document Size </nobr></a><br>
<a
href="#">InnerHTML</a><br>
<a
href="#"><nobr>Change Font-Family</nobr></a><br>
</div>
</span>

<span id="menu4">
<div class="menu"
id="menuTitle4"
onMouseOver="showFilter('subMenu4','visible')"
onMouseOut="showHide('subMenu4','hidden')">resources</div>
<div class="sub" id="subMenu4"
onMouseOver="showHide('subMenu4','visible')"
onMouseOut="showHide('subMenu4','hidden')">
<a href="#"><nobr>See
resources list</nobr></a><br>
<a href="#">Add a
resources</a><br>
</div>
</span>

<span id="menu5">
<div class="menu"
id="menuTitle5"
onMouseOver="showFilter('subMenu5','visible')"
onMouseOut="showHide('subMenu5','hidden')">forums</div>
<div class="sub" id="subMenu5"
onMouseOver="showHide('subMenu5','visible')"
onMouseOut="showHide('subMenu5','hidden')">
<a href="#">See All
Forums</a><br>
<a
href="#"><nobr>Cascading Style Sheets </nobr></a><br>
<a
href="#">Javascript</a><br>
<a href="#">DHTML
Tutorials</a><br>
<a href="#">DHTML
Scripts</a><br>
<a
href="#"><nobr>General DHTML issues </nobr></a><br>
<a
href="#">Off-topic</a><br>
</div>
</span>
</div>
</td>
</tr>
</table>
<br><br><br><br><br><br><br>
<table id="tb" border=1 bordercolor="#c0c0c0" align="center"
cellpadding=5 cellspacing=1>
<tr>
<td><a href="#"
onClick="MakeActive(0);myEffect=random">random</a></td>
<td><a href="#"
onClick="MakeActive(1);myEffect=fade">fade</a></td>
<td><a href="#"
onClick="MakeActive(2);myEffect=boxIn">boxIn</a></td>
<td><a href="#"
onClick="MakeActive(3);myEffect=boxOut">boxOut</a></td>
<td><a href="#"
onClick="MakeActive(4);myEffect=circleIn">circleIn</a></td>
</tr>
<tr>
<td><a href="#" onClick="MakeActive(5);myEffect=circleOut
">circleOut </a></td>
<td><a href="#"
onClick="MakeActive(6);myEffect=wipeUp">wipeUp</a></td>
<td><a href="#"
onClick="MakeActive(7);myEffect=wipeDown">wipeDown</a></td>
<td><a href="#"
onClick="MakeActive(8);myEffect=wipeRight">wipeRight</a></td>
<td><a href="#"
onClick="MakeActive(9);myEffect=wipeLeft">wipeLeft</a></td>
</tr>
<tr>
<td><a href="#" onClick="MakeActive(10);myEffect=verticalblinds
">verticalblinds </a></td>
<td><a href="#"
onClick="MakeActive(11);myEffect=horizontalblinds">horizontalblinds</a></td>
<td><a href="#"
onClick="MakeActive(12);myEffect=checkerboardAcross">checkerboardAcross</a></td>
<td><a href="#"
onClick="MakeActive(13);myEffect=checkerboardDown">checkerboardDown</a></td>
<td><a href="#"
onClick="MakeActive(14);myEffect=dissolve">dissolve</a></td>
</tr>
<tr>
<td><a href="#" onClick="MakeActive(15);myEffect=splitVerticalIn
">splitVerticalIn </a></td>
<td><a href="#"
onClick="MakeActive(16);myEffect=splitVerticalOut">splitVerticalOut</a></td>
<td><a href="#"
onClick="MakeActive(17);myEffect=splitHorizontalIn">splitHorizontalIn</a></td>
<td><a href="#"
onClick="MakeActive(18);myEffect=splitHorizontalOut">splitHorizontalOut</a></td>
<td><a href="#"
onClick="MakeActive(19);myEffect=stripsLeftDown">stripsLeftDown</a></td>
</tr>
<tr>
<td><a href="#"
onClick="MakeActive(20);myEffect=stripsLeftUp">stripsLeftUp</a></td>
<td><a href="#"
onClick="MakeActive(21);myEffect=stripsRightDown">stripsRightDown</a></td>
<td><a href="#"
onClick="MakeActive(22);myEffect=stripsRightUp">stripsRightUp</a></td>
<td><a href="#"
onClick="MakeActive(23);myEffect=randomBarsHorizontal">randomBarsHorizontal</a></td>
<td><a href="#"
onClick="MakeActive(24);myEffect=randomBarsVertical">randomBarsVertical</a></td>
</tr>
</table>

</body>
</html>
 
T

the other john

ok...here's a url to the source..
http://getelementbyid.com/scripts/index.aspx?CodeID=32#

you'll have to view it in IE to see what it does however.....

the said:
I came across a third party script I want to learn how to configure as
well as learn more dhtml in the doing. I'm not much of a JS guy yet
but I'm working on it.

This script works fine in IE6 but is a dead fish in FireFox.
Click to expand...

After I removed extra wraps in two long comment lines, it works fine in
Firefox 1.5: means on hover it opens menu, on out it closes it. I don't
know if it supposes to do anything else, but this it does.

In the posted code you had:

// very very long comment line

which was wrapped as

// very very long
comment line

and it was breaking the parser.

The corrected code is posted below (I hope it will not be wrapped once
again somewhere) .
For future references: Firefox has a very nice JavaScript console. Next
time something is wrong, try first:
1) Tool > JavaScript Console
2) Most probably it will be filled up with different errors from
different pages you collected while browsing the far-of-being-perfect
Web :)
So first press Clear, close the console, reload the offending page and
open the console again. Now it will contain the errors just registered
for this page.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Menu Bar</title>
<style type="text/css">
body {margin:0px; width:100%;}
#tb {position:relative; visibility:hidden;}
#tb a {color:#006699; text-decoration:none; font-size:16px;
font-weight:bold;}
#tb a:hover {color:blue; text-decoration:underline; font-size:16px;
font-weight:bold;}
#content{position:relative; width:100%; height:24px;
background-color:#006699;}
#menu1 {position:absolute; left:20px; top:0px;}
#menu2 {position:absolute; left:90px; top:0px;}
#menu3 {position:absolute; left:200px; top:0px;}
#menu4 {position:absolute; left:320px; top:0px;}
#menu5 {position:absolute; left:420px; top:0px;}
.menu {position:relative; cursor:pointer; font-weight:bold;
color:#ffffff; padding:2px; z-index:999;}
.sub {position:relative; width:120px; background-color:#000000;
visibility:hidden; cursor:pointer; padding:7px; z-index:999;}
.sub a {color:#ffffff; text-decoration:none;
font-family:tahoma,arial,helvetica,sans-serif; font-size:12px;}
.sub a:hover{color:#ff0000; text-decoration:none;
font-family:tahoma,arial,helvetica,sans-serif; font-size:12px;}
</style>
<script type="text/javascript">
/*
Script made by Martial Boissonneault © 2002-2003
http://getElementById.com/
This script may be used and changed freely as long as this msg is
intact
Visit http://getElementById.com/ for more free scripts and tutorials.
*/
var ie5 = (document.getElementById && document.all);
var ns6 = (document.getElementById && !document.all);

// there are 25 differents effects you can use.
// to change the duration of the effect, change the duration number.
var fade = "blendTrans(Duration=1.2)";
var boxIn = "revealTrans(Duration=0.7,Transition=0)";
var boxOut = "revealTrans(Duration=0.3,Transition=1)";
var circleIn ="revealTrans(Duration=0.7,Transition=2)";
var circleOut ="revealTrans(Duration=0.7,Transition=3)";
var wipeUp = "revealTrans(Duration=0.5,Transition=4)";
var wipeDown = "revealTrans(Duration=0.5,Transition=5)";
var wipeRight = "revealTrans(Duration=0.5,Transition=6)";
var wipeLeft = "revealTrans(Duration=0.5,Transition=7)";
var verticalblinds = "revealTrans(Duration=0.7,Transition=8)";
var horizontalblinds = "revealTrans(Duration=0.7,Transition=9)";
var checkerboardAcross = "revealTrans(Duration=0.7,Transition=10)";
var checkerboardDown = "revealTrans(Duration=0.7,Transition=11)";
var dissolve = "revealTrans(Duration=0.7,Transition=12)";
var splitVerticalIn = "revealTrans(Duration=0.5, Transition=13)";
var splitVerticalOut = "revealTrans(Duration=0.3, Transition=14)";
var splitHorizontalIn = "revealTrans(Duration=0.7, Transition=15)";
var splitHorizontalOut = "revealTrans(Duration=0.3, Transition=16)";
var stripsLeftDown = "revealTrans(Duration=0.7, Transition=17)";
var stripsLeftUp = "revealTrans(Duration=0.7, Transition=18)";
var stripsRightDown = "revealTrans(Duration=0.7,Transition=19)";
var stripsRightUp = "revealTrans(Duration=0.7,Transition=20)";
var randomBarsHorizontal = "revealTrans(Duration=0.7,Transition=21)";
var randomBarsVertical = "revealTrans(Duration=0.7,Transition=22)";
var random = "revealTrans(Duration=0.7,Transition=23)";

var myEffect = splitVerticalOut;

function showFilter(obj, visibility) {
if(ie5){
menu[obj].style.filter = myEffect;
menu[obj].filters[0].Apply();
menu[obj].style.visibility = visibility;
menu[obj].filters[0].Play();
}
else if(ns6){
menu[obj].style.visibility = visibility;
}

}

function showHide(obj, visibility) {
if(ie5 || ns6){
menu[obj].style.visibility = visibility;
}

}

function menuBarInit() {
if(ie5 || ns6){
menu = document.getElementsByTagName("div");
}

}

function MakeActive(num) {
if(ie5 || ns6) {
for(i=0;i<lnk.length;i++) {
lnk.style.color = "#006699";
lnk[num].style.color = "red";
}
}

}

function makeActiveInit() {
if(ie5 || ns6){
lnk =
document.getElementById("tb").getElementsByTagName("a");
for(i=0;i<lnk.length;i++){
lnk.onfocus=new
Function("if(this.blur)this.blur()");
lnk[16].style.color = "red";
}
}
if(ie5)
document.getElementById("tb").style.visibility = "visible";
}

</script>
</head>
<body onLoad="menuBarInit();makeActiveInit()">
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<div id="content">
<span id="menu1">
<div class="menu"
id="menuTitle1"
onMouseOver="showFilter('subMenu1','visible')"
onMouseOut="showHide('subMenu1','hidden')">home</div>
<div class="sub" id="subMenu1"
onMouseOver="showHide('subMenu1','visible')"
onMouseOut="showHide('subMenu1','hidden')">
<a
href="http://kinane.net">English Version</a><br>
<a href="#">French
Version</a><br>
</div>
</span>

<span id="menu2">
<div class="menu"
id="menuTitle2"
onMouseOver="showFilter('subMenu2','visible')"
onMouseOut="showHide('subMenu2','hidden')">dhtml scripts</div>
<div class="sub" id="subMenu2"
onMouseOver="showHide('subMenu2','visible')"
onMouseOut="showHide('subMenu2','hidden')">
<a href="#">Fading
Tooltips </a><br>
<a href="#">DOM
Window</a><br>
<a href="#">Zoom
Intro</a><br>
<a href="#">Scrolling
Page</a><br>
<a href="#">Loading
Message</a><br>
</div>
</span>

<span id="menu3">
<div class="menu"
id="menuTitle3"
onMouseOver="showFilter('subMenu3','visible')"
onMouseOut="showHide('subMenu3','hidden')">dhtml tutorials</div>
<div class="sub" id="subMenu3"
onMouseOver="showHide('subMenu3','visible')"
onMouseOut="showHide('subMenu3','hidden')">
<a
href="#"><nobr>Capture Document Size </nobr></a><br>
<a
href="#">InnerHTML</a><br>
<a
href="#"><nobr>Change Font-Family</nobr></a><br>
</div>
</span>

<span id="menu4">
<div class="menu"
id="menuTitle4"
onMouseOver="showFilter('subMenu4','visible')"
onMouseOut="showHide('subMenu4','hidden')">resources</div>
<div class="sub" id="subMenu4"
onMouseOver="showHide('subMenu4','visible')"
onMouseOut="showHide('subMenu4','hidden')">
<a href="#"><nobr>See
resources list</nobr></a><br>
<a href="#">Add a
resources</a><br>
</div>
</span>

<span id="menu5">
<div class="menu"
id="menuTitle5"
onMouseOver="showFilter('subMenu5','visible')"
onMouseOut="showHide('subMenu5','hidden')">forums</div>
<div class="sub" id="subMenu5"
onMouseOver="showHide('subMenu5','visible')"
onMouseOut="showHide('subMenu5','hidden')">
<a href="#">See All
Forums</a><br>
<a
href="#"><nobr>Cascading Style Sheets </nobr></a><br>
<a
href="#">Javascript</a><br>
<a href="#">DHTML
Tutorials</a><br>
<a href="#">DHTML
Scripts</a><br>
<a
href="#"><nobr>General DHTML issues </nobr></a><br>
<a
href="#">Off-topic</a><br>
</div>
</span>
</div>
</td>
</tr>
</table>
<br><br><br><br><br><br><br>
<table id="tb" border=1 bordercolor="#c0c0c0" align="center"
cellpadding=5 cellspacing=1>
<tr>
<td><a href="#"
onClick="MakeActive(0);myEffect=random">random</a></td>
<td><a href="#"
onClick="MakeActive(1);myEffect=fade">fade</a></td>
<td><a href="#"
onClick="MakeActive(2);myEffect=boxIn">boxIn</a></td>
<td><a href="#"
onClick="MakeActive(3);myEffect=boxOut">boxOut</a></td>
<td><a href="#"
onClick="MakeActive(4);myEffect=circleIn">circleIn</a></td>
</tr>
<tr>
<td><a href="#" onClick="MakeActive(5);myEffect=circleOut
">circleOut </a></td>
<td><a href="#"
onClick="MakeActive(6);myEffect=wipeUp">wipeUp</a></td>
<td><a href="#"
onClick="MakeActive(7);myEffect=wipeDown">wipeDown</a></td>
<td><a href="#"
onClick="MakeActive(8);myEffect=wipeRight">wipeRight</a></td>
<td><a href="#"
onClick="MakeActive(9);myEffect=wipeLeft">wipeLeft</a></td>
</tr>
<tr>
<td><a href="#" onClick="MakeActive(10);myEffect=verticalblinds
">verticalblinds </a></td>
<td><a href="#"
onClick="MakeActive(11);myEffect=horizontalblinds">horizontalblinds</a></td>
<td><a href="#"
onClick="MakeActive(12);myEffect=checkerboardAcross">checkerboardAcross</a></td>
<td><a href="#"
onClick="MakeActive(13);myEffect=checkerboardDown">checkerboardDown</a></td>
<td><a href="#"
onClick="MakeActive(14);myEffect=dissolve">dissolve</a></td>
</tr>
<tr>
<td><a href="#" onClick="MakeActive(15);myEffect=splitVerticalIn
">splitVerticalIn </a></td>
<td><a href="#"
onClick="MakeActive(16);myEffect=splitVerticalOut">splitVerticalOut</a></td>
<td><a href="#"
onClick="MakeActive(17);myEffect=splitHorizontalIn">splitHorizontalIn</a></td>
<td><a href="#"
onClick="MakeActive(18);myEffect=splitHorizontalOut">splitHorizontalOut</a></td>
<td><a href="#"
onClick="MakeActive(19);myEffect=stripsLeftDown">stripsLeftDown</a></td>
</tr>
<tr>
<td><a href="#"
onClick="MakeActive(20);myEffect=stripsLeftUp">stripsLeftUp</a></td>
<td><a href="#"
onClick="MakeActive(21);myEffect=stripsRightDown">stripsRightDown</a></td>
<td><a href="#"
onClick="MakeActive(22);myEffect=stripsRightUp">stripsRightUp</a></td>
<td><a href="#"
onClick="MakeActive(23);myEffect=randomBarsHorizontal">randomBarsHorizontal</a></td>
<td><a href="#"
onClick="MakeActive(24);myEffect=randomBarsVertical">randomBarsVertical</a></td>
</tr>
</table>

</body>
</html>
Click to expand...
 
V

VK

the said:
ok...here's a url to the source..
http://getelementbyid.com/scripts/index.aspx?CodeID=32#

you'll have to view it in IE to see what it does however.....
Click to expand...

<q>This menubar display regular sub menu for NS6+ and 25 differents
transitions effects for IE5+.</q>

It means that it's claimed to work as menu for NS6+ AND as menu with 25
different extra goodies in IE5 or higher. On the very first look it
does what is promised. You still have a working menu in Firefox. Of
course you don't have any transition effects there, because they are
achieved over filters which are supported by IE only.
 
T

the other john

Oooh....so that's what it is....so I can't get the transitions to work
out of IE...that's a drag. ;-P so much for learning something useful.
If I can't do it in both IE and FF then it's not going to help me much.


anything out there like this that works with FF?

thanks!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Need help with <rowspan> in an HTML table 1
I Need Help with making a function that draws in a canvas using location data. 1
Sort by number of characters 1
Only one table shows up with the information 2
Angularjs newbie - second JSON datasource does not display 0
Final chapter of "Learn PHP, MySQL and JavaScript" 3
Closing an overlay outside the overlay as well 1

Members online

Total: 68 (members: 1, guests: 67)
Robots: 445

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,820
Latest member
GilbertoA5

Latest Threads

Top