Change CSS class programmatically on load?

Question

I have two pages, let's call them "receipts.com" and "business.receipts.com". Both link to a page on a different domain via Response.Redirect("http://receipts2.com/default.aspx?mode=") where the "mode"-parameter is the referring page.

The recieving page should look in the query string, and choose a different CSS class according to the "mode"-parameter.

How is this accomplished? And is this the right way to do it?

Answer 1

Instead of swapping class names you can use the same class and different stylesheets. There are two ways to handle stylesheets: client side and server side.

On the client side, you can parse the query string and disable stylesheets using: (document.getElementsByTagName("link")[i]).disabled = true;

On the server side, you can use themes or simply add a placeholder around the style declarations and show/hide them using codebehind that looks at Response.QueryString["mode"]:

<asp:PlaceHolder ID="placeHolder1" runat="server" Visible="false">
   <link rel="stylesheet" href="/alternate.css" media="all" />
</asp:PlaceHolder>

and code behind in a master page somewhere:

if(Response.QueryString["mode"] == "blah")
{
  placeHolder1.Visible = true;
}

Answer 2

You can use document.referrer instead of passing in the page via querystring.

When you say "The receiving page should look in the query string, and choose a different CSS class", what is that class going to be set against, ie the body or an element like p?

Plain Javascript

document.getElementById("MyElement").className = " yourClass";

jQuery

$("p").addClass("yourClass");

Perhaps you meant a css theme?

and then you could try

if (document.referrer == "blahblah")
  document.write("<link rel='stylesheet' type='text/css' href='one.css' />)
else
  document.write("<link rel='stylesheet' type='text/css' href='two.css' />)

Although I would recommend looking into jQuery

$.get(stylesheet, function(contents){
  $("<style type=\"text/css\">" + contents + "</style>").appendTo(document.head);
});

Answer 3

You could use different Page-Themes:

protected void Page_PreInit(object sender, EventArgs e)
{
    switch (Request.QueryString["mode"])
    {
        case "receipts.com":
            Page.Theme = "DefaultTheme";
            break;
        case "business.receipts.com":
            Page.Theme = "BusinessTheme";
            break;
    }
}

Of course you can also use the code above to apply different Css-Classes to controls.

Answer 4

u can do something like this

    {
string hrefstring = null;

string mode = this.Page.Request.QueryString.Item("mode");


if (mode == "a") {
    hrefstring = ("~/yourcss/a.css");

} else if (mode == "b") {
    hrefstring = ("~/yourcss/b.css");
}

css.Href = ResolveClientUrl(hrefstring);
css.Attributes("rel") = "stylesheet";
css.Attributes("type") = "text/css";
css.Attributes("media") = "all";

Page.Header.Controls.Add(css);
    }