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

  2. the other john

    VK Guest

    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.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>
     
    VK, May 24, 2006
    #2
    1. Advertising

  3. 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.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
    #3
  4. the other john

    VK Guest

    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.
     
    VK, May 24, 2006
    #4
  5. 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.
     
    the other john, May 24, 2006
    #5
    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:
    132
    Richard Cornford
    May 19, 2004
  2. Hartmut J?ger

    Firefox and getElementById

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

    getElementById and Firefox

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

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

Share This Page