Change CSS class Attributes Dynamically

Change CSS class Attributes Dynamically

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.

Re: Change CSS class Attributes Dynamically

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.

Re: Change CSS class Attributes Dynamically

"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

Re: Change CSS class Attributes Dynamically

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.

"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

Re: Change CSS class Attributes Dynamically

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.

Re: Change CSS class Attributes Dynamically

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.

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: