473,839 Members | 1,423 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 2673
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
1913
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
3429
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 in setTimeout("",) it requires the "" signes and thus I can not use the same ones in the getElement...
5
31229
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
9281
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
4345
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 user clicks the button. In IE it changes. In Firefox it changes for a split second then goes back...
13
4972
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 = document.getElementById("TICKER").innerHTML; Here is the complete script:
8
3147
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 concerned, this means that (1) I cannot use 3rd party libraries, which is why I've implemented my own...
3
2067
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 starts with an empty field with focus. I have tried to ways, with naming and getElementById but in...
1
2242
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 hand. Thanks!!
0
9855
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10586
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 captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10648
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9426
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 launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
7017
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 into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5866
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4484
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
2
4064
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3134
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.