getElementById and Firefox

Discussion in 'Javascript' started by the other john, May 24, 2006.

  1. 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.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.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')">resources</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">wipeRight</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=checkerboardAcross">checkerboardAcross</a></td>
    <td><a href="#"
    onclick="MakeActive(13);myEffect=checkerboardDown">checkerboardDown</a></td>
    <td><a href="#"
    onclick="MakeActive(14);myEffect=dissolve">dissolve</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=splitHorizontalOut">splitHorizontalOut</a></td>
    <td><a href="#"
    onclick="MakeActive(19);myEffect=stripsLeftDown">stripsLeftDown</a></td>
    </tr>
    <tr>
    <td><a href="#"
    onclick="MakeActive(20);myEffect=stripsLeftUp">stripsLeftUp</a></td>
    <td><a href="#"
    onclick="MakeActive(21);myEffect=stripsRightDown">stripsRightDown</a></td>
    <td><a href="#"
    onclick="MakeActive(22);myEffect=stripsRightUp">stripsRightUp</a></td>
    <td><a href="#"
    onclick="MakeActive(23);myEffect=randomBarsHorizontal">randomBarsHorizontal</a></td>
    <td><a href="#"
    onclick="MakeActive(24);myEffect=randomBarsVertical">randomBarsVertical</a></td>
    </tr>
    </table>

    </body>
    </html>
     
    the other john, May 24, 2006
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. TR
    Replies:
    5
    Views:
    131
    Richard Cornford
    May 19, 2004
  2. Hartmut J?ger

    Firefox and getElementById

    Hartmut J?ger, Nov 27, 2004, in forum: Javascript
    Replies:
    6
    Views:
    150
    Michael Winter
    Nov 28, 2004
  3. Andrea
    Replies:
    5
    Views:
    201
    Thomas 'PointedEars' Lahn
    Nov 30, 2005
  4. the other john

    getElementById and Firefox

    the other john, May 24, 2006, in forum: Javascript
    Replies:
    4
    Views:
    142
    the other john
    May 24, 2006
  5. Firefox and getElementById

    , Sep 25, 2006, in forum: Javascript
    Replies:
    8
    Views:
    166
Loading...

Share This Page