473,553 Members | 2,934 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

getElementById and Firefox

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:relat ive; visibility:hidd en;}
#tb a {color:#006699; text-decoration:none ; font-size:16px;
font-weight:bold;}
#tb a:hover {color:blue; text-decoration:unde rline; font-size:16px;
font-weight:bold;}
#content{positi on:relative; width:100%; height:24px;
background-color:#006699;}
#menu1 {position:absol ute; left:20px; top:0px;}
#menu2 {position:absol ute; left:90px; top:0px;}
#menu3 {position:absol ute; left:200px; top:0px;}
#menu4 {position:absol ute; left:320px; top:0px;}
#menu5 {position:absol ute; left:420px; top:0px;}
..menu {position:relat ive; cursor:pointer; font-weight:bold;
color:#ffffff; padding:2px; z-index:999;}
..sub {position:relat ive; width:120px; background-color:#000000;
visibility:hidd en; cursor:pointer; padding:7px; z-index:999;}
..sub a {color:#ffffff; text-decoration:none ;
font-family:tahoma,a rial,helvetica, sans-serif; font-size:12px;}
..sub a:hover{color:# ff0000; text-decoration:none ;
font-family:tahoma,a rial,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.getEl ementById && document.all);
var ns6 = (document.getEl ementById && !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(Dur ation=1.2)";
var boxIn = "revealTrans(Du ration=0.7,Tran sition=0)";
var boxOut = "revealTrans(Du ration=0.3,Tran sition=1)";
var circleIn ="revealTrans(D uration=0.7,Tra nsition=2)";
var circleOut ="revealTrans(D uration=0.7,Tra nsition=3)";
var wipeUp = "revealTrans(Du ration=0.5,Tran sition=4)";
var wipeDown = "revealTrans(Du ration=0.5,Tran sition=5)";
var wipeRight = "revealTrans(Du ration=0.5,Tran sition=6)";
var wipeLeft = "revealTrans(Du ration=0.5,Tran sition=7)";
var verticalblinds = "revealTrans(Du ration=0.7,Tran sition=8)";
var horizontalblind s = "revealTrans(Du ration=0.7,Tran sition=9)";
var checkerboardAcr oss = "revealTrans(Du ration=0.7,Tran sition=10)";
var checkerboardDow n = "revealTrans(Du ration=0.7,Tran sition=11)";
var dissolve = "revealTrans(Du ration=0.7,Tran sition=12)";
var splitVerticalIn = "revealTrans(Du ration=0.5, Transition=13)" ;
var splitVerticalOu t = "revealTrans(Du ration=0.3, Transition=14)" ;
var splitHorizontal In = "revealTrans(Du ration=0.7, Transition=15)" ;
var splitHorizontal Out = "revealTrans(Du ration=0.3, Transition=16)" ;
var stripsLeftDown = "revealTrans(Du ration=0.7, Transition=17)" ;
var stripsLeftUp = "revealTrans(Du ration=0.7, Transition=18)" ;
var stripsRightDown = "revealTrans(Du ration=0.7,Tran sition=19)";
var stripsRightUp = "revealTrans(Du ration=0.7,Tran sition=20)";
var randomBarsHoriz ontal = "revealTrans(Du ration=0.7,Tran sition=21)";
var randomBarsVerti cal = "revealTrans(Du ration=0.7,Tran sition=22)";
var random = "revealTrans(Du ration=0.7,Tran sition=23)";

var myEffect = splitVerticalOu t;

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.visibili ty = visibility;
menu[obj].filters[0].Play();
}
else if(ns6){
menu[obj].style.visibili ty = visibility;
}
}

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

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

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

function makeActiveInit( ) {
if(ie5 || ns6){
lnk = document.getEle mentById("tb"). getElementsByTa gName("a");
for(i=0;i<lnk.l ength;i++){
lnk[i].onfocus=new Function("if(th is.blur)this.bl ur()");
lnk[16].style.color = "red";
}
}
if(ie5)
document.getEle mentById("tb"). style.visibilit y = "visible";
}
</script>
</head>
<body onload="menuBar Init();makeActi veInit()">
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<div id="content">
<span id="menu1">
<div class="menu" id="menuTitle1 "
onmouseover="sh owFilter('subMe nu1','visible') "
onmouseout="sho wHide('subMenu1 ','hidden')">ho me</div>
<div class="sub" id="subMenu1"
onmouseover="sh owHide('subMenu 1','visible')"
onmouseout="sho wHide('subMenu1 ','hidden')">
<a href="http://kinane.net">Eng lish Version</a><br>
<a href="#">French Version</a><br>
</div>
</span>
<span id="menu2">
<div class="menu" id="menuTitle2 "
onmouseover="sh owFilter('subMe nu2','visible') "
onmouseout="sho wHide('subMenu2 ','hidden')">dh tml scripts</div>
<div class="sub" id="subMenu2"
onmouseover="sh owHide('subMenu 2','visible')"
onmouseout="sho wHide('subMenu2 ','hidden')">
<a href="#">Fading Tooltips </a><br>
<a href="#">DOM Window</a><br>
<a href="#">Zoom Intro</a><br>
<a href="#">Scroll ing Page</a><br>
<a href="#">Loadin g Message</a><br>
</div>
</span>

<span id="menu3">
<div class="menu" id="menuTitle3 "
onmouseover="sh owFilter('subMe nu3','visible') "
onmouseout="sho wHide('subMenu3 ','hidden')">dh tml tutorials</div>
<div class="sub" id="subMenu3"
onmouseover="sh owHide('subMenu 3','visible')"
onmouseout="sho wHide('subMenu3 ','hidden')">
<a href="#"><nobr> Capture Document Size </nobr></a><br>
<a href="#">InnerH TML</a><br>
<a href="#"><nobr> Change Font-Family</nobr></a><br>
</div>
</span>

<span id="menu4">
<div class="menu" id="menuTitle4 "
onmouseover="sh owFilter('subMe nu4','visible') "
onmouseout="sho wHide('subMenu4 ','hidden')">re sources</div>
<div class="sub" id="subMenu4"
onmouseover="sh owHide('subMenu 4','visible')"
onmouseout="sho wHide('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="sh owFilter('subMe nu5','visible') "
onmouseout="sho wHide('subMenu5 ','hidden')">fo rums</div>
<div class="sub" id="subMenu5"
onmouseover="sh owHide('subMenu 5','visible')"
onmouseout="sho wHide('subMenu5 ','hidden')">
<a href="#">See All Forums</a><br>
<a href="#"><nobr> Cascading Style Sheets </nobr></a><br>
<a href="#">Javasc ript</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="#c 0c0c0" align="center"
cellpadding=5 cellspacing=1>
<tr>
<td><a href="#"
onclick="MakeAc tive(0);myEffec t=random">rando m</a></td>
<td><a href="#"
onclick="MakeAc tive(1);myEffec t=fade">fade</a></td>
<td><a href="#"
onclick="MakeAc tive(2);myEffec t=boxIn">boxIn</a></td>
<td><a href="#"
onclick="MakeAc tive(3);myEffec t=boxOut">boxOu t</a></td>
<td><a href="#"
onclick="MakeAc tive(4);myEffec t=circleIn">cir cleIn</a></td>
</tr>
<tr>
<td><a href="#" onclick="MakeAc tive(5);myEffec t=circleOut
">circleOut </a></td>
<td><a href="#"
onclick="MakeAc tive(6);myEffec t=wipeUp">wipeU p</a></td>
<td><a href="#"
onclick="MakeAc tive(7);myEffec t=wipeDown">wip eDown</a></td>
<td><a href="#"
onclick="MakeAc tive(8);myEffec t=wipeRight">wi peRight</a></td>
<td><a href="#"
onclick="MakeAc tive(9);myEffec t=wipeLeft">wip eLeft</a></td>
</tr>
<tr>
<td><a href="#" onclick="MakeAc tive(10);myEffe ct=verticalblin ds
">verticalblind s </a></td>
<td><a href="#"
onclick="MakeAc tive(11);myEffe ct=horizontalbl inds">horizonta lblinds</a></td>
<td><a href="#"
onclick="MakeAc tive(12);myEffe ct=checkerboard Across">checker boardAcross</a></td>
<td><a href="#"
onclick="MakeAc tive(13);myEffe ct=checkerboard Down">checkerbo ardDown</a></td>
<td><a href="#"
onclick="MakeAc tive(14);myEffe ct=dissolve">di ssolve</a></td>
</tr>
<tr>
<td><a href="#" onclick="MakeAc tive(15);myEffe ct=splitVertica lIn
">splitVertical In </a></td>
<td><a href="#"
onclick="MakeAc tive(16);myEffe ct=splitVertica lOut">splitVert icalOut</a></td>
<td><a href="#"
onclick="MakeAc tive(17);myEffe ct=splitHorizon talIn">splitHor izontalIn</a></td>
<td><a href="#"
onclick="MakeAc tive(18);myEffe ct=splitHorizon talOut">splitHo rizontalOut</a></td>
<td><a href="#"
onclick="MakeAc tive(19);myEffe ct=stripsLeftDo wn">stripsLeftD own</a></td>
</tr>
<tr>
<td><a href="#"
onclick="MakeAc tive(20);myEffe ct=stripsLeftUp ">stripsLef tUp</a></td>
<td><a href="#"
onclick="MakeAc tive(21);myEffe ct=stripsRightD own">stripsRigh tDown</a></td>
<td><a href="#"
onclick="MakeAc tive(22);myEffe ct=stripsRightU p">stripsRightU p</a></td>
<td><a href="#"
onclick="MakeAc tive(23);myEffe ct=randomBarsHo rizontal">rando mBarsHorizontal </a></td>
<td><a href="#"
onclick="MakeAc tive(24);myEffe ct=randomBarsVe rtical">randomB arsVertical</a></td>
</tr>
</table>

</body>
</html>

May 24 '06 #1
4 2643
VK

the other john wrote:
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.


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:relat ive; visibility:hidd en;}
#tb a {color:#006699; text-decoration:none ; font-size:16px;
font-weight:bold;}
#tb a:hover {color:blue; text-decoration:unde rline; font-size:16px;
font-weight:bold;}
#content{positi on:relative; width:100%; height:24px;
background-color:#006699;}
#menu1 {position:absol ute; left:20px; top:0px;}
#menu2 {position:absol ute; left:90px; top:0px;}
#menu3 {position:absol ute; left:200px; top:0px;}
#menu4 {position:absol ute; left:320px; top:0px;}
#menu5 {position:absol ute; left:420px; top:0px;}
..menu {position:relat ive; cursor:pointer; font-weight:bold;
color:#ffffff; padding:2px; z-index:999;}
..sub {position:relat ive; width:120px; background-color:#000000;
visibility:hidd en; cursor:pointer; padding:7px; z-index:999;}
..sub a {color:#ffffff; text-decoration:none ;
font-family:tahoma,a rial,helvetica, sans-serif; font-size:12px;}
..sub a:hover{color:# ff0000; text-decoration:none ;
font-family:tahoma,a rial,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.getEl ementById && document.all);
var ns6 = (document.getEl ementById && !document.all);

// there are 25 differents effects you can use.
// to change the duration of the effect, change the duration number.
var fade = "blendTrans(Dur ation=1.2)";
var boxIn = "revealTrans(Du ration=0.7,Tran sition=0)";
var boxOut = "revealTrans(Du ration=0.3,Tran sition=1)";
var circleIn ="revealTrans(D uration=0.7,Tra nsition=2)";
var circleOut ="revealTrans(D uration=0.7,Tra nsition=3)";
var wipeUp = "revealTrans(Du ration=0.5,Tran sition=4)";
var wipeDown = "revealTrans(Du ration=0.5,Tran sition=5)";
var wipeRight = "revealTrans(Du ration=0.5,Tran sition=6)";
var wipeLeft = "revealTrans(Du ration=0.5,Tran sition=7)";
var verticalblinds = "revealTrans(Du ration=0.7,Tran sition=8)";
var horizontalblind s = "revealTrans(Du ration=0.7,Tran sition=9)";
var checkerboardAcr oss = "revealTrans(Du ration=0.7,Tran sition=10)";
var checkerboardDow n = "revealTrans(Du ration=0.7,Tran sition=11)";
var dissolve = "revealTrans(Du ration=0.7,Tran sition=12)";
var splitVerticalIn = "revealTrans(Du ration=0.5, Transition=13)" ;
var splitVerticalOu t = "revealTrans(Du ration=0.3, Transition=14)" ;
var splitHorizontal In = "revealTrans(Du ration=0.7, Transition=15)" ;
var splitHorizontal Out = "revealTrans(Du ration=0.3, Transition=16)" ;
var stripsLeftDown = "revealTrans(Du ration=0.7, Transition=17)" ;
var stripsLeftUp = "revealTrans(Du ration=0.7, Transition=18)" ;
var stripsRightDown = "revealTrans(Du ration=0.7,Tran sition=19)";
var stripsRightUp = "revealTrans(Du ration=0.7,Tran sition=20)";
var randomBarsHoriz ontal = "revealTrans(Du ration=0.7,Tran sition=21)";
var randomBarsVerti cal = "revealTrans(Du ration=0.7,Tran sition=22)";
var random = "revealTrans(Du ration=0.7,Tran sition=23)";

var myEffect = splitVerticalOu t;

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

}

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

}

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

}

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

}

function makeActiveInit( ) {
if(ie5 || ns6){
lnk =
document.getEle mentById("tb"). getElementsByTa gName("a");
for(i=0;i<lnk.l ength;i++){
lnk[i].onfocus=new
Function("if(th is.blur)this.bl ur()");
lnk[16].style.color = "red";
}
}
if(ie5)
document.getEle mentById("tb"). style.visibilit y = "visible";
}

</script>
</head>
<body onLoad="menuBar Init();makeActi veInit()">
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<div id="content">
<span id="menu1">
<div class="menu"
id="menuTitle1 "
onMouseOver="sh owFilter('subMe nu1','visible') "
onMouseOut="sho wHide('subMenu1 ','hidden')">ho me</div>
<div class="sub" id="subMenu1"
onMouseOver="sh owHide('subMenu 1','visible')"
onMouseOut="sho wHide('subMenu1 ','hidden')">
<a
href="http://kinane.net">Eng lish Version</a><br>
<a href="#">French
Version</a><br>
</div>
</span>

<span id="menu2">
<div class="menu"
id="menuTitle2 "
onMouseOver="sh owFilter('subMe nu2','visible') "
onMouseOut="sho wHide('subMenu2 ','hidden')">dh tml scripts</div>
<div class="sub" id="subMenu2"
onMouseOver="sh owHide('subMenu 2','visible')"
onMouseOut="sho wHide('subMenu2 ','hidden')">
<a href="#">Fading
Tooltips </a><br>
<a href="#">DOM
Window</a><br>
<a href="#">Zoom
Intro</a><br>
<a href="#">Scroll ing
Page</a><br>
<a href="#">Loadin g
Message</a><br>
</div>
</span>

<span id="menu3">
<div class="menu"
id="menuTitle3 "
onMouseOver="sh owFilter('subMe nu3','visible') "
onMouseOut="sho wHide('subMenu3 ','hidden')">dh tml tutorials</div>
<div class="sub" id="subMenu3"
onMouseOver="sh owHide('subMenu 3','visible')"
onMouseOut="sho wHide('subMenu3 ','hidden')">
<a
href="#"><nobr> Capture Document Size </nobr></a><br>
<a
href="#">InnerH TML</a><br>
<a
href="#"><nobr> Change Font-Family</nobr></a><br>
</div>
</span>

<span id="menu4">
<div class="menu"
id="menuTitle4 "
onMouseOver="sh owFilter('subMe nu4','visible') "
onMouseOut="sho wHide('subMenu4 ','hidden')">re sources</div>
<div class="sub" id="subMenu4"
onMouseOver="sh owHide('subMenu 4','visible')"
onMouseOut="sho wHide('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="sh owFilter('subMe nu5','visible') "
onMouseOut="sho wHide('subMenu5 ','hidden')">fo rums</div>
<div class="sub" id="subMenu5"
onMouseOver="sh owHide('subMenu 5','visible')"
onMouseOut="sho wHide('subMenu5 ','hidden')">
<a href="#">See All
Forums</a><br>
<a
href="#"><nobr> Cascading Style Sheets </nobr></a><br>
<a
href="#">Javasc ript</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="#c 0c0c0" align="center"
cellpadding=5 cellspacing=1>
<tr>
<td><a href="#"
onClick="MakeAc tive(0);myEffec t=random">rando m</a></td>
<td><a href="#"
onClick="MakeAc tive(1);myEffec t=fade">fade</a></td>
<td><a href="#"
onClick="MakeAc tive(2);myEffec t=boxIn">boxIn</a></td>
<td><a href="#"
onClick="MakeAc tive(3);myEffec t=boxOut">boxOu t</a></td>
<td><a href="#"
onClick="MakeAc tive(4);myEffec t=circleIn">cir cleIn</a></td>
</tr>
<tr>
<td><a href="#" onClick="MakeAc tive(5);myEffec t=circleOut
">circleOut </a></td>
<td><a href="#"
onClick="MakeAc tive(6);myEffec t=wipeUp">wipeU p</a></td>
<td><a href="#"
onClick="MakeAc tive(7);myEffec t=wipeDown">wip eDown</a></td>
<td><a href="#"
onClick="MakeAc tive(8);myEffec t=wipeRight">wi peRight</a></td>
<td><a href="#"
onClick="MakeAc tive(9);myEffec t=wipeLeft">wip eLeft</a></td>
</tr>
<tr>
<td><a href="#" onClick="MakeAc tive(10);myEffe ct=verticalblin ds
">verticalblind s </a></td>
<td><a href="#"
onClick="MakeAc tive(11);myEffe ct=horizontalbl inds">horizonta lblinds</a></td>
<td><a href="#"
onClick="MakeAc tive(12);myEffe ct=checkerboard Across">checker boardAcross</a></td>
<td><a href="#"
onClick="MakeAc tive(13);myEffe ct=checkerboard Down">checkerbo ardDown</a></td>
<td><a href="#"
onClick="MakeAc tive(14);myEffe ct=dissolve">di ssolve</a></td>
</tr>
<tr>
<td><a href="#" onClick="MakeAc tive(15);myEffe ct=splitVertica lIn
">splitVertical In </a></td>
<td><a href="#"
onClick="MakeAc tive(16);myEffe ct=splitVertica lOut">splitVert icalOut</a></td>
<td><a href="#"
onClick="MakeAc tive(17);myEffe ct=splitHorizon talIn">splitHor izontalIn</a></td>
<td><a href="#"
onClick="MakeAc tive(18);myEffe ct=splitHorizon talOut">splitHo rizontalOut</a></td>
<td><a href="#"
onClick="MakeAc tive(19);myEffe ct=stripsLeftDo wn">stripsLeftD own</a></td>
</tr>
<tr>
<td><a href="#"
onClick="MakeAc tive(20);myEffe ct=stripsLeftUp ">stripsLef tUp</a></td>
<td><a href="#"
onClick="MakeAc tive(21);myEffe ct=stripsRightD own">stripsRigh tDown</a></td>
<td><a href="#"
onClick="MakeAc tive(22);myEffe ct=stripsRightU p">stripsRightU p</a></td>
<td><a href="#"
onClick="MakeAc tive(23);myEffe ct=randomBarsHo rizontal">rando mBarsHorizontal </a></td>
<td><a href="#"
onClick="MakeAc tive(24);myEffe ct=randomBarsVe rtical">randomB arsVertical</a></td>
</tr>
</table>

</body>
</html>

May 24 '06 #2
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.....
VK wrote:
the other john wrote:
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.


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:relat ive; visibility:hidd en;}
#tb a {color:#006699; text-decoration:none ; font-size:16px;
font-weight:bold;}
#tb a:hover {color:blue; text-decoration:unde rline; font-size:16px;
font-weight:bold;}
#content{positi on:relative; width:100%; height:24px;
background-color:#006699;}
#menu1 {position:absol ute; left:20px; top:0px;}
#menu2 {position:absol ute; left:90px; top:0px;}
#menu3 {position:absol ute; left:200px; top:0px;}
#menu4 {position:absol ute; left:320px; top:0px;}
#menu5 {position:absol ute; left:420px; top:0px;}
.menu {position:relat ive; cursor:pointer; font-weight:bold;
color:#ffffff; padding:2px; z-index:999;}
.sub {position:relat ive; width:120px; background-color:#000000;
visibility:hidd en; cursor:pointer; padding:7px; z-index:999;}
.sub a {color:#ffffff; text-decoration:none ;
font-family:tahoma,a rial,helvetica, sans-serif; font-size:12px;}
.sub a:hover{color:# ff0000; text-decoration:none ;
font-family:tahoma,a rial,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.getEl ementById && document.all);
var ns6 = (document.getEl ementById && !document.all);

// there are 25 differents effects you can use.
// to change the duration of the effect, change the duration number.
var fade = "blendTrans(Dur ation=1.2)";
var boxIn = "revealTrans(Du ration=0.7,Tran sition=0)";
var boxOut = "revealTrans(Du ration=0.3,Tran sition=1)";
var circleIn ="revealTrans(D uration=0.7,Tra nsition=2)";
var circleOut ="revealTrans(D uration=0.7,Tra nsition=3)";
var wipeUp = "revealTrans(Du ration=0.5,Tran sition=4)";
var wipeDown = "revealTrans(Du ration=0.5,Tran sition=5)";
var wipeRight = "revealTrans(Du ration=0.5,Tran sition=6)";
var wipeLeft = "revealTrans(Du ration=0.5,Tran sition=7)";
var verticalblinds = "revealTrans(Du ration=0.7,Tran sition=8)";
var horizontalblind s = "revealTrans(Du ration=0.7,Tran sition=9)";
var checkerboardAcr oss = "revealTrans(Du ration=0.7,Tran sition=10)";
var checkerboardDow n = "revealTrans(Du ration=0.7,Tran sition=11)";
var dissolve = "revealTrans(Du ration=0.7,Tran sition=12)";
var splitVerticalIn = "revealTrans(Du ration=0.5, Transition=13)" ;
var splitVerticalOu t = "revealTrans(Du ration=0.3, Transition=14)" ;
var splitHorizontal In = "revealTrans(Du ration=0.7, Transition=15)" ;
var splitHorizontal Out = "revealTrans(Du ration=0.3, Transition=16)" ;
var stripsLeftDown = "revealTrans(Du ration=0.7, Transition=17)" ;
var stripsLeftUp = "revealTrans(Du ration=0.7, Transition=18)" ;
var stripsRightDown = "revealTrans(Du ration=0.7,Tran sition=19)";
var stripsRightUp = "revealTrans(Du ration=0.7,Tran sition=20)";
var randomBarsHoriz ontal = "revealTrans(Du ration=0.7,Tran sition=21)";
var randomBarsVerti cal = "revealTrans(Du ration=0.7,Tran sition=22)";
var random = "revealTrans(Du ration=0.7,Tran sition=23)";

var myEffect = splitVerticalOu t;

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

}

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

}

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

}

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

}

function makeActiveInit( ) {
if(ie5 || ns6){
lnk =
document.getEle mentById("tb"). getElementsByTa gName("a");
for(i=0;i<lnk.l ength;i++){
lnk[i].onfocus=new
Function("if(th is.blur)this.bl ur()");
lnk[16].style.color = "red";
}
}
if(ie5)
document.getEle mentById("tb"). style.visibilit y = "visible";
}

</script>
</head>
<body onLoad="menuBar Init();makeActi veInit()">
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<div id="content">
<span id="menu1">
<div class="menu"
id="menuTitle1 "
onMouseOver="sh owFilter('subMe nu1','visible') "
onMouseOut="sho wHide('subMenu1 ','hidden')">ho me</div>
<div class="sub" id="subMenu1"
onMouseOver="sh owHide('subMenu 1','visible')"
onMouseOut="sho wHide('subMenu1 ','hidden')">
<a
href="http://kinane.net">Eng lish Version</a><br>
<a href="#">French
Version</a><br>
</div>
</span>

<span id="menu2">
<div class="menu"
id="menuTitle2 "
onMouseOver="sh owFilter('subMe nu2','visible') "
onMouseOut="sho wHide('subMenu2 ','hidden')">dh tml scripts</div>
<div class="sub" id="subMenu2"
onMouseOver="sh owHide('subMenu 2','visible')"
onMouseOut="sho wHide('subMenu2 ','hidden')">
<a href="#">Fading
Tooltips </a><br>
<a href="#">DOM
Window</a><br>
<a href="#">Zoom
Intro</a><br>
<a href="#">Scroll ing
Page</a><br>
<a href="#">Loadin g
Message</a><br>
</div>
</span>

<span id="menu3">
<div class="menu"
id="menuTitle3 "
onMouseOver="sh owFilter('subMe nu3','visible') "
onMouseOut="sho wHide('subMenu3 ','hidden')">dh tml tutorials</div>
<div class="sub" id="subMenu3"
onMouseOver="sh owHide('subMenu 3','visible')"
onMouseOut="sho wHide('subMenu3 ','hidden')">
<a
href="#"><nobr> Capture Document Size </nobr></a><br>
<a
href="#">InnerH TML</a><br>
<a
href="#"><nobr> Change Font-Family</nobr></a><br>
</div>
</span>

<span id="menu4">
<div class="menu"
id="menuTitle4 "
onMouseOver="sh owFilter('subMe nu4','visible') "
onMouseOut="sho wHide('subMenu4 ','hidden')">re sources</div>
<div class="sub" id="subMenu4"
onMouseOver="sh owHide('subMenu 4','visible')"
onMouseOut="sho wHide('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="sh owFilter('subMe nu5','visible') "
onMouseOut="sho wHide('subMenu5 ','hidden')">fo rums</div>
<div class="sub" id="subMenu5"
onMouseOver="sh owHide('subMenu 5','visible')"
onMouseOut="sho wHide('subMenu5 ','hidden')">
<a href="#">See All
Forums</a><br>
<a
href="#"><nobr> Cascading Style Sheets </nobr></a><br>
<a
href="#">Javasc ript</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="#c 0c0c0" align="center"
cellpadding=5 cellspacing=1>
<tr>
<td><a href="#"
onClick="MakeAc tive(0);myEffec t=random">rando m</a></td>
<td><a href="#"
onClick="MakeAc tive(1);myEffec t=fade">fade</a></td>
<td><a href="#"
onClick="MakeAc tive(2);myEffec t=boxIn">boxIn</a></td>
<td><a href="#"
onClick="MakeAc tive(3);myEffec t=boxOut">boxOu t</a></td>
<td><a href="#"
onClick="MakeAc tive(4);myEffec t=circleIn">cir cleIn</a></td>
</tr>
<tr>
<td><a href="#" onClick="MakeAc tive(5);myEffec t=circleOut
">circleOut </a></td>
<td><a href="#"
onClick="MakeAc tive(6);myEffec t=wipeUp">wipeU p</a></td>
<td><a href="#"
onClick="MakeAc tive(7);myEffec t=wipeDown">wip eDown</a></td>
<td><a href="#"
onClick="MakeAc tive(8);myEffec t=wipeRight">wi peRight</a></td>
<td><a href="#"
onClick="MakeAc tive(9);myEffec t=wipeLeft">wip eLeft</a></td>
</tr>
<tr>
<td><a href="#" onClick="MakeAc tive(10);myEffe ct=verticalblin ds
">verticalblind s </a></td>
<td><a href="#"
onClick="MakeAc tive(11);myEffe ct=horizontalbl inds">horizonta lblinds</a></td>
<td><a href="#"
onClick="MakeAc tive(12);myEffe ct=checkerboard Across">checker boardAcross</a></td>
<td><a href="#"
onClick="MakeAc tive(13);myEffe ct=checkerboard Down">checkerbo ardDown</a></td>
<td><a href="#"
onClick="MakeAc tive(14);myEffe ct=dissolve">di ssolve</a></td>
</tr>
<tr>
<td><a href="#" onClick="MakeAc tive(15);myEffe ct=splitVertica lIn
">splitVertical In </a></td>
<td><a href="#"
onClick="MakeAc tive(16);myEffe ct=splitVertica lOut">splitVert icalOut</a></td>
<td><a href="#"
onClick="MakeAc tive(17);myEffe ct=splitHorizon talIn">splitHor izontalIn</a></td>
<td><a href="#"
onClick="MakeAc tive(18);myEffe ct=splitHorizon talOut">splitHo rizontalOut</a></td>
<td><a href="#"
onClick="MakeAc tive(19);myEffe ct=stripsLeftDo wn">stripsLeftD own</a></td>
</tr>
<tr>
<td><a href="#"
onClick="MakeAc tive(20);myEffe ct=stripsLeftUp ">stripsLef tUp</a></td>
<td><a href="#"
onClick="MakeAc tive(21);myEffe ct=stripsRightD own">stripsRigh tDown</a></td>
<td><a href="#"
onClick="MakeAc tive(22);myEffe ct=stripsRightU p">stripsRightU p</a></td>
<td><a href="#"
onClick="MakeAc tive(23);myEffe ct=randomBarsHo rizontal">rando mBarsHorizontal </a></td>
<td><a href="#"
onClick="MakeAc tive(24);myEffe ct=randomBarsVe rtical">randomB arsVertical</a></td>
</tr>
</table>

</body>
</html>


May 24 '06 #3
VK

the other john wrote:
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.....


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

May 24 '06 #4
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!
VK wrote:
the other john wrote:
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.....


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


May 24 '06 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
1880
by: Dave Hammond | last post by:
Hi All, The following code works in IE but not Firefox. IE produces the expected "this is more text!" output, but Firefox produces "no more text". Any ideas why? <BODY> <FORM> <INPUT TYPE=HIDDEN NAME="moreText" VALUE="<PRE>This is more text!</PRE>">
1
3414
by: Muffinman | last post by:
Howdy, I've got here a sample of my function which is supposed to fade a certain piece of text to another colour. This line is then located in a for loop and it works pretty well in IE 6. However, in Firefox, and thus I assume it will be the same in Netscape and Mozilla, it gives a problem with the: getElementById('main_txt'). Due to that...
5
31209
by: Derek Erb | last post by:
I am banging my head against the wall with this one. The following code snippets work perfectly fine in MSIE6. But produce an error in Firefox and do not work at all. BROWSER.HTM <HTML> .... <div class="Abb"> <h2 id="ABTit">BROWSER</h2> </div>
3
9250
by: davidkarlsson74 | last post by:
Error: document.getElementById("folderMenu").cells has no properties File: http://www.volkswagen.se/tillbehor/js/foldermenu.js Rad: 49 The function activates different DIV:s, but doesn't seem to work on FireFox or Netscape. What could be wrong? The function: function setActiveTab(tabNo) {
5
4303
by: Andrea | last post by:
I am trying to alter css using javascript as well as use the innerHTML function. I have pasted below 3 forms that access getElementById in slightly different ways (I wanted to rule out that it was the method.) All 3 work fine on IE but only work momentarily on Firefox. For example, one form has text that changes from red to black when the...
13
4929
by: RommelTJ | last post by:
Hi, My website (http://www.justiceinmexico.org/indextest.php) looks good in Firefox, but horrible in IE, and I think it's because of an error in the javascript of a free web ticker I got off the internet. When I run Firebug on it, it says: document.getElementById("TICKER") has no properties TICKER_CONTENT =...
8
3129
by: cyqotiq | last post by:
First, let me state that this is not necessarily a Firefox problem, as I haven't fully tested in IE just yet. Second, let me state that this is not the typical "getElementById not working Firefox" post. Third, there are pieces of this code that I am not at liberty to display, change, discuss, or re-implement. As far as this question is...
3
2049
by: GarryJones | last post by:
The following works in MSIE but not firefox. I suspect it has something to do with the fact that the element I am trying to access is not the "tid" which is the name of the DIV that is passed to this javascript. The function is a "show/hide" for a form. I want to ensure that any possible previously entered value is cleared so the user...
1
2223
by: vikD | last post by:
Hello, I'm really bad at javascript but I managed to get the code below to work in IE but firefox gives this error... Error: document.getElementById.formall is undefined Basically use the script to update the display to the user depending on what they choose (qty, options, shipping etc.) I'm sure it's simple but I could really use a...
0
7492
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7772
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8007
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
6109
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
5133
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3537
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3525
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1990
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1106
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.