Results 1 to 4 of 4

Thread: Changing CSS Class on load

  1. #1
    Join Date
    Nov 2005
    Posts
    40
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default Changing CSS Class on load

    I found this code on the net, but I was wondering if someone could tell me how I can have a piece of text change its class when the page loads. What I want to do is, instead of changing the class when u click on a link, I want to change the class when the page loads.

    Code:
    <style type="text/css">
    .first
    {
    color: black;
    }
    .second
    {
    color: red;
    }
    </style>
    <script language="JavaScript">
    function change(id, newClass) {
    
    identity=document.getElementById(id);
    
    identity.className=newClass;
    
    }
    </script>
    <h1 class="first" id="changeme">Changeable text</h1>
    <a href="javascript:;" onClick="change('changeme', 'second');">RED</a> |
     <a href="javascript:;" onClick="change('changeme', 'first');">BLACK</a>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Changing the class onload will often be such a quick event that the original class of the element will never be apparent in certain situations. However, the way to do this onload, would be to do it onload. Find the body tag on the page and put this (highlight red) in it:

    Code:
    <body onload="change('changeme', 'second');">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by SawnDiddle
    <script language="JavaScript">
    The language attribute was deprecated long ago:

    HTML Code:
    <script type="text/javascript">
    function change(id, newClass) {

    identity=document.getElementById(id);

    identity.className=newClass;

    }
    As you have omitted the var keyword, the identity variable will become global (not a desirable thing). Feature detection and a bit of defensive programming wouldn't go amiss, either:

    Code:
    function setClassName(id, className) {
      var element;
    
      if(document.getElementById && (element = document.getElementById(id))) {
        element.className = className;
      }
    }
    <a href="javascript:;" [...]
    Ack! I hope that this is just an example. Don't use the javascript: pseudo-scheme like this; it's not what it was designed to do, and can have negative effects. Using an empty fragment identifier and cancelling the click event is marginally better (but only just):

    HTML Code:
    <a href="#" onclick="setClassName('changeme', 'second'); return false;">
    Mike

  4. #4
    Join Date
    Nov 2005
    Posts
    40
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    thanks for the help, but is there a way that I can use the onload code for another part of my page other than the body tag?

    The reason is that on my site, when a page is loaded, it loads 3 parts (header, body and footer). For this code, I want to place the code in the body and change an element in the header when it loads. Unfortunately, the body tag is right in the middle of my header file.

    This is what a typical page looks like. The javascript will go in a page very similar to this one and will change something in the header file.

    Code:
    <? include("/home/shadowru/public_html/cookiecheck.php"); ?>
    <!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">
    <html>
    <head>
    <title>ShadowRulers.com</title>
    
    <? include($headervar.$skin.$extension); ?>
    
    </div>
    <div id="midcol"><div class="sborder">
        <div class="contentHeader">History of ShadowRulers.com</div></div><br />
      <div class="sborder">Some Content here.</div><br />
            </div>
      
    <? include($footervar.$skin.$extension); ?>
    Last edited by SawnDiddle; 01-18-2006 at 02:17 AM.

Bookmarks

Posting Permissions

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