ansaurus

Question

create css class on the fly in codebehind

Answer 1

A:

You can use the jquery .toggleClass method.

Description: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.

Here is the link to the api doc. Jquery API

Haydar 2010-08-04 14:09:01

Answer 2

+2 A:

So my thought was to create a css class in the resulting HTML page when the page is loaded with the background color I need. Then I could simply switch from the divEnabled and divDisabled class in the javascript. But I'm not exactly sure how to do that.

Yes, this is the anser; do this. In the <head> of your document add a <style> and put your CSS in there like so: (my Asp.NET is a little rusty so forgive me if it has some hicups ;) )

<style>
    <!--
    .divEnabled {
        background-color:<%=theme.searchTextHeaderColor%>;
    }
    .divDisabled {
        background-color:gray; /* or wtv */
    }
    -->
</style>

You could also put it in an external CSS file, which may be a good idea.

Then write some JavaScript to add/remove the class attribute (I'm going to ask that you don't call is the "CSS Class" ;) )

var ownersearchheader = document.getElementById("<%=OwnerSearchHeader.ClientId%>");
// changing the class attribute to `divDisabled`
var newClassAttribute = ownersearchheader.getAttribute("class").replace(/\bdivEnabled\b/, "divDisabled")
ownersearchheader.setAttribute("class", newClassAttribute);
// ... or,
// changing the class attribute to `divEnabled`
var newClassAttribute = ownersearchheader.getAttribute("class").replace(/\bdivDisabled\b/, "divEnabled")
ownersearchheader.setAttribute("class", newClassAttribute);

This is indeed a mouthfull, so, like @Haydar says, you might want to use jQuery, which offers easy-as-pie addClass(), removeClass() and toggleClass() methods.

LeguRi 2010-08-04 14:17:08

Thank you for the response. I thankfully already have the javascript written to swap the classes, so that's not a problem. I was more concerned with creating the css in the first place based on the theme. I do have a separate .css file, but I cannot modify that because it is used sitewide, and each of the instances of this page will have different themes, and thus different background colors. I don't think I can bind using <%=theme.searchTextHeaderColor%> in the css file...

Kevin 2010-08-04 14:25:57

You could bind like that in the CSS file if you changed it to a `.aspx` file... but that may be overkill.

LeguRi 2010-08-04 15:57:39

Yes Richard, this is what you have to do as far as I can tell. You can't actually use the <%= %> code block in a css definition.

Kevin 2010-08-05 18:38:32

ansaurus

tags:

views:

answers:

create css class on the fly in codebehind

related questions