473,327 Members | 2,007 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

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 1887
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
by: AGoTH | last post by:
class A { public: virtual void foo(int b) {} virtual void foo(char* b) {} }; class B : public A{ virtual void foo(int b) {} };
4
by: StressPuppy | last post by:
(posted this in VB group but then realized I probably should have posted here) I have a TabControl with several TabPages. Upon startup, I only want to show the first TabPage, hiding the rest....
24
by: Bangalore | last post by:
Hi all, I have a problem in accessing elements using overloaded operator . Consider, const int SIZE=10; int FALSE=0; class Array { private: int x; public:
2
by: Kufre | last post by:
I need anyone that have done this before to help me. I'm creating a form in Access, in the form has two two checkbox, checkbox A is paid, checkbox B is partial_paid. I want the set the checkbox so...
5
by: MLH | last post by:
Private Sub UnhideDBwndowBtn_Click() SendKeys "~" DoCmd.DoMenuItem A_FORMBAR, 4, 4, 0, A_MENU_VER20 End Sub If I run the above code, database window 'unhides' and is displayed. However, on...
17
by: Bob Weiner | last post by:
What is the purpose of hiding intead of overriding a method? I have googled the question but haven't found anything that makes any sense of it. In the code below, the only difference is that...
3
by: Nicolas Castagne | last post by:
Hi all, I have been wondering for a while why function hiding (in a derived class) exists in C++, e.g. why when writing class Base { void foo( int ) {} }; class Derived: public Base { void...
1
by: jack | last post by:
Hi all, My datagrid have too many columns which are going out of screen. one of the solution is to group the columns and make only the total column visible at the initial stage. What now i...
162
by: Sh4wn | last post by:
Hi, first, python is one of my fav languages, and i'll definitely keep developing with it. But, there's 1 one thing what I -really- miss: data hiding. I know member vars are private when you...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.