Home/ Questions/Q 984477
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T05:01:23+00:00

I have a search page that is used in multiple places with multiple ‘themes’

  • 0

I have a search page that is used in multiple places with multiple ‘themes’ throughout my site. I have a few divs that can have their background color changed based on a radio button selection (whether they are enabled or not). I can do this just fine by changing the css class of the div on the fly with javascript.

However, these themes could potentially change, and the background color is grabbed from a database when the page is created. Right now I do this in the C# codebehind:

string bgStyle = "background-color:" +theme.searchTextHeaderColor +";";
OwnerSearchHeader.Attributes.Add("style", bgStyle);

In the Javascript I need to change this color to make it look disabled, and when the user clicks back to this div I need to re-enable it by changing it back to its original color. But since I only knew this color in the code-behind, I don’t know what it was in the Javascript.

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.

Alternatively I could create a hidden element, assign it the ‘enabled’ style, and use that as a reference in the JavaScript when enabling my div. This seems like a hack but maybe its the easiest way. I’m still new to a lot of this, so I’d appreciate any suggestions. Thanks for the input!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0