How do I….

@RoddersNov 21.2002

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

I thought the syntax was…..

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

A link to a dHTML resource would be enough.

Thanks

to post a comment

JavaScript

12 Comments(s) _↴

@VladdyNov 21.2002 — #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

@RoddersauthorNov 21.2002 — #Thanks.

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

@RoddersauthorNov 21.2002 — #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!

@VladdyNov 21.2002 — #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

@RoddersauthorNov 21.2002 — #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.

@ThaLyricNov 23.2002 — #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 ? .....

@StefanNov 23.2002 — #[i]Originally posted by ThaLyric [/i]

But still ... NS couldn't handle it ? ..... [/QUOTE]

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_davisNov 23.2002 — #[i]Originally posted by Vladdy [/i]

[B]NAME can only be used with FORM elements[/B][/QUOTE]

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

[color=red]APPLET

AREA

EMBED

FORM

FRAME

IMG

INPUT

KEYGEN

MAP

META

PARAM

SELECT

TEXTAREA[/color]

@gil_davisNov 23.2002 — #[i]Originally posted by ThaLyric [/i]

[B]But still ... NS couldn't handle it ? ..... [/B][/QUOTE]

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>

@ThaLyricNov 25.2002 — #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_66Jan 02.2003 — #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_66Jan 02.2003 — #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

? ?

Also in #JavaScript _↴

text variable passing objects name to a function.Checkbox select limit

Success!

Help @Rodders spread the word by sharing this article on Twitter...

Tweet This

How do I….

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How do I….

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴