Change Class Name

elementis0

12-21-2007, 04:53 AM

Hello, I am developing a website and need a little help as I do not fully know JS.

My problem is that I want my webpage to not load anything else but the stuff in the noscript tag once the page is loaded.

I already have a concept on how this should be done except I dont know how to write JS to make this happen.

Basically I have all the div's I want to hide set to where class="hide"

I Need a javascript function the gets the class of each div when the page loads.
if the class="hide" I want it to change the class to something else so it would load the page such as class="null"

My idea for the JS would be something like
window.onload = document.getElementByClass("hide").Classname="null";

but that idea did not work.
so how is the JS supposed to be written so that it changes the classnames of all the divs where class="hide" to a value of class="null"?

_Aerospace_Eng_

12-21-2007, 05:14 AM

You need a little more than that as there is no built in getElementsByClass function in javascript. This should work for you.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.hide {
display:none;
}
</style>
<script type="text/javascript">
/*
Written by Jonathan Snook, http://www.snook.ca/jonathan
Add-ons by Robert Nyman, http://www.robertnyman.com
*/
function getElementsByClassName(oElm, strTagName, strClassName)
{
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++)
{
oElement = arrElements[i];
if(oRegExp.test(oElement.className))
{
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
window.onload = function()
{
var thedivs = getElementsByClassName(document,'div','hide');
for(i = 0; i < thedivs.length; i++)
{
thedivs[i].style.display = 'block';
}
}
</script>
</head>
<body>
<noscript>
Stuff that displays only if js is disabled
</noscript>
<div class="hide">test1</div>
<div class="hide">test2</div>
<div class="hide">test3</div>
</body>
</html>

elementis0

12-21-2007, 03:02 PM

Thank you very much. This function worked perfectly :)