Results 1 to 8 of 8

Thread: Updated CSS with JS then call a render event with the new css class

  1. #1
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Updated CSS with JS then call a render event with the new css class

    Hello Everybody,

    This is my first time posting within the DD forum but a long time user of the website. Can I please pick some of your brains with my problem?

    Here is my issue:

    I've got a CSS class that I need to dynamically change within an onclick function then call a render function. That render call is also done on page load; this will over write it. I'm trying to change the color of the rendered div by modifying the CSS firstly. The onclick event first modifies the css class then calls the render function that will render the div again with the new updated CSS.

    Here is the CSS:

    <style type='text/css'>
    #div1{
    padding:7px 2px 2px 4px;background:#F8A0E0;
    }

    #div1 a, #div1 h2{
    color:#666666;
    }
    </style>

    Here are the functions:
    <script type="text/javascript">
    function setColor(a, b) {

    //this how I can change the color of the div .. it is changing the backgroundcolor but its not actually updating the CSS class that the renderDiv function calls

    document.getElementById(a).style.backgroundColor = b;

    //then i need to call the renderDiv event to render the div with the new CSS background color change.

    renderDiv(a);

    }

    </script>

    My div on page:

    <div id="div1">Content Here</div>

    Call to the setColor function:

    <a herf="javascript:setColor('div1', '#333333');">Change Color</a>


    This is driving me crazy ... but probably because I'm kind of a JS newbie.

    Thanks in advance!

    Chris

  2. #2
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Code:
    <script type="text/javascript">
    function setColor(elementId, color) {
    
    //this how I can change the color of the div .. it is changing the backgroundcolor but its not actually updating the CSS class that the renderDiv function calls
    
    document.getElementById(elementId).style.bgColor = color;
    
    //then i need to call the renderDiv event to render the div with the new CSS background color change.
    
    //renderDiv(a); //What's this?
    
    }
    
    </script>
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  3. #3
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I tried to make the example very simplistic when changing names. If you are familiar with NiftyCube then thats what renderDiv() is actually doing. It accepts
    the css class and rounds the corners of the div.

    I call this on page load which rounds the corners of the div. Im trying to change the background color of the div but to do so I need to change the CSS first ... then call renderDiv again (its actually a Nifty("div#box","big"); call but i renamed it as renderDiv for simplicity when posting my question)

    Thanks!

  4. #4
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type='text/css'>
    #div1{
    padding:7px 2px 2px 4px;background:#F8A0E0;
    }
    .div2{
    padding:7px 2px 2px 4px;background:#F8A0E0;
    }
    
    #div1 a, #div1 h2{
    color:#666666;
    }
    .newClass
    {
    	background-color:#99CC99;
    	color:#000000;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:14px;
    	font-weight:bold;
    	border:2px solid #000;
    	width: 200px;
    }
    </style>
    <script type="text/javascript">
    function setColor(divId)
    {
    	var bColor,fColor;
    	
    	bColor = prompt('Please enter the new background color for the Div','');
    	fColor = prompt('Please enter the new foreground color for the Div','');
    	
    	
    
    	var divOb = document.getElementById(divId);
    	
    	if(bColor != "")
    		divOb.style.backgroundColor = bColor;
    	if(fColor != "")
    		divOb.style.color = fColor;
    		
    	
    }
    
    function setClass(divId)
    {
    	var divOb = document.getElementById(divId);
    	divOb.className = "newClass";
    }
    </script>
    </head>
    
    <body>
    <div id="div1">DIV 1 Content Here</div><br>
    <div id="div2" class="div2">DIV 2 Content Here</div><br>
    <a href="#" onclick="setColor('div1');">change the color</a>&nbsp;<a href="#" onclick="setClass('div2');">setting class</a>
    </body>
    </html>
    Try the above code

    Quote Originally Posted by tech_support
    Code:
    document.getElementById(elementId).style.bgColor = color;
    The bgColor property is now deprecated. Instead use
    Code:
    backgroundColor
    Last edited by codeexploiter; 02-14-2007 at 06:49 AM.

  5. #5
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    codeexploiter,

    The solution you provided does change the background color but so does my original code that I posted. What im after is the ability to update a CSS class and then call another function that can use CSS class that was modified.

    Any ideas?

    Thanks for all the quick responses!

  6. #6
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Quote Originally Posted by cdnhype
    What im after is the ability to update a CSS class and then call another function that can use CSS class that was modified.
    Nope. Not without refreshing the page.

    Quote Originally Posted by codeexploiter
    The bgColor property is now deprecated.
    Geez, I'm slow.
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  7. #7
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Here is a sample:

    http://www.html.it/articoli/niftycube/nifty1.html

    I would like to change the color of the background without having to refresh the page with a new CSS. So, i figured maybe first change the css then call the NiftyCube() again.

    Maybe there is a better approach?

  8. #8
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    You can create a new css class with the details you want to apply then create a function like setClass in my code earlier and change the existing class name of the DIV block.

    If you are looking for some method for changing your existing CSS rule that you had put in your web page I don't think it is possible.

    You can change the CSS details dynamically using Javascript but i don't think it is not possible to make a permanent change in an already specified CSS rule

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
  •