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>
