...

View Full Version : hiding/showing element in NS 6



charon
06-18-2002, 10:29 AM
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)
{
document.all[id].style.visibility="visible"

}
}

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

}
else if (ie4)
{
document.all[id].style.visibility="hidden"
}
}

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.!!


charon

head8k
06-18-2002, 11:41 AM
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:

<html>
<head>
<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(!supported)
return;

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

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

if(obj.style.visibility=='hidden')
obj.style.visibility='visible';

else
obj.style.visibility='hidden';

}
//-->
</script>

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

</head>

<body>

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

</body>
</html>

Have fun!

charon
06-19-2002, 06:18 AM
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!

charon

jkd
06-19-2002, 06:37 AM
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).

charon
06-19-2002, 11:48 AM
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.

charon
06-19-2002, 01:11 PM
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!!

charon
06-22-2002, 07:21 AM
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)
return;

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")

obj1.style.visibility='visible';
obj3.style.visibility='visible';
obj5.style.visibility='visible';
obj7.style.visibility='visible';

}

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!

charon
06-26-2002, 06:49 AM
is there anyone can help me to solve my problem mentioned above.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum