Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    60
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Change Class Name

    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"?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You need a little more than that as there is no built in getElementsByClass function in javascript. This should work for you.
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    60
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you very much. This function worked perfectly


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •