468,533 Members | 1,922 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,533 developers. It's quick & easy.

Problem with hiding/unhiding DIV

Hi,

I'm trying to figure out how to hide text in a DIV block and then hide
and unhide it using javascript. In the code that follows, the message
is initially invisible, and when you click on the "show" link, it's
made visible and pops up bettween the two hyphen lines. When you
click on the "hide" link, it's made invisible again. Or at least
that's what is supposed to happen.

It does all of this just fine in IE5, IE5.5, and IE6. However, in
Mozilla 1.5, the display attribute doesn't get changed, and the
message text remains hidden.

A google search of past postings mentions that this doesn't work in
Netscape 4, but it *is* supposed to work in Netscape 6, which I guess
is approximately equivalent to Mozilla 1.0.

Is there something different I need to do to get this to work in the
Netscape/Mozilla family of browsers?

Thanks.
MCheu

----------------------------------------------------------------------------------------------
<HTML>
<!---- Test.html --->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--

// Makes an element visible

function showElement(element)
{
//element.style.display='';
element.style.display='block';
}

// Makes an element disappear

function hideElement (element)
{
element.style.display='none';
}

-->

</SCRIPT>
</HEAD>

<BODY>

<A HREF="#nowhere" onclick="showElement(id1);">Show</A>

<BR>

<A HREF="#nowhere" onclick="hideElement(id1);">Hide</A>

<BR><BR>
--------------------------------------<BR>
<DIV ID="id1" style="display:none">
CAN YOU SEE ME?
</DIV>
--------------------------------------<BR>
</HTML>
---------------------------------------------------------------------------------------------

----------------------------------------
Thanks,
MCheu
Jul 20 '05 #1
8 1756
On Sat, 06 Mar 2004 01:10:03 -0500, mcheu <mp****@yahoo.com> wrote:
It does all of this just fine in IE5, IE5.5, and IE6. However, in
Mozilla 1.5, the display attribute doesn't get changed, and the
message text remains hidden.
[snip]
Is there something different I need to do to get this to work in the
Netscape/Mozilla family of browsers?
The problem is how you call the function:

<A HREF="#nowhere" onclick="showElement(id1);">Show</A>

Here, you treat id1, the id of the DIV element, as a global variable. IE,
and some other browsers, honour this, but there is no reason why they
should. That's why stricter Gecko-based browsers fail. Instead, use a
function like:

function getById( id ) {
if( document.getElementById ) {
return document.getElementById( id );
} else if( document.all ) {
return document.all[ id ];
}
return null;
}

and call the hide/show functions like:

<A HREF="#nowhere" onclick="showElement(getById('id1'));">Show</A>

This should now work on browsers that support the style property and the
document.getElementById() method or .all[] collection. That should account
for the vast majority of modern browsers.

[snip]
<SCRIPT LANGUAGE="JavaScript">
The language attribute is deprecated. Use the type attribute instead (it's
required anyway):

<script type="text/javascript">
<!--
The practice of hiding scripts is now obsolete. Remove the SGML comment
delimiters.
function showElement(element)
{
//element.style.display='';
element.style.display='block';


You should check that the style and display properties are supported
before using them:

if( element.style && 'undefined' != element.style.display ) {
element.style.display = 'block';
}

This goes for the hideElement() function, too.

[snip]

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 20 '05 #2
Michael Winter wrote:
On Sat, 06 Mar 2004 01:10:03 -0500, mcheu <mp****@yahoo.com> wrote:
It does all of this just fine in IE5, IE5.5, and IE6. However, in
Mozilla 1.5, the display attribute doesn't get changed, and the
message text remains hidden.

[snip]
Is there something different I need to do to get this to work in the
Netscape/Mozilla family of browsers?

The problem is how you call the function:

<A HREF="#nowhere" onclick="showElement(id1);">Show</A>

Or in the function itself. Which I would be more inclined to point at
instead of the call to the function.

function showElement(element)
{
document.getElementById(element).style.display='bl ock';
}

along with this in the script block:

if(document.all && !document.getElementById) {
document.getElementById = function(id) {
return document.all[id];
}
}

Still needs the object detection you added, but I prefer to keep my
function calls to a minimum.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/
Jul 20 '05 #3
On Sat, 06 Mar 2004 01:10:03 -0500, in comp.lang.javascript mcheu
<mp****@yahoo.com> wrote:
| Hi,
|
| I'm trying to figure out how to hide text in a DIV block and then hide
| and unhide it using javascript. In the code that follows, the message
| is initially invisible, and when you click on the "show" link, it's
| made visible and pops up bettween the two hyphen lines. When you
| click on the "hide" link, it's made invisible again. Or at least
| that's what is supposed to happen.
|
| It does all of this just fine in IE5, IE5.5, and IE6. However, in
| Mozilla 1.5, the display attribute doesn't get changed, and the
| message text remains hidden.
|
| A google search of past postings mentions that this doesn't work in
| Netscape 4, but it *is* supposed to work in Netscape 6, which I guess
| is approximately equivalent to Mozilla 1.0.
|
| Is there something different I need to do to get this to work in the
| Netscape/Mozilla family of browsers?
|
| Thanks.
| MCheu


----------------------------------
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function showElement(element)
{
var target = document.getElementById(element);
target.style.display='block';
}
function hideElement (element)
{
var target = document.getElementById(element);
target.style.display='none';
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#nowhere" onclick="showElement('id1');">Show</A>
<BR>
<A HREF="#nowhere" onclick="hideElement('id1');">Hide</A>
<BR><BR>
--------------------------------------<BR>
<DIV Name="id1" ID="id1" style="display:block">
CAN YOU SEE ME?
</DIV>
--------------------------------------<BR>
</HTML>
----------------------------------
---------------------------------------------------------------
jn****@yourpantsbigpond.net.au : Remove your pants to reply
---------------------------------------------------------------
Jul 20 '05 #4
On Sat, 06 Mar 2004 14:29:36 GMT, Jeff North
<jn****@yourpantsbigpond.net.au> wrote::
On Sat, 06 Mar 2004 01:10:03 -0500, in comp.lang.javascript mcheu
<mp****@yahoo.com> wrote:
| Hi,
|
| I'm trying to figure out how to hide text in a DIV block and then hide
| and unhide it using javascript. In the code that follows, the message
| is initially invisible, and when you click on the "show" link, it's
| made visible and pops up bettween the two hyphen lines. When you
| click on the "hide" link, it's made invisible again. Or at least
| that's what is supposed to happen.
|
| It does all of this just fine in IE5, IE5.5, and IE6. However, in
| Mozilla 1.5, the display attribute doesn't get changed, and the
| message text remains hidden.
|
| A google search of past postings mentions that this doesn't work in
| Netscape 4, but it *is* supposed to work in Netscape 6, which I guess
| is approximately equivalent to Mozilla 1.0.
|
| Is there something different I need to do to get this to work in the
| Netscape/Mozilla family of browsers?
|
| Thanks.
| MCheu


----------------------------------
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function showElement(element)
{
var target = document.getElementById(element);
target.style.display='block';
}
function hideElement (element)
{
var target = document.getElementById(element);
target.style.display='none';
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#nowhere" onclick="showElement('id1');">Show</A>
<BR>
<A HREF="#nowhere" onclick="hideElement('id1');">Hide</A>
<BR><BR>
--------------------------------------<BR>
<DIV Name="id1" ID="id1" style="display:block">
CAN YOU SEE ME?
</DIV>
--------------------------------------<BR>
</HTML>
----------------------------------
---------------------------------------------------------------
jn****@yourpantsbigpond.net.au : Remove your pants to reply
---------------------------------------------------------------


Thanks. The test page works fine now with the changes.
----------------------------------------
Thanks,
MCheu
Jul 20 '05 #5
On Sat, 06 Mar 2004 12:31:32 GMT, Michael Winter
<M.******@blueyonder.co.invalid> wrote::
On Sat, 06 Mar 2004 01:10:03 -0500, mcheu <mp****@yahoo.com> wrote:
It does all of this just fine in IE5, IE5.5, and IE6. However, in
Mozilla 1.5, the display attribute doesn't get changed, and the
message text remains hidden.


[snip]
Is there something different I need to do to get this to work in the
Netscape/Mozilla family of browsers?


The problem is how you call the function:

<A HREF="#nowhere" onclick="showElement(id1);">Show</A>

Here, you treat id1, the id of the DIV element, as a global variable. IE,
and some other browsers, honour this, but there is no reason why they
should. That's why stricter Gecko-based browsers fail. Instead, use a
function like:

function getById( id ) {
if( document.getElementById ) {
return document.getElementById( id );
} else if( document.all ) {
return document.all[ id ];
}
return null;
}

and call the hide/show functions like:

<A HREF="#nowhere" onclick="showElement(getById('id1'));">Show</A>

This should now work on browsers that support the style property and the
document.getElementById() method or .all[] collection. That should account
for the vast majority of modern browsers.

[snip]
<SCRIPT LANGUAGE="JavaScript">


The language attribute is deprecated. Use the type attribute instead (it's
required anyway):

<script type="text/javascript">
<!--


The practice of hiding scripts is now obsolete. Remove the SGML comment
delimiters.
function showElement(element)
{
//element.style.display='';
element.style.display='block';


You should check that the style and display properties are supported
before using them:

if( element.style && 'undefined' != element.style.display ) {
element.style.display = 'block';
}

This goes for the hideElement() function, too.

[snip]

Mike


Thanks for the very informative reply.

----------------------------------------
Thanks,
MCheu
Jul 20 '05 #6
On Sat, 06 Mar 2004 15:16:29 -0500, in comp.lang.javascript mcheu
<mp****@yahoo.com> wrote:

[snip]
| Thanks. The test page works fine now with the changes.


Just a reminder, this is for DOM2 compliant browsers. Randy and
Michael have posted a complete solution.
---------------------------------------------------------------
jn****@yourpantsbigpond.net.au : Remove your pants to reply
---------------------------------------------------------------
Jul 20 '05 #7
Jeff North wrote:
On Sat, 06 Mar 2004 15:16:29 -0500, in comp.lang.javascript mcheu
<mp****@yahoo.com> wrote:

[snip]

| Thanks. The test page works fine now with the changes.

Just a reminder, this is for DOM2 compliant browsers. Randy and
Michael have posted a complete solution.


Not sure that a "complete" solution would exist. None of the solutions
so far have included document.layers. The only benefit added by Michael
or myself was IE4 compatability (to an extent)

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/
Jul 20 '05 #8
On Sat, 06 Mar 2004 23:22:20 -0500, in comp.lang.javascript Randy Webb
<hi************@aol.com> wrote:
| Jeff North wrote:
| > On Sat, 06 Mar 2004 15:16:29 -0500, in comp.lang.javascript mcheu
| > <mp****@yahoo.com> wrote:
| >
| > [snip]
| >
| >
| >>| Thanks. The test page works fine now with the changes.
| >
| >
| > Just a reminder, this is for DOM2 compliant browsers. Randy and
| > Michael have posted a complete solution.
|
| Not sure that a "complete" solution would exist. None of the solutions
| so far have included document.layers. The only benefit added by Michael
| or myself was IE4 compatability (to an extent)


Well your response was more 'complete' than mine :-)

---------------------------------------------------------------
jn****@yourpantsbigpond.net.au : Remove your pants to reply
---------------------------------------------------------------
Jul 20 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

9 posts views Thread by AGoTH | last post: by
4 posts views Thread by StressPuppy | last post: by
24 posts views Thread by Bangalore | last post: by
2 posts views Thread by Kufre | last post: by
17 posts views Thread by Bob Weiner | last post: by
3 posts views Thread by Nicolas Castagne | last post: by
1 post views Thread by jack | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.