473,326 Members | 2,076 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

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: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[i].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[i].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')">resourc es</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">wipeRig ht</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=checkerboardAcros s">checkerboardAcross</a></td>
<td><a href="#"
onclick="MakeActive(13);myEffect=checkerboardDown" >checkerboardDown</a></td>
<td><a href="#"
onclick="MakeActive(14);myEffect=dissolve">dissolv e</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=splitHorizontalOu t">splitHorizontalOut</a></td>
<td><a href="#"
onclick="MakeActive(19);myEffect=stripsLeftDown">s tripsLeftDown</a></td>
</tr>
<tr>
<td><a href="#"
onclick="MakeActive(20);myEffect=stripsLeftUp">str ipsLeftUp</a></td>
<td><a href="#"
onclick="MakeActive(21);myEffect=stripsRightDown"> stripsRightDown</a></td>
<td><a href="#"
onclick="MakeActive(22);myEffect=stripsRightUp">st ripsRightUp</a></td>
<td><a href="#"
onclick="MakeActive(23);myEffect=randomBarsHorizon tal">randomBarsHorizontal</a></td>
<td><a href="#"
onclick="MakeActive(24);myEffect=randomBarsVertica l">randomBarsVertical</a></td>
</tr>
</table>

</body>
</html>

May 24 '06 #1
4 2627
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: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[i].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[i].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')">resourc es</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">wipeRig ht</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=checkerboardAcros s">checkerboardAcross</a></td>
<td><a href="#"
onClick="MakeActive(13);myEffect=checkerboardDown" >checkerboardDown</a></td>
<td><a href="#"
onClick="MakeActive(14);myEffect=dissolve">dissolv e</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=splitHorizontalOu t">splitHorizontalOut</a></td>
<td><a href="#"
onClick="MakeActive(19);myEffect=stripsLeftDown">s tripsLeftDown</a></td>
</tr>
<tr>
<td><a href="#"
onClick="MakeActive(20);myEffect=stripsLeftUp">str ipsLeftUp</a></td>
<td><a href="#"
onClick="MakeActive(21);myEffect=stripsRightDown"> stripsRightDown</a></td>
<td><a href="#"
onClick="MakeActive(22);myEffect=stripsRightUp">st ripsRightUp</a></td>
<td><a href="#"
onClick="MakeActive(23);myEffect=randomBarsHorizon tal">randomBarsHorizontal</a></td>
<td><a href="#"
onClick="MakeActive(24);myEffect=randomBarsVertica l">randomBarsVertical</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: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[i].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[i].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')">resourc es</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">wipeRig ht</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=checkerboardAcros s">checkerboardAcross</a></td>
<td><a href="#"
onClick="MakeActive(13);myEffect=checkerboardDown" >checkerboardDown</a></td>
<td><a href="#"
onClick="MakeActive(14);myEffect=dissolve">dissolv e</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=splitHorizontalOu t">splitHorizontalOut</a></td>
<td><a href="#"
onClick="MakeActive(19);myEffect=stripsLeftDown">s tripsLeftDown</a></td>
</tr>
<tr>
<td><a href="#"
onClick="MakeActive(20);myEffect=stripsLeftUp">str ipsLeftUp</a></td>
<td><a href="#"
onClick="MakeActive(21);myEffect=stripsRightDown"> stripsRightDown</a></td>
<td><a href="#"
onClick="MakeActive(22);myEffect=stripsRightUp">st ripsRightUp</a></td>
<td><a href="#"
onClick="MakeActive(23);myEffect=randomBarsHorizon tal">randomBarsHorizontal</a></td>
<td><a href="#"
onClick="MakeActive(24);myEffect=randomBarsVertica l">randomBarsVertical</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
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...
1
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....
5
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> .......
3
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...
5
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...
13
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...
8
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"...
3
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...
1
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...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.