Hide/reveal DHTML

**Michael Winter** · Jul 23 '05, 03:31 PM

Re: Hide/reveal DHTML

On Tue, 23 Nov 2004 16:34:03 -0600, ATS
<affordable_tur nkey_solutions@ comcast.net> wrote:
[color=blue]
> I need to hide/reveal parts of a web page using javascript. I think I
> can do with using the <span> tag, but I've been away from it for a while
> and don't remember. Any pointers, examples?[/color]

This has been asked *many* times. Please look through the group archives:

<URL:http://groups.google.c om/groups?q=group: comp.lang.javas cript+show+hide +element+%7C+di v+%7C+layer&sco ring=d>

Though the posts you find will apply mainly to DIVs and other block-level
elements, the principle can be applied to any element.

The only comment I would like to add that may not be present in all of the
threads is that content should not be hidden initially with CSS. If the
script cannot execute (for whatever reason), the user will not be able to
view the content. Instead, hide the appropriate content with the script
when the document loads.

Good luck,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

**WindAndWaves** · Jul 23 '05, 03:31 PM

Re: Hide/reveal DHTML

"ATS" <affordable_tur nkey_solutions@ comcast.net> wrote in message
news:keCdnb9I16 1IJz7cRVn-sg@comcast.com. ..[color=blue]
> I need to hide/reveal parts of a web page using javascript. I think I can
> do with using the <span> tag, but I've been away from it for a while and
> don't remember. Any pointers, examples?
>
>[/color]
Here is a recent example that I made with help from the group

This is the end

https://www.sunnysideup.co.nz/clients/friars/listing.html

Note that the <DIV ID=bas> is the crucial Div, any divs with IDs within the
Bas (stands for base) div will be hidden and the <A HREFs> in the menu allow
the user to see them.

- Nicolaas

**Ivo** · Jul 23 '05, 03:31 PM

Re: Hide/reveal DHTML

"Michael Winter" wrote[color=blue]
> that content should not be hidden initially with CSS. If the
> script cannot execute (for whatever reason), the user will not be able
> to view the content. Instead, hide the appropriate content with the
> script when the document loads.[/color]

This is a difficult dilemma. Your point is very valid, we should always be
conscious of javascript not being present or enabled, but if there is one
thing that makes a site look unprofessional in my view, it is pages that
fall apart and reassemble themselves after loading, especially when hidden
content is involved. The average computer user is feeling uncertain enough
already.
I always try to design so that a page stands solid the moment it is
requested, and do any manipulations *during* load. If the user has no
javascript, he will be missing out on a lot of fun anyway.
--
Ivo

**SimonFx** · Jul 23 '05, 03:31 PM

Re: Hide/reveal DHTML

"ATS" wrote: in message[color=blue][color=green]
>>I need to hide/reveal parts of a web page using javascript. I think I can
>>do with using the <span> tag, but I've been away from it for a while and
>>don't remember. Any pointers, examples?[/color][/color]

WindAndWaves wrote:[color=blue]
> Here is a recent example that I made with help from the group
>
> https://www.sunnysideup.co.nz/client...s/listing.html
>
> Note that the <DIV ID=bas> is the crucial Div, any divs with IDs within the
> Bas (stands for base) div will be hidden and the <A HREFs> in the menu allow
> the user to see them.[/color]

Except DIVs nested within DIVs nested in BAS are not hidden by
themselves, but only when the parent DIV is hidden. Hmmm.

<DIV ID=BAS>
<DIV ID=D1>D1</DIV>
<DIV ID=D2>D2</DIV>
<DIV ID=D3>D3 <DIV ID=D4>D4</DIV> </DIV>
</DIV>

D4 does not have its style set with "display:no ne". D3 can/does so D4 is
dependent on D3. But what I am trying to say is that the function won't
work on children of child DIVs (grandchild DIVs?) of BAS (ie: D4).

**Michael Winter** · Jul 23 '05, 03:32 PM

Re: Hide/reveal DHTML

On Wed, 24 Nov 2004 01:27:53 +0100, Ivo <no@thank.you > wrote:
[color=blue]
> "Michael Winter" wrote
>[color=green]
>> [...] content should not be hidden initially with CSS.[/color][/color]

[snip]
[color=blue]
> This is a difficult dilemma. Your point is very valid, we should always
> be conscious of javascript not being present or enabled,[/color]

Particularly as here in the UK, service-providing sites need to be
accessible.
[color=blue]
> but if there is one thing that makes a site look unprofessional in my
> view, it is pages that fall apart and reassemble themselves after
> loading,[/color]

That is true.
[color=blue]
> especially when hidden content is involved. The average computer user is
> feeling uncertain enough already.[/color]

I suppose when you should hide content depends on what, and how much, you
are hiding, and what impact that would have on the page. If the impact is
high, it might be best to hide as soon as possible. However, if the impact
is low, particularly if the content is below the fold, then you might get
away with hiding everything with a SCRIPT element at the end of the BODY
element, meaning you don't have to litter the source with SCRIPT elements.
[color=blue]
> I always try to design so that a page stands solid the moment it is
> requested, and do any manipulations *during* load.[/color]

I didn't mean to say that you *must* wait until the page and all it's
content has loaded. The main point was to make the page accessible. The
best way to achieve that will, I suspect, *have* to be decided by the
author for his specific circumstance.
[color=blue]
> If the user has no javascript, he will be missing out on a lot of fun
> anyway.[/color]

Quite possibly, but I don't need to tell you that content is king. Well,
usually. :)

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

**ATS** · Jul 23 '05, 03:40 PM

Re: Hide/reveal DHTML

Very sorry about the late reply.

I looked over the discussions and found it mind numbing. At my age most
things are, but I work with what I have. Perhaps if I expanded on what I'm
after, you could point me in the right direction.

I have a page (http://www.democratsforum.com) that displays various text
based on the day of the week. That way I can load it one day and leave it
for the week. I have two other pages that do the same type of thing
(displaying phototoons). I'm currently showing or hiding a text area and
the problem is there is a large space at the top of the page that is empty.

It's been a few years since I wrote web pages, but there was a fundamental
incompatibility between Netscape and IE. IIRC, "Div" is an IE creature and
"Layers" is the Netscape equivalent. I wanted this to avoid complications
(thus using the more universal "Span" in case someone else has to maintain
it as I might be leaving the area for up to two years.

I was thinking of having the existing code reveal/hide areas (span? div?
layers?) that would include the text that also includes HTML code and be
positions so it was at the top of the page.

(BTW, is my Outlook goofy or is it normal that this message keep
disappearing behind the message window?)

**ATS** · Jul 23 '05, 03:40 PM

Re: Hide/reveal DHTML

Please see my response to Mr. Winter. What's in the javascript file?

**Michael Winter** · Jul 23 '05, 03:40 PM

Re: Hide/reveal DHTML

On Thu, 2 Dec 2004 12:10:05 -0600, ATS
<affordable_tur nkey_solutions@ comcast.net> wrote:

[snip]
[color=blue]
> [...] (http://www.democratsforum.com) [...][/color]

You should seriously consider:

1) Dropping frames. They're evil
(<URL:http://www.google.com/search?q=%22fra mes+%2A+evil%22 >).
2) Validating your HTML (<URL:http://validator.w3.or g/>).
[color=blue]
> I'm currently showing or hiding a text area and the problem is there is
> a large space at the top of the page that is empty.[/color]

Use "display: none" not "visibility : hidden".

[snip]
[color=blue]
> IIRC, "Div" is an IE creature[/color]

No. DIVs are standard HTML elements and have been since HTML 3.2[1] (1997).
[color=blue]
> and "Layers" is the Netscape equivalent.[/color]

The LAYER element was only supported in NN4, I believe. Certainly, no
versions since then have used it.
[color=blue]
> I wanted this to avoid complications (thus using the more universal
> "Span" [...][/color]

The SPAN element is completely different from both of these. For a start,
it's an inline element, whilst the other two are block-level. See
<URL:http://www.w3.org/TR/html4/struct/global.html#h-7.5.4>.
[color=blue]
> I was thinking of having the existing code reveal/hide areas (span? div?
> layers?) that would include the text that also includes HTML code and be
> positions so it was at the top of the page.[/color]

As you seem to have server-side support, why not use it to include the
text and remove your reliance upon client-side scripting?
[color=blue]
> (BTW, is my Outlook goofy or is it normal that this message keep
> disappearing behind the message window?)[/color]

I wouldn't know. I don't use Outlook.

Mike

[1] A DIV element is also used in the HTML 2.0 Specification (1995), but
it's not present in the DTD. I'm not quite sure what's going on there.

We're now on HTML 4.01 (1999), by the way.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

**ATS** · Jul 23 '05, 03:40 PM

Re: Hide/reveal DHTML

Thank you. I appreciate the time. I'll look at the "Div" stuff again now
that I know it works on pretty much everything. Once I figure out a way to
do a menu system, I've been considering moving to the non-frame environment.
Again with the idea of simplifying the site. That makes going to the
validator easier.

Not sure what you mean by server v. client side includes. I assume server
side is better because the client doesn't have to work for it. Thus I would
use include statement to external files on the server?

Lee

**Andrew Thompson** · Jul 23 '05, 03:40 PM

Re: Hide/reveal DHTML

On Thu, 2 Dec 2004 16:34:56 -0600, ATS wrote:
[color=blue]
> Not sure what you mean by server v. client side includes.[/color]

If your server supports 'server side includes (SSI)' via PHP or
a number of other languages, that means the file is included
by your server and the client gets plain old HTML. Everybody
with a browser can use it and get the included information.

Failing that, you might try using JS to write the content on
delivery to the user. But that depends on the user having a JS
enabled browser. Note that sometimes JS is switched off in a
browser that might otherwise support it.
[color=blue]
>..I assume server
> side is better because the client doesn't have to work for it.[/color]

I would not have phrased it as "doesn't have to work for it". As
far as your visistors are concerned, all the work is done by their
browser, and the page will download and display in around the same
time.
[color=blue]
>...Thus I would
> use include statement to external files on the server?[/color]

Definitely. JS is great for many things that cannot be done in
pure, plain old HTML alone. But for including 'static content',
JS is only useful if your server lacks SSI. (And if your server
does *not* support SSI, I recommend finding one that does.)

[ Now that I look more carefully over this thread I will add. ]

You still need the JS (as Mike noted) to *hide* the content when
it is not needed for the page.

He was warning not to also *write* the content into the page using JS.

That is where the SSI becomes useful. It writes the content into the
page on the server, delivering HTML content and a JS to the client.

The JS hides the content when it is not needed for users who have
JS enabled, while the non JS users see the entire page.

HTH

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

**Michael Winter** · Jul 23 '05, 03:41 PM

Re: Hide/reveal DHTML

On Fri, 03 Dec 2004 04:17:26 GMT, Andrew Thompson <SeeMySites@www .invalid>
wrote:
[color=blue]
> On Thu, 2 Dec 2004 16:34:56 -0600, ATS wrote:
>[color=green]
>> Not sure what you mean by server v. client side includes.[/color][/color]

I didn't say anything about server-side includes. :P

[snip]
[color=blue]
> You still need the JS (as Mike noted) to *hide* the content when it is
> not needed for the page.[/color]

Actually, my suggestion was to avoid that altogether. With proper
server-side support, you can enter the text into a database[1]. The server
can then find today's text and write that in. No client-side scripting
required at all, and much smaller files sent to the visitor.

How you do it exactly, could depend on the amount of traffic you receive.
If it's high, it would probably be worthwhile having the server
automatically generate a static file at the beginning of each day and
serve that, rather than constructing it on each request.

[snip]

Mike

[1] Not necessarily an *actual* database. It might be easier to write a
series of plain text files that would be inserted verbatim into the page,
named with the date of their intended inclusion.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

**Robert** · Jul 23 '05, 03:41 PM

Re: Hide/reveal DHTML

"ATS" <affordable_tur nkey_solutions@ comcast.net> wrote in message news:<SPmdnbxg4 dzqxjLcRVn-ow@comcast.com> ...[color=blue]
> Please see my response to Mr. Winter. What's in the javascript file?[/color]

Here is an HTML file which shows two ways of hiding text.

Robert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>CSS Display and Visibility</title>

<script type="text/javascript">

function validate(x)
{
var checkedButton;

// Figure out which radio button was pressed

checkedButton = findValue(x.rec eiveVia);

var varName = x.theName.value ;
var varEmail = x.theEmail.valu e;
var varAddress = x.theAddress.va lue;

// I changed submitOK to a boolean variable.
var submitOK = true;

// Validate email: name and email

if (checkedButton == "byEmail")
{

if (varName == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress != '')
{
alert("Please erase the address field.");
submitOK = false;
}

return submitOK;

}

// Validate print: name, email, and address

else if (checkedButton= ="printed")
{
// Error messages should be in the order on the form
if (varName.length == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress == '')
{
alert("You must enter your Address");
submitOK = false;
}

return submitOK;
}
else
{
alert("You need to select either email or print.");
return false;
}
}

function vanishHidden(do What)
{
// Check if the getElementById method is available
if (document.getEl ementById)
{
document.getEle mentById("hideS pan").style.dis play = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.hi deSpan.style.di splay = doWhat;
}
else
{ alert("Cannot change visibility of address field"); }
}

function hideHidden(doWh at)
{
// Check if the getElementById method is available
if (document.getEl ementById)
{
document.getEle mentById("vanis hSpan").style.v isibility = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.va nishSpan.style. visibility = doWhat;
}
else
{ alert("Cannot change display value of address field"); }
}

// See which radio button is selected and return its value
function findValue(obj)
{
var i, theValue;
theValue = null;

for (i=0;i<obj.leng th;i++)
{
if (obj[i].checked == true)
{
theValue = obj[i].value;
break;
}
}

return theValue;
}
</script>

</head>

<body>

<p>Please try out our form.</P>
<P>This form uses the CSS display
and visibility style attributes. When you click on the
radio button email, Javascript code uses the display attribute
property of hidden to exclude the address field from the display.
No space will be taken up in the window.
When you click on the no radio button, Javascript code uses the
visibility attribute property of none to make the literature
catagories invisible. Space will be taken up in the window.</p>

<form name="myForm"
action="http://www.notavalidur l.com"
method="GET"
onsubmit="retur n validate(docume nt.forms['myForm']);">
<p>
<input type="radio"
name="receiveVi a"
value="printed"
onclick="vanish Hidden('');">
Printed brochure</p>
<p>
<input type="radio"
name="receiveVi a"
value="byEmail"
onclick="vanish Hidden('none');
document.forms['myForm'].theAddress.val ue = '';">
Via Email</p>
<p>Name:<br>
<input type="text"
name="theName"
size="20"><br>< br>
Email:<br>
<input type="text" name="theEmail" size="20">
<br><br>
<span id="hideSpan">
Postal address:<br>
<input type="text" name="theAddres s" size="40">
</span>
</p>
<p>
Do you wish to receive additional literature?
<br>
<input type="radio"
name="literatur e"
value="yes"
onclick="hideHi dden('visible') ";> Yes&nb sp; 

<span id="vanishSpan" >
<input type="checkbox"
name="gardening "
value"gardening "> Gardeni ng
<input type="checkbox"
name="kitchen"
value"kitchen">  Kitche n
<input type="checkbox"
name="vacation"
value"vacation" > Vacati on

<br> &nbsp ;  &n bsp; &nbsp ;  
  &nb sp;     &nb sp; 
<input type="checkbox"
name="office"
value"office">& nbsp;Office
<input type="checkbox"
name="secondhom e"
value"secondhom e"> Sec ond Home
</span>

<br>
<input type="radio"
name="literatur e"
value="no"
onclick="hideHi dden('hidden');
var d=document.form s['myForm'];
d.elements['gardening'].checked=false;
d.elements['kitchen'].checked=false;
d.elements['vacation'].checked=false;
d.elements['office'].checked=false;
d.elements['secondhome'].checked=false; ">
No
</p>
<p><input type="submit"
border="0"
value="Submit form"
width="75"
height="17"
ALT="Submit button"></p>

</form>

<script type="text/javascript">
// In the case of a reload, the radio button may already be clicked.
// This code needs to be after the form.
var x = document.forms["myForm"];
if (x.receiveVia[0].checked == true)
{ vanishHidden('' );}
else if (x.receiveVia[1].checked == true)
{ vanishHidden('n one');}
else
{ ;}

if (x.literature[0].checked == true)
{ hideHidden('vis ible');}
else if (x.literature[1].checked == true)
{ hideHidden('hid den');}
else
{ ;}

</script>
</body>
</html>

Hide/reveal DHTML

Hide/reveal DHTML

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment