Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

style.visibility='hidden' 1

Status
Not open for further replies.

Edge118

Programmer
Jun 15, 2004
104
US
Is there a way I can make both Cell1 and Cell2 disappear?
If I put more than one <div id="HideMe1"> in my code, then nothing disappears.
I'm just messing around with this stuff as I don't have
any experience with it.

Code:
<html>
<body onload="HideMe1.style.visibility='hidden'">


<table>



<tr>
<td> <div id="HideMe1"> Cell1 </div> </td>
<td> <div id="HideMe1"> Cell2 </div> </td>
</tr>




</table>
</body>
</html>

"Pin me. Perl me."

Regards,

Chris
 
Chris,

The implication behind id's are that they are unique. JavaScript can get confused when it is expecting one of something and there are two or more.

Make the second id HideMe2 and explicitly code both to be hidden.

If you're just messing around, then you might also try to assign the two DIVs to the same class, create a style-class for them, and then use JavaScript to either change what class these are assigned to or to actually alter the class itself.

Which method you use in a real-life situation would depend on a lot of things, but since you're just messing around, you might just try several methods.

Good luck.

--Dave
 
Is there a way to add a second id, HideMe2 to the onload event? I haven't had any luck.

<body onload="HideMe1.style.visibility='hidden'">

"Pin me. Perl me."

Regards,

Chris
 
Yes, just put semi-colons between the statement.

Neater, however, would be to do a function call in the onload and then put the commands in the function.

Either:

<body onload="HideMe1.style.visibility='hidden';HideMe2.style.visibility='hidden'">

...or:

<body onload="hideEm();">

and in your SCRIPT section:
Code:
function hideEm()
{
 HideMe1.style.visibility='hidden';
 HideMe2.style.visibility='hidden';
}

...OR...

Why not just put style='visibility:hidden' in the DIV tags themselves?

Any of these will work. 'hope that helps.

--Dave
 
Worked like a charm. Thanks for the help.

"Pin me. Perl me."

Regards,

Chris
 
You're very welcome. 'glad it worked for you. Thanks for the star!

--Dave
 
and If you want to process all Divs and don't know or care what their id's are, this code is generic.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<script language=javascript>
function HideAll() {
var allDivs = document.getElementsByTagName("div");
for (var i = 0; i <allDivs.length; i++) {
document.all[allDivs.id].style.visibility = "hidden";
}
}
function ShowAll() {
var allDivs = document.getElementsByTagName("div");
for (var i = 0; i <allDivs.length; i++) {
document.all[allDivs.id].style.visibility = "visible";
}
}
</script>
<html>
<head>
<title>Untitled</title>
</head>
<body onload="HideAll();">
<p><button name="ShowAll" onClick="ShowAll()">ShowAll</button>
<table border=1>
<tr>
<td><div id="HideMe1" style="visibility:hidden;"> Cell1 </div></td>
<td><div id="HideMe2" style="visibility:hidden;"> Cell2 </div></td>
</tr>
</table>
</body>
</html>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top