how to hide every <div> ?

[benzwt]

I use the following function to hide a <div> named one.

function hideObject() {
if (ns4) {
document.n1.vis ibility = "hide";
}
else if (ie4) {
document.all['n1'].style.visibili ty = "hidden";
}
else if (nn6) {
document.getEle mentById('one') .style.visibili ty = "hidden";
}
}

the code will becomes clumsy if I have many <div> to hide.
Is there good way to hide every <div> ?

[lallous]

Hello

One way is to put the IDs of all divs in an array then loop through the
array and hide each element.

Or, I don't know how but know it is possible, loop in the whole page
searching for "div" tags then hide that element.

--
Elias
<be****@yahoo.c om.tw> wrote in message
news:ff******** *************** ***@posting.goo gle.com...

I use the following function to hide a <div> named one.

function hideObject() {
if (ns4) {
document.n1.vis ibility = "hide";
}
else if (ie4) {
document.all['n1'].style.visibili ty = "hidden";
}
else if (nn6) {
document.getEle mentById('one') .style.visibili ty = "hidden";
}
}

the code will becomes clumsy if I have many <div> to hide.
Is there good way to hide every <div> ?

[Evertjan.]

be****@yahoo.co m.tw wrote on 11 aug 2004 in comp.lang.javas cript:

the code will becomes clumsy if I have many <div> to hide.
Is there good way to hide every <div> ?

IE, not tested:

var coll = document.all.ta gs("DIV");
if (coll!=null) {
for (i=0; i<coll.length; i++) {
coll[i].style.visibili ty = "hidden";
}
}

or more static:

<style>
div {visibility:hid den;}
</style>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[john henry bonham]

be****@yahoo.co m.tw wrote:

I use the following function to hide a <div> named one.

function hideObject() {
if (ns4) {
document.n1.vis ibility = "hide";
}
else if (ie4) {
document.all['n1'].style.visibili ty = "hidden";
}
else if (nn6) {
document.getEle mentById('one') .style.visibili ty = "hidden";
}
}

the code will becomes clumsy if I have many <div> to hide.
Is there good way to hide every <div> ?

for ( var i = 0 ; i < document.getEle mentsByTagName{ 'div' ).length ; i++ );
{
document.getEle mentsByTagName{ 'div' )[ i ].style.visibili ty =
'hidden';
}

will work in IE5+, NS6+, Mozilla & Opera and other browsers less than 3
years old :o

Rob
http://www.avagio.co.uk

[Mark Preston]

be****@yahoo.co m.tw wrote:

I use the following function to hide a <div> named one.

function hideObject() {
if (ns4) {
document.n1.vis ibility = "hide";
}
else if (ie4) {
document.all['n1'].style.visibili ty = "hidden";
}
else if (nn6) {
document.getEle mentById('one') .style.visibili ty = "hidden";
}
}

the code will becomes clumsy if I have many <div> to hide.
Is there good way to hide every <div> ?

I've not tried it so can't give you the code, but someone may be able to
fill in the blanks (and its quite an interesting question). There should
be a way to set up a standard style like:-

<style> div {display:block} </style>

Then, in your script, to refer to the document.style. display and set it
from "block" to "none". That should hide them all.

[Grant Wagner]

"be****@yahoo.c om.tw" wrote:

I use the following function to hide a <div> named one.

function hideObject() {
if (ns4) {
document.n1.vis ibility = "hide";
}
else if (ie4) {
document.all['n1'].style.visibili ty = "hidden";
}
else if (nn6) {
document.getEle mentById('one') .style.visibili ty = "hidden";
}
}

the code will becomes clumsy if I have many <div> to hide.
Is there good way to hide every <div> ?

Browser detection isn't a very good idea (ns4, ie4, etc variables),
use feature detection. And it's probably a good idea to attempt to
use the most modern mechanism first. Below is a generic function that
will set the visibility of any <div>/<layer> in most browsers to
hidden:

<script type="text/javascript">
function hideObject(id) {
var o;
if (document.getEl ementById) {
o = document.getEle mentById(id).st yle;
} else if (document.layer s) {
o = document.layers ;
} else if (document.all) {
o = document.all[id].style;
}
if (o) {
o.visibility = 'hidden';
}
}

// then

hideObject('you rId1');
hideObject('you rId2');
hideObject('you rId3');

// or

for (var i = 0; i < arrayOfDivIds.l ength; i++) {
hideObject(arra yOfDivIds[i]);
}
</script>

Note that you can *set* "hidden" in Netscape 4, but if queried, NS4
returns "hide" or "show". This script still isn't optimum because it
tests which DOM is supported for each call. The performance
difference probably won't matter in most cases.

--
Grant Wagner <gw*****@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

[Thomas 'PointedEars' Lahn]

Grant Wagner wrote:

Browser detection isn't a very good idea (ns4, ie4, etc variables),
use feature detection. And it's probably a good idea to attempt to
use the most modern mechanism first. Below is a generic function that
will set the visibility of any <div>/<layer> in most browsers to
hidden:

<script type="text/javascript">
function hideObject(id) {
var o;
if (document.getEl ementById) {
o = document.getEle mentById(id).st yle;
} else if (document.layer s) {
o = document.layers ;
document.layers is IIRC an Array object. The object itself
has no visibility property, so I do not understand why you
are including it here. It would be more reasonable to try to
access the id-th layer or not supporting the NN4 DOM at all.
} else if (document.all) {
o = document.all[id].style;
While the IE DOM has an ambiguity that methods of host objects
can be used as collections (and vice-versa), the documentation
at MSDN uses the method syntax and this is why I think one
should stick to that.
}
if (o) {
o.visibility = 'hidden';
}
}
This was my first approach for dhtml.js, too. Yet testing the DOM every
time the method is called is not very efficient. Try this instead:

if (document.getEl ementById)
{
function getElemById(id)
{
return document.getEle mentById(id);
}
}
else if (document.all)
{
function getElemById(id)
{
return document.all(id );
}
}
else if (document.layer s)
{
function getElemById(id)
{
return document.layers[id];
}
}

function hideObject(id)
{
var o = getElemById(id) ;
if (o)
{
(typeof o.style != "undefined" )
? o.style.visibil ity = "hidden";
: o.visibility = "hidden";
}
}
--

Signatures are by convention (RFC) to be delimited by DashDashSpace
(`-- '), so compliant NetNews software (like mine) can handle them
differently (removing them automatically on reply, coloring them to
distinguish them from the rest of the article, hide them if display
is undesired etc.)
<http://insideoe.tomste rdam.com/problems/bugs.htm#sigsep arator>
explains how to achieve that with Outlook Express which will otherwise
truncate trailing spaces on submit no matter how many you type when
composing the mail/article.
PointedEars

[Grant Wagner]

Thomas 'PointedEars' Lahn wrote:

Grant Wagner wrote:

o = document.layers ;
document.layers is IIRC an Array object. The object itself
has no visibility property, so I do not understand why you
are including it here. It would be more reasonable to try to
access the id-th layer or not supporting the NN4 DOM at all.

Given that line in the context of the rest of the code, I think it's fairly
obvious my intent was "document.layer s[id]" rather then "document.layer s". A
more appropriate response might have been: "you probably meant
'document.layer s[id]'". A correction of my mistake to the original poster
was necessary, a 4-line explanation on what I did wrong given the context of
the rest of the code was not.

Of course, if your intent was to be intentionally obtuse ("... I do not
understand why you are including it here.") then I guess you succeeded.

} else if (document.all) {
o = document.all[id].style;

While the IE DOM has an ambiguity that methods of host objects
can be used as collections (and vice-versa), the documentation
at MSDN uses the method syntax and this is why I think one
should stick to that.

It's a collection, it gets accessed using the collection syntax. MSDN
documentation indicates that document.forms( ), .links(), .elements(), etc
should also use the method syntax, but I certainly don't use:

<!--[if IE]>
<script type="text/javascript">
var el = document.forms( 'theForm').elem ents('theElemen t');
</script>
<![endif]-->
<![if !IE]>
<script type="text/javascript">
var el = document.forms['theForm'].elements['theElement'];
</script>
<![endif]>

everywhere I access a form element[] or link[].

if (o) {
o.visibility = 'hidden';
}
}

This was my first approach for dhtml.js, too. Yet testing the DOM every
time the method is called is not very efficient. Try this instead:

Which is why I wrote: "This script still isn't optimum because it tests
which DOM is supported for each call. The performance difference probably
won't matter in most cases."

I did not want to confuse the issue by combining more advanced concepts with
the concept of feature detection.
else if (document.layer s)
{
function getElemById(id)
{
return document.layers[id];
}
}
In my environment Netscape 4 is more likely to be in use than Internet
Explorer 4, so I move the document.layers test up simply to document it's
relative importance. Also, I'd probably add the following catch-all else:

else {
function getElemById(id) { return null; }
}
function hideObject(id)
{
var o = getElemById(id) ;
if (o)
{
(typeof o.style != "undefined" )
? o.style.visibil ity = "hidden";
: o.visibility = "hidden";
}
}

Depending on requirements, I might code it as:

function setVisibility(i d, visible) {
var o = getElemById(o);
if (o) {
if (typeof o.style != 'undefined') {
o.style.visibil ity = (visible ? 'visible' : 'hidden');
return (o.style.visibi lity == (visible ? 'visible' : 'hidden'));

} else {
o.visibility = (visible ? 'show' : 'hide');
return (o.visibility == (visible ? 'show' : 'hide'));
}
}
return false;
}

I completely acknowledge the above code is not perfect. It is certainly
possible to get false positives, where the visibility (or other) property is
confirmed as being set on the object but nothing happened in the browser
(Opera 6 and innerHTML are a good example of this). It is possible (but I
feel less likely) to get false negatives. If the visibility property is not
the value you set it to, then either the DOM performed the requested action
and somehow "reset" the value, or the value simply did not get set. Despite
the obvious unreliability of returning a boolean from such a function, I
still think there are circumstances where knowing that setVisibility()
couldn't locate or change the visibility on the specified element can be of
value.

--

Signatures are by convention (RFC) to be delimited by DashDashSpace
(`-- '), so compliant NetNews software (like mine) can handle them
differently (removing them automatically on reply, coloring them to
distinguish them from the rest of the article, hide them if display
is undesired etc.)
<http://insideoe.tomste rdam.com/problems/bugs.htm#sigsep arator>
explains how to achieve that with Outlook Express which will otherwise
truncate trailing spaces on submit no matter how many you type when
composing the mail/article.

PointedEars

Thank you for the link, but I don't use Outlook Express so that article does
not help. I guess you'll just have to mentally filter out the three lines of
my sig.

--
Grant Wagner <gw*****@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

[Richard Cornford]

Thomas 'PointedEars' Lahn wrote:
<snip>

if (document.getEl ementById)
{
function getElemById(id)
{
return document.getEle mentById(id);
}
}
else ...

<snip>

By ECMA specification (section 13) a FunctionDeclara tion is a
SourceElement, and SourceElements may be FunctionDeclara tions or
Statements (section 14). Making it syntactically incorrect for a
FunctionDeclara tion to appear within a Statement (including a block
statement). As a result of this the above must be a FunctionExpress ion
with optional identifier (no other valid interpretation is available
given the surrounding block statement).

However, also by ECMA specification (section 13), the identifier of a
FunctionExpress ion with optional identifier results in a new object
being added to the scope chain of the execution context in which the
expression is evaluated, the identifier is used to create a named
property of that object, a reference to the created function object
assigned to that named property and then the object being removed from
the scope chain. As a result the only code able to utilise the
identifier optionally provided with a FunctionExpress ion to refer to the
corresponding function object is code lexically contained within that
expression.

There is a longstanding bug in the JS implementation used in
Mozilla/gecko where an identifier optionally used with a
FunctionExpress ion leaks into the containing scope, but because that is
contrary to the ECMAScript specification it would not be a good idea to
author code to exploit that fault. The results could not be expected to
be cross-browser.

Richard.

[Richard Cornford]

john henry bonham wrote:
<snip>

for (var i = 0 ;i < document.getEle mentsByTagName{ 'div' ).length ;
i++ ); {
document.getEle mentsByTagName{ 'div' )[ i ].style.visibili ty =
'hidden';
}

<snip>

Apart form the absence of verification for the browser's support for the
required features (which can be assumed to be in code previously
executed but not shown), This is a ridiculously inefficient formulation.
You are creating a *new* nodeList each time you read the - length -
property, and another *new* nodeList each time you assign a value to a -
visibility - property. So that is two nodeLists created for each
iteration of the loop (plus one when the length is exceeded).

A nodeList is specified as a "live" collection so we are not even
talking of just the overhead of creating a passive Array each time, but
the creation of quite a capable, complex and active object (then there
is the extra work for the garbage collector in destroying all of these
nodeLists).

It is considerably more efficient to assign a retrieved nodeList to a
local variable once and then iterate through its members by referring to
it through the local variable reference.

Richard.