Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Code to hide / show divs onload

M

MegaMan1311

macrumors regular
Original poster
Jun 30, 2007
216
0
USA
I need a javascript code to hide or show divs onload. I am using it to hide a non javascript version of the content and show a javascript version. So that if the user doesn't have javascript enabled, the javascript content will not be shown and they will see a no javascript version and vice-versa.

I have gotten so far as that the javascript version is hidden and the no script version is visible.

Thanks in advance!

MegaMan1311
 
Gizmotoy

Gizmotoy

macrumors 65816
Nov 6, 2003
1,108
164
Well, in your non-javascript div (default to visible) put the following in the div:
onload="Element.hide( this )"

And in the javascript div (default to invisible) put the following:
onload="Element.show( this )"

I'm not a great javascript guy, but I think that should take care of it. If javascript is not enabled the onloads are ignored and the default non-javascript version is shown. Though like I said I'm not the best and my javascript experience is limited mainly to scriptaculous. Sorry if it doesn't work for you, I just saw you hadn't gotten any other responses.
 
X

Xyl

macrumors regular
Dec 30, 2006
181
0
Use CSS with display:none
Assign a class name to the CSS property and enable/disable the class of your div element using JavaScript.
document.getElementById("divElement").className = "putclassnamehere";
 
M

MegaMan1311

macrumors regular
Original poster
Jun 30, 2007
216
0
USA
Xyl said:
Use CSS with display:none
Assign a class name to the CSS property and enable/disable the class of your div element using JavaScript.
document.getElementById("divElement").className = "putclassnamehere";
Click to expand...
Thanks to both of you. I tried both, but they did not work. Here is my code for the second one:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.hidden {
	display: none;
}
-->
</style></head>
<body>
<script type="text/javascript">document.getElementById("shown").className = "hidden";</script>
<script type="text/javascript">document.getElementById("hidden").className = "shown";</script>
<div id="shown">No Javascript</div>
<div id="hidden">Javascript</div>
</body>
</html>

What am I doing wrong? Thanks in advance.
 
X

Xyl

macrumors regular
Dec 30, 2006
181
0
It should be div class="hidden"

So then you'd have something like..
.hidden
{
display:none;
}

<div id="theElement" class="hidden">Won't see this.</div>

Then the javascript would be:
// Make "Won't see this" appear
document.getElementById("theElement").className = "";
 
S

stndn

macrumors member
Oct 22, 2006
80
1
earth
In the code you posted, you are trying to change the element's class before it is present in the HTML page.
When the javascript code is executed, the script cannot find the element (yet) so nothing happens.

If you moved the <div>'s above the script used to change the class name, then you should see it working.

-stndn.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom