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

**cdnhype** · 02-14-2007, 06:07 AM

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

**tech_support** · 02-14-2007, 06:20 AM

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>

**cdnhype** · 02-14-2007, 06:41 AM

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!

**codeexploiter** · 02-14-2007, 06:42 AM

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

Originally Posted by tech_support

Code:

document.getElementById(elementId).style.bgColor = color;

The bgColor property is now deprecated. Instead use

Code:

backgroundColor

**cdnhype** · 02-14-2007, 06:51 AM

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!

**tech_support** · 02-14-2007, 06:52 AM

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.

Originally Posted by codeexploiter

The bgColor property is now deprecated.

Geez, I'm slow.

**cdnhype** · 02-14-2007, 06:57 AM

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?

**codeexploiter** · 02-14-2007, 07:09 AM

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

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

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions