473,388 Members | 1,480 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,388 software developers and data experts.

Hide/reveal DHTML

ATS
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?
Jul 23 '05 #1
12 2720
On Tue, 23 Nov 2004 16:34:03 -0600, ATS
<af**************************@comcast.net> wrote:
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?


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

<URL:http://groups.google.com/groups?q=group:comp.lang.javascript+show+hide+elem ent+%7C+div+%7C+layer&scoring=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.
Jul 23 '05 #2

"ATS" <af**************************@comcast.net> wrote in message
news:ke********************@comcast.com...
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?

Here is a recent example that I made with help from the group

http://www.sunnysideup.co.nz/clients...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.

- Nicolaas
Jul 23 '05 #3
Ivo
"Michael Winter" wrote
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.


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
Jul 23 '05 #4
"ATS" wrote: in message
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?

WindAndWaves wrote: Here is a recent example that I made with help from the group

http://www.sunnysideup.co.nz/clients...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.


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:none". 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).
Jul 23 '05 #5
On Wed, 24 Nov 2004 01:27:53 +0100, Ivo <no@thank.you> wrote:
"Michael Winter" wrote
[...] content should not be hidden initially with CSS.

[snip]
This is a difficult dilemma. Your point is very valid, we should always
be conscious of javascript not being present or enabled,
Particularly as here in the UK, service-providing sites need to be
accessible.
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,
That is true.
especially when hidden content is involved. The average computer user is
feeling uncertain enough already.
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.
I always try to design so that a page stands solid the moment it is
requested, and do any manipulations *during* load.
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.
If the user has no javascript, he will be missing out on a lot of fun
anyway.


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.
Jul 23 '05 #6
ATS
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?)
Jul 23 '05 #7
ATS
Please see my response to Mr. Winter. What's in the javascript file?
Jul 23 '05 #8
On Thu, 2 Dec 2004 12:10:05 -0600, ATS
<af**************************@comcast.net> wrote:

[snip]
[...] (http://www.democratsforum.com) [...]
You should seriously consider:

1) Dropping frames. They're evil
(<URL:http://www.google.com/search?q=%22frames+%2A+evil%22>).
2) Validating your HTML (<URL:http://validator.w3.org/>).
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.
Use "display: none" not "visibility: hidden".

[snip]
IIRC, "Div" is an IE creature
No. DIVs are standard HTML elements and have been since HTML 3.2[1] (1997).
and "Layers" is the Netscape equivalent.
The LAYER element was only supported in NN4, I believe. Certainly, no
versions since then have used it.
I wanted this to avoid complications (thus using the more universal
"Span" [...]
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>.
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.
As you seem to have server-side support, why not use it to include the
text and remove your reliance upon client-side scripting?
(BTW, is my Outlook goofy or is it normal that this message keep
disappearing behind the message window?)


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.
Jul 23 '05 #9
ATS
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
Jul 23 '05 #10
On Thu, 2 Dec 2004 16:34:56 -0600, ATS wrote:
Not sure what you mean by server v. client side includes.
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.
..I assume server
side is better because the client doesn't have to work for it.
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.
...Thus I would
use include statement to external files on the server?


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
Jul 23 '05 #11
On Fri, 03 Dec 2004 04:17:26 GMT, Andrew Thompson <Se********@www.invalid>
wrote:
On Thu, 2 Dec 2004 16:34:56 -0600, ATS wrote:
Not sure what you mean by server v. client side includes.

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

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


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.
Jul 23 '05 #12
"ATS" <af**************************@comcast.net> wrote in message news:<SP********************@comcast.com>...
Please see my response to Mr. Winter. What's in the javascript file?


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.receiveVia);

var varName = x.theName.value;
var varEmail = x.theEmail.value;
var varAddress = x.theAddress.value;

// 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(doWhat)
{
// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById("hideSpan").style.display = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.hideSpan.style.display = doWhat;
}
else
{ alert("Cannot change visibility of address field"); }
}
function hideHidden(doWhat)
{
// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById("vanishSpan").style.visibi lity = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.vanishSpan.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.length;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.notavalidurl.com"
method="GET"
onsubmit="return validate(document.forms['myForm']);">
<p>
<input type="radio"
name="receiveVia"
value="printed"
onclick="vanishHidden('');">
Printed brochure</p>
<p>
<input type="radio"
name="receiveVia"
value="byEmail"
onclick="vanishHidden('none');
document.forms['myForm'].theAddress.value = '';">
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="theAddress" size="40">
</span>
</p>
<p>
Do you wish to receive additional literature?
<br>
<input type="radio"
name="literature"
value="yes"
onclick="hideHidden('visible')";>&nbsp;Yes&nbsp;&n bsp;
<!-- use visibility. -->
<span id="vanishSpan">
<input type="checkbox"
name="gardening"
value"gardening">&nbsp;Gardening
<input type="checkbox"
name="kitchen"
value"kitchen">&nbsp;Kitchen
<input type="checkbox"
name="vacation"
value"vacation">&nbsp;Vacation
<!-- Just get it done. I know there are better ways. -->
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;
<input type="checkbox"
name="office"
value"office">&nbsp;Office
<input type="checkbox"
name="secondhome"
value"secondhome">&nbsp;Second Home
</span>

<br>
<input type="radio"
name="literature"
value="no"
onclick="hideHidden('hidden');
var d=document.forms['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('none');}
else
{ ;}

if (x.literature[0].checked == true)
{ hideHidden('visible');}
else if (x.literature[1].checked == true)
{ hideHidden('hidden');}
else
{ ;}

</script>
</body>
</html>
Jul 23 '05 #13

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: jeff | last post by:
Hello, I am coding a web application to be used on an internal Intranet. I have already coded a menubar for the application using DHTML. I want to get rid of the standard menubar in Mozilla...
19
by: benzwt | last post by:
I use the following function to hide a <div> named one. function hideObject() { if (ns4) { document.n1.visibility = "hide"; } else if (ie4) { document.all.style.visibility = "hidden"; }...
10
by: DettCom | last post by:
Hello, I would like to be able to display or hide fields based on whether a specific Yes/No radio button is selected. This is in conjunction with a posting a just made here in the same group...
1
by: Moon | last post by:
Well, this is my first attempt at DHTML so I'm asking for some pointers, hopefully in the right groups, follow-up is set. I'm currently working on another translation of an english text and I'd...
4
by: jerryyang_la1 | last post by:
I've found this script that allows be to hide/show form elements.. <script language="JavaScript"><!-- var toggle = true; function show(object) { if (document.layers && document.layers)...
4
by: David | last post by:
I attempted the following <div id="div" runat="server"> <tr><td></td></tr> <tr><td></td></tr> </div> This is to hide a group of rows depending on some business rules in my code behind.
0
by: Brian Kitt | last post by:
I have a very long table, about 200 rows. I am trying to make buttons that can alternately hide and reveal sections of the table. It's easy enough to hide and reveal sections with the...
3
by: John K | last post by:
How do you hide the available functions (and syntax) that are normally displayed when you browse to a webservice (e.g. httpx://xxx.com/CMgr.asmx)? If you go to that page you will see a list of...
1
by: dylanb | last post by:
Hi can anyone tell me how to alter this script so it will works on classes and id's; <script> function showhide(id){ if (document.getElementById){ obj = document.getElementById(id); if...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

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.