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>
