How do I....

[Rodders]

I'm having a bit of trouble hiding and unhiding a DIV by clicking on a link.

I thought the syntax was.....


<DIV NAME=mydiv>
This is my DIV
</DIV>

<A HREF='#' onClick="document.mydiv.style.visibility = 'hidden';">Hide it</A>

<A HREF='#' onClick="document.mydiv.style.visibility = 'visible';">Show it</A>



....but it does not work. What have I missed?

A link to a dHTML resource would be enough.

Thanks

[Vladdy]

Short answer: you missed standard compliance.

Longer answer: NAME can only be used with FORM elements. Document nodes are identified using ID attribute and accessed using document.getElementById method.

Thorough answer: www.w3.org

[Rodders]

Thanks.

I've just been doing loads of stuff with forms and didn't realise you had to use ID instead of NAME.

[Rodders]

Great, I've got that working better now. Thanks for the document.getElementById() hint, that's just what I needed.

Now the DIV is coming and going as required, is it possible to make it push it's way inbetween the headings.

Before -

MenuA
MenuB
MenuC

After clicking on MenuA -

MenuA
SubMenuA1
SubMenuA2
SubMenuA3
MenuB
MenuC

I thought z-index was the key to this, but it seems I am wrong!

[Vladdy]

Here is a site I developed not so long ago that does what you are trying to do. You are welcome to poach the code: http://server.ime.uri.edu

[Rodders]

Thank you very much.

I won't just steal the code but I'll certainly find the methods and properties that I need to know about to do my task.

[ThaLyric]

You can also use display:none ....

The difference between visibility:hide and display:none is with visibility the div just simply shows of hidden. But with display:none the space that was rendered for the div will be released and the browser ( IE ) will fill up that empty space.

But still ... NS couldn't handle it :( .....

[Stefan]

Originally posted by ThaLyric
But still ... NS couldn't handle it :( .....

If NS = NS 4.x then no. But not very many other things would work either.

If NS = NS 7+ then it will work just fine.

[gil davis]

Originally posted by Vladdy
NAME can only be used with FORM elements

Not true. The following HTML elements all have a "NAME" attribute:

APPLET
AREA
EMBED
FORM
FRAME
IMG
INPUT
KEYGEN
MAP
META
PARAM
SELECT
TEXTAREA

[gil davis]

Originally posted by ThaLyric
But still ... NS couldn't handle it :( .....

To make NS4 "handle it", the DIV must be positioned, then you must drop the "style" part of the identifier, and use "show/hide" instead of "visible/hidden". For example:

<script>
function showIt(obj) {
if (document.layers)
{obj.visibility = "show"}
else
{obj.style.visibility = "visible"}
}
function hideIt(obj) {
if (document.layers)
{obj.visibility = "hide"}
else
{obj.style.visibility = "hidden"}
}
</script>
<DIV ID="mydiv" style="position:relative">
This is my DIV
</DIV>

<A HREF='#' onClick="hideIt(document.mydiv);return false">Hide it</A>

<A HREF='#' onClick="showIt(document.mydiv);return false">Show it</A>

[ThaLyric]

hmm ... no ... you see ... display is NOT show/hide.

If I take your example but I add something :

<div id='mydiv1'>Item 1 </div><br>
<DIV ID="mydiv" style="position:relative">
Item 2 <br>
</DIV>
<div id='mydiv3'>Item 3 </div><br>

As you can see ... item 2 was placed in the div. If de div was visible ( show) then you would get :

Item1
Item2
Item3

And when I click on , hide ... the browser just simply hide the layer

so you would get

Item1

Item3



So what happened. The space that was rendered for the div is still there , but only the layer isn't visible.

One way to do it is to reposition all the layers ( so you need to recalculate the X and Y ) . Haven't tested with NS7 (with display=none) .


-------------
To make NS4 "handle it", the DIV must be positioned, then you must drop the "style" part of the identifier, and use "show/hide" instead of "visible/hidden". For example:

<script>
function showIt(obj) {
if (document.layers)
{obj.visibility = "show"}
else
{obj.style.visibility = "visible"}
}
function hideIt(obj) {
if (document.layers)
{obj.visibility = "hide"}
else
{obj.style.visibility = "hidden"}
}
</script>
<DIV ID="mydiv" style="position:relative">
This is my DIV
</DIV>

<A HREF='#' onClick="hideIt(document.mydiv);return false">Hide it</A>

<A HREF='#' onClick="showIt(document.mydiv);return false">Show it</A>

[antz 66]

First let me thank all of you for posting your comments and solutions.

Now here is the issue. I've tried these examples and can not get them to work in any of the browsers they are suppose to work in. Using NN4.7, NN7.01 and IE5.

In most cases I get it to work in NN4.7 and then it won't work in NN7 or IE5. so then another mod gets them working in IE5 and NN7 but not in NN4.

Evedrything I see says this should work in all of these browsers but for some reason, it doesn't. I keep getting
"obj has no properties" errors in NN7 and "'style' is null or not an object in IE5".

Any ideas how to make this work in these three browsers?

thanks a million.

As an added note...
_________________________________
This code works in IE5 and NN7 but not NN4

<script language="JavaScript">
var ns4 = (document.layers);
var ie4 = (document.all && !document.getElementById);
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);

function attach(id)
{
var obj
if(ns4) obj = document.layers[id];
else if(ie4) obj = document.all[id];
else if(ie5 || ns6) obj = document.getElementById(id);

return obj
}

function hide_obj(id)
{
temp_Obj = attach(id);
if(ns4) temp_Obj.visibility = "hide";
else temp_Obj.style.visibility = "hidden"
}

function show_obj(id)
{
temp_Obj = attach(id);
if(ns4) temp_Obj.visibility = "show";
else temp_Obj.style.visibility = "visible"
}
</script>

<div id=myObject>Text within the element</div><br>
<a href="javascript:hide_obj('myObject')">hide</a>
<a href="javascript:show_obj('myObject')">show</a>

[antz 66]

So here is the deal, I figured it using some other code I had and it works.

Here is the code:
_____________________________________

<script>
var ns4 = (document.layers);
var ie4 = (document.all && !document.getElementById);
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);

function showP1() {
if (ns4) document.layers["p1"].visibility = "show";
if (ie4) document.all.p1.style.visibility = "visible";
if (ie5) document.all.p1.style.visibility = "visible";
if (ns6) document.getElementById("p1").style.visibility = "visible";
}

function hideP1() {
if (ns4) document.layers["p1"].visibility = "hide";
if (ie4) document.all.p1.style.visibility = "hidden";
if (ie5) document.all.p1.style.visibility = "hidden";
if (ns6) document.getElementById("p1").style.visibility = "hidden";
}
</script>

<div id="p1" style="position:absolute;">
Text
</div><br><br>

<a href="javascript:showP1()">show</a><br>
<a href="javascript:hideP1()">hide</a>

The only issue with this is that you have to creat additional hide show functions for each additional element you want to hide or show.

If anyone can modify this and repost it with the ability to just hide and show without the need to create additional functions for each object to hide, that might be very helpful. If I get it I'll post it.

Bye,
Ant
:D :D