Web Analytics Made Easy -
StatCounter hiding/showing element in NS 6 - CodingForum


No announcement yet.

hiding/showing element in NS 6

  • Filter
  • Time
  • Show
Clear All
new posts

  • hiding/showing element in NS 6

    i'm facing a problem, that is when i'm trying to "Show" and "Hide" the "layermenu" layer (as stated below), Nestcape 6 seems like can't detect the onMouseOver and onMouseOut events.

    <Div ID="layermenu" Class="myStyle" onMouseOver=showLot("layermenu") onMouseOut=hideLot("layermenu")>

    the class myStyle is inside the pagecss.css, as stated below:

    .myStyle {position:absolute; left: 318px; top:-15px; visibility:hidden;}

    My javascript for display and hide the layer is stated as :

    function showLot(id)
    ns4=(document.layers)? true:false
    ie4=(document.all)? true:false
    if (ns4)
    { document.layers[id].visibility="visible"

    else if (ie4)


    function hideLot(id)
    ns4=(document.layers)? true:false
    ie4=(document.all)? true:false
    if (ns4)
    { document.layers[id].visibility="hidden"

    else if (ie4)

    IE5 work fine with above code. But fail in Nestcape 6

    i'm trying to use
    document.getElementById("layermenu").attachEvent("onmouseover", showLot("layermenu"))

    or document.getElementById("layermenu".style.visibility,

    it fail in IE5 as well as Nestcape6, error message with "object document.getElementById("...")is null" come out. How come?

    for me, I don't think there have anything wrong with my code, but...

    Please help.!!


  • #2
    Your hide and show functions do not test for NS6. You are testing for document.all (IE4+) and document.layers (NS4) only. NS6 and IE5+ make use of DOM scripting and use document.getElementById. I have knocked up a little example of how you could modify your code to hide and show the <div> in question. Perhaps you could use this as a base script to modify and make work in the way you want:

    <title>Toggle hide/show of an element: IE4, IE5, NS6</title>
    <script language="javascript1.2" type="text/javascript">
    function toggle(id){

    dom = document.getElementById ? 1 : 0;
    ie4 = (document.all && !dom) ? 1 : 0;
    opera = (navigator.userAgent.indexOf('Opera')!=-1) ? 1 : 0;
    supported = ((dom||ie4) && !(opera)) ? 1 : 0;


    if (dom && !document.all)
    document.all = document.getElementsByTagName("*")

    obj = (dom) ? document.getElementById(id) : document.all(id)




    <style type="text/css">
    .myStyle { position:absolute; left: 318px; top:15px; background-color:#cccccc }



    <div id="layermenu" class="myStyle" onmouseover="toggle('layermenu')" onmouseout="toggle('layermenu')">Text in here will disappear onmouseover and re-appear onmouseout</div>


    Have fun!
    New to the CF scene
    Last edited by head8k; Jun 18, 2002, 06:48 AM.
    As easy as 3.1415926535897932384626433832795028841


    • #3
      Reply to Head8k

      Don't know what to say, head8k, really thanks for ur help, u are the only person who help me to solve the problem , I post my question on others forum as well, but the answer they haven given to me not functional and I have already spent about 4 days time to just solve this small problem, really sigh......luckly i met you...

      but i'm here have a question, why my code:

      ns4=(document.layers)? true:false

      can't work properly in nestcape, can't Nestcape 6 support layer object??? since NS 4 can support, why NS 6 can't. Hope you can explain to me.

      Thank You!



      • #4
        The Layer object model was removed from Gecko because it was essentially useless.

        The Layer implementation of NS4 was buggy at best, and couldn't compete with IE's All model.

        So Gecko incorporated the best support of all browsers for the W3C DOM Level 1 and 2 recommendations, as well as partial support for parts of the Level 3 working draft

        Consider this: IE doesn't support anything over DOM2 Core at best.

        The Layer model served no purpose, and would have been a waste of time for them to reimplement (they started with an entirely new codebase several months after the Mozilla project was started, scrapping Mozilla Classic, a.k.a. NS4 code).

        I don't why I decided to bring layer support to Mozilla, but I'm working on it - see http://layeremu.mozdev.org for my current CSS, JS, and XBL files that partially implement the Layer model. (Many bugs to work out though).


        • #5
          thanks for the reply..
          i'm here have some more questions:

          1.) can IE5+ recognize document.getElementById object?
          2.) are IE4,5 and 5+ using document.all object??

          I don't know why when my layer "show" in IE5, it display well, but in Nestcape6, it can "show" and "hide" properly (thanks for head8k help), but still have some problems. I have already attached the text file, kindly convert it into HTML format and please view it in Nestcape 6 and you will understand what I'm saying. In IE5, no problem.
          note: Please just click the "propery for sales" menu and see, if found error, don't bother it as I didn't include all the file needed. I just want to know, why there have space between "Developemnt Progress and Future Launches" when click on the "property for sales" menu.

          Please help!!!! Solve one problem, another problem come out really sigh.
          Attached Files


          • #6
            I hope that somebody can help me to solve my problem that I post just now, kindly go to http://www.setiahomes.com/johor/index2.html to have look. my problems are:

            1.) when mouseover the "futurelaunches" link, the layer come out , but not in proper position, so I will try to fix it by create a reposition function (for it to be functioning in both browser), such as

            if (ns6)
            obj.style.left = 300px
            obj.style.top = 20px

            it works properly, the problem is when I resize the window, the layer not position in the original position like what IE5 have done.

            2.) Please click on the side navigator - Property for Sales link, when click, have problem ( i don't know how to describe, but when u click it, u will know why) .

            Both problems only happen in NS6.

            Please help and advice.
            Thanks very very very much!!


            • #7
              I have oredi solved the hiding/showing problem, that is it can hide and show sucessfully, but with a little problwm, kindly refer to my previous questions.

              in order to solve the "gap" problem that I mentioned above, i'm now using obj.style.visibility='visible'; instead of obj.style.display=''". such as:

              function show()

              if (supported)
              //if dom is true then rerturn getElement object, else all object
              obj1 = (dom) ? document.getElementById("layer1") : document.all("layer1")
              obj3 = (dom) ? document.getElementById("layer3") : document.all("layer3")
              obj5 = (dom) ? document.getElementById("layer5") : document.all("layer5")
              obj7 = (dom) ? document.getElementById("layer7") : document.all("layer7")



              i'm so wonder, when mouse click (call show() function above), only the layer 7 (obj7) is showed. I try one leyer by one layer and finally I found that it only manage to show one layer instead of for 4 layers at once. Please advice!


              • #8

                is there anyone can help me to solve my problem mentioned above.