By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,473 Members | 3,292 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,473 IT Pros & Developers. It's quick & easy.

getElementById and Firefox

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.