Quantcast

Change CSS class Attributes Dynamically

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Change CSS class Attributes Dynamically

Milind
Friends,


In one of the requirement we have a container Div, it uses css class to set the baground image of the Div.
Our requirement is to change the bagroundimage attribute of Css class at runtime based on certain conditions.


1) HTML will be loaded with default CSS.
2) On a specific event we want to change baground image, fornt colors etc attributes of  css classes.


Really appriciate any help on giving us directions.

Regards,
Milind N
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change CSS class Attributes Dynamically

elfwyn
There are many ways to modify css at runtime.
The most practical - in my opinion - is to add, remove or toggle classes with the corresponding
dojo.addClass(node,className) functions.
This way you can modify multiple css attributes securely without large amount of coding.

In this example I use toggle to add and remove a second class to the div.
However this will only work if the toggling class (otherBackground) is defined after the default class (defaultBackground), because the defaultBackground class is always present, but its background image
overwritten by the second class wich takes precedence.

If you want to work without defining classes beforehand you can access each nodes styles via the style attribute.

dojo.byId("content").style.backgroundImage = "url('z.jpg')";

Be aware that style attributes in Javascript are written different than in css.
Mostly you get the js-name of the attribute by removing dashes ("-") and applying camel cases.

<html>
<head>

<style type="text/css">
	@import url("js/dojo/resources/dojo.css");
	@import url("js/dijit/themes/claro/claro.css");

	#content{
		width:100%;
		height:100%;
	}
	div.defaultBackground{
		background-image: url('x.JPG');
	}
	div.otherBackground{
		background-image: url('y.JPG');
	}
  
</style>

<script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");

var clickHandler = function(evt){
	dojo.toggleClass(dojo.byId("content"),"otherBackground");
}

dojo.addOnLoad(function(){
	dojo.connect(dojo.byId("content"),"onclick",clickHandler);
});
</script>
</head>
<body class="claro">
		<div id="content" dojoType="dijit.layout.ContentPane" class="defaultBackground"></div>
</body>
</html>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change CSS class Attributes Dynamically

Karl Tiedt
"However this will only work if the toggling class (otherBackground) is
defined after the default class (defaultBackground), because the
defaultBackground class is always present, but its background image
overwritten by the second class wich takes precedence."

Is not completely accurate....due to specificty (in his example the
above statement applys but in CSS in general, there are other
options.) There are 3 ways to solve this using classes

1) remove your defaultClass/add newClass
2) write your newClass with a higher specificity than your default
class... ie. .defaultClass { background: blue; } div.newClass {
background: red; } (newClass is more specific and there for has the
higher precedence)
3) dojo.style (not recommended for large scale CSS changes)

The ideal way to do this would be similar to how Dojo does themes for Dijit

assign a class to body... (or some other parent element)
write your css to be .newClass .defaultBackground { background: red; }
then you would only have to apply newClass in minimal places.

-Karl Tiedt
________________________________________________________
Dojotoolkit: http://dojotoolkit.org
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api
Tutorials: http://dojotoolkit.org/documentation

[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change CSS class Attributes Dynamically

Milind
Thanks everyone for taking time and  giving very important inputs.
 
We dont have much styling changes one is background image and one is font color for a specific text that is comming. we might have 3 or 4 css classes which needs to be dynamic and not many classes.
 
Business wants it to be in a way so that they upload the background image and front color with color code to be specified in the content management system, we pick it from there and apply it. Limitation With CSS approch is we need to specify this classes in CMS where authors will have to change specific attributes of  CSS and add the contents.
 
I was thinking to make it more simple for them where we take background image and related color codes as inputs and not css and when the content is loaded change the default css attributes based on inputs. Since they want to make it more dynamic and dont want to limit the color and baground image options to predifined number of sets. We are trying to provide the solution with less limits as the people who will be authoring the content will not be technical people and may not know what CSS is.
 
 
Let me know your views
 
1) Approch 1: Take these seconday CSS classes as inputs instead of background image and color codes. Which puts Technology understanding limits on business. If they modify the css incorrectly there will be UI issues with system.
 
2) Approach2: Just take the background image and fond color codes and modify the base css class attributes. This i need to see based on the above discussion if possible or not.
 
Regards,
Milind N

On Wed, Aug 24, 2011 at 8:57 PM, Karl Tiedt [via Dojo Toolkit] <[hidden email]> wrote:
"However this will only work if the toggling class (otherBackground) is
defined after the default class (defaultBackground), because the
defaultBackground class is always present, but its background image
overwritten by the second class wich takes precedence."

Is not completely accurate....due to specificty (in his example the
above statement applys but in CSS in general, there are other
options.) There are 3 ways to solve this using classes

1) remove your defaultClass/add newClass
2) write your newClass with a higher specificity than your default
class... ie. .defaultClass { background: blue; } div.newClass {
background: red; } (newClass is more specific and there for has the
higher precedence)
3) dojo.style (not recommended for large scale CSS changes)

The ideal way to do this would be similar to how Dojo does themes for Dijit

assign a class to body... (or some other parent element)
write your css to be .newClass .defaultBackground { background: red; }
then you would only have to apply newClass in minimal places.

-Karl Tiedt
________________________________________________________
[hidden email]

If you reply to this email, your message will be added to the discussion below:
http://dojo-toolkit.33424.n3.nabble.com/Change-CSS-class-Attributes-Dynamically-tp3280144p3281260.html
To unsubscribe from Change CSS class Attributes Dynamically, click here.

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change CSS class Attributes Dynamically

elfwyn
I don't know if I understood the whole problem here.

Your users are styling your web application through a CMS.
If you are using a CMS like Typo3 or Yoomla for example CSS Styles are not created or modified
dynamically at runtime with Javascript/Dojo.

CSS Style files can be altered directly by CMS users. Alternatively you could extend the CMS to allow editing of specific CSS attributes. This might require some customization of your CMS however.

So all that comes to my mind is some kind of CMS Text editor to style a page in realtime with javascript wich is later saved into the CMS with it's corresponding styles.

The most structured way would be for the user to create style classes and apply them to nodes.
You could hide the complexity by allowing only certain style attributes to change, like background and font color on the root of the page and so on.

After creating and appyling those css classes they would need to be saved in the CMS and incorporated into the output. For example by dynamically creating style tags in your CMS Template from your Database.
With the appropriate backend implementation you could also create css files dynamically and include them in the appropriate pages.

Editing dojo styles directly (change existing css files) is rather complex even for me and I wouldn't recommend CMS authors to edit them or add to them directly.

Since I don't see the whole picture yet I can't give a more precise answer.

Yours

Elfwyn
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change CSS class Attributes Dynamically

Milind
Yes elfwyn,
 
I think your first reply was feasbile and better approch, We can take the inputs from them create template for secondary classes and initialize the attribute. When the content is displayed we apply those classes as secondary classes to the main class.
 
I will try this how it works for given situation.
 
Regards,
Milind N

On Thu, Aug 25, 2011 at 1:43 PM, elfwyn [via Dojo Toolkit] <[hidden email]> wrote:
I don't know if I understood the whole problem here.

Your users are styling your web application through a CMS.
If you are using a CMS like Typo3 or Yoomla for example CSS Styles are not created or modified
dynamically at runtime with Javascript/Dojo.

CSS Style files can be altered directly by CMS users. Alternatively you could extend the CMS to allow editing of specific CSS attributes. This might require some customization of your CMS however.

So all that comes to my mind is some kind of CMS Text editor to style a page in realtime with javascript wich is later saved into the CMS with it's corresponding styles.

The most structured way would be for the user to create style classes and apply them to nodes.
You could hide the complexity by allowing only certain style attributes to change, like background and font color on the root of the page and so on.

After creating and appyling those css classes they would need to be saved in the CMS and incorporated into the output. For example by dynamically creating style tags in your CMS Template from your Database.
With the appropriate backend implementation you could also create css files dynamically and include them in the appropriate pages.

Editing dojo styles directly (change existing css files) is rather complex even for me and I wouldn't recommend CMS authors to edit them or add to them directly.

Since I don't see the whole picture yet I can't give a more precise answer.

Yours

Elfwyn


If you reply to this email, your message will be added to the discussion below:
http://dojo-toolkit.33424.n3.nabble.com/Change-CSS-class-Attributes-Dynamically-tp3280144p3283305.html
To unsubscribe from Change CSS class Attributes Dynamically, click here.

Loading...