Problem with hiding/unhiding DIV

M

mcheu

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>
 
M

Michael Winter

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?
Click to expand...

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">
Click to expand...

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

<!--
Click to expand...

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

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
 
R

Randy Webb

Michael said:
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?
Click to expand...


The problem is how you call the function:

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


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='block';
}

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

Jeff North

| 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
Click to expand...

----------------------------------
<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>
 
M

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>
Click to expand...

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

mcheu

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?
Click to expand...

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">
Click to expand...

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

<!--
Click to expand...

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

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
Click to expand...

Thanks for the very informative reply.
 
J

Jeff North

On Sat, 06 Mar 2004 15:16:29 -0500, in comp.lang.javascript mcheu

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

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

Randy Webb

Jeff said:
On Sat, 06 Mar 2004 15:16:29 -0500, in comp.lang.javascript mcheu

[snip]

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


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

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

Jeff North

| Jeff North wrote:
| > On Sat, 06 Mar 2004 15:16:29 -0500, in comp.lang.javascript mcheu
| >
| > [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)
Click to expand...

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with my responsive home page 2
Help with code 0
hiding unhiding <div 9
hiding all text with a given CLASS 13
Help with Visual Lightbox: Scripts 2
problem assigning function to <div>.onclick 4
Only one table shows up with the information 2
Div Display Problem 0

Members online

No members online now.
Total: 32 (members: 0, guests: 32)
Robots: 448

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top