Change Background Color on Pick

[David]

I have an admin page designer, where I let users pick colors for the display of their site.  I do this by writing a custom style sheet that is served for all visitors.

I would like to dynamically change the page color based on the color picker choice for body background color or certain divs that are all specified by class names.

I am using a Master page with the style sheet and I define default body attributes as well as custom class names that affect header colors, table backgrounds etc.


So I guess the questinon is - how can I override the values in the style sheet based on the color picker values.

I have a start by adding a javascript for the onClientColorSelecting event

function

ChangeBackground( xxcolorxx )

{document.getElementsByTagName(

"body")[0].style.background = xxcolorxx ;}

How do I pass the selected color to this function ?

[David]

After more time playing and getting the values for the controls

I cam up with this :

function

ChangeBackground()

{document.getElementsByTagName(

"body")[0].style.background = document.aspnetForm.ctl00_ContentPlaceHolder1_RadColorPicker1_ClientState.value.substring(18,25); }

The clientstate property held a string I could parse out, so know my question is - How can I do this better ??  or easier.

And how can I do this for a defined style element that I apply to a table ?

[Obi-Wan Kenobi]

RadColorPicker has ClientColorChange event. You should handle it and invoke your function.
For example:
<telerik:RadColorPicker ShowIcon="true" ID="RadColorPicker1" runat="server" OnClientColorChange="HandleColorChange"/>

   <script type="text/javascript">
     function HandleColorChange (sender, eventArgs)
     {
              var selectedValue = sender.get_selectedColor();
                   ChangeBackground(selectedValue);
       }
    </script>

You can find a simple online example here:
http://www.telerik.com/DEMOS/ASPNET/Prometheus/ColorPicker/Examples/ClientSideAPI/DefaultCS.aspx
You can find more about RadColorPicker client events here:
http://www.telerik.com/help/aspnet-ajax/color_clientevents.html        

  

[David]

Thanks for the reply but I am doing that, my question was how might I do it better.  I found it difficult to get the values out of the control when passing to javascript.

A.  .NET feels it necessary to change my control names at run time.
B.  I suck at javascript
C. The control values were all valued pairs not a single value.
D. My values I wanted to change were in a style sheet


I found this URL from Apple Computers
http://developer.apple.com/internet/webcontent/styles.html

Which icludes prewritten functions to change styles by ID, class or tagname !

I have a text box & a radcolorpicker - each can change the other.  one is client side - one is server side ajax .

text box

<asp:TextBox ID="bgcolor" runat="server" Width="60px" OnTextChanged="bgcolor_TextChanged" Height="18px" AutoPostBack="True"></asp:TextBox>

picker

<telerik:RadColorPicker ID="RadColorPicker1" runat="server" Columns="16" Preset="Default" ShowIcon="True" Skin="Black" OnClientColorChange="ChangeBackground" ></telerik:RadColorPicker>

Even a regex validator for proper hex values:

<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="bgcolor" ErrorMessage="INVALID" SetFocusOnError="True" ValidationExpression="^#?([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?$"></asp:RegularExpressionValidator>

Then here are my event handlers

client side.  This changes the background style and sets the textbox text to the parsed hex value. And handles the fact that even a cancel click fires this event and I can get a null.

function

ChangeBackground()

{

if (document.aspnetForm.ctl00_ContentPlaceHolder1_RadColorPicker1_ClientState.value != "{\"selectedColor\":null}" )

{

document.aspnetForm.ctl00_ContentPlaceHolder1_bgcolor.value = document.aspnetForm.ctl00_ContentPlaceHolder1_RadColorPicker1_ClientState.value.substring(18,25);

document.getElementsByTagName(

"body")[0].style.background = document.aspnetForm.ctl00_ContentPlaceHolder1_RadColorPicker1_ClientState.value.substring(18,25);

}

}

Then if someone wants, they can type in a valid hex color that is not offered in the default palette choices. This sets the color picker value to the entered text in an ajax postback

Protected Sub bgcolor_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs)

RadColorPicker1.SelectedColor = ColorTranslator.FromHtml(bgcolor.Text)

End Sub

So that's all I've got.  Its klunky and experienced javascript folks could probably do it better but it works.

You did help me find a direction to look into doing it better by passing the event args in the function.That is how I should have gone after the values instead of parsing the text value. 

   function HandleColorChange (sender, eventArgs)

[Obi-Wan Kenobi]

You can get RadColorPicker client object with:
var colorPicker = $find('<%=RadColorPicker1.ClientID%>');
I created for you an example with the posted code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
      function ChangeBackground(sender, args)
        {
            var selectedColor = sender.get_selectedColor();
            $get("<%=bgcolor.ClientID%>").value = selectedColor;
            document.getElementsByTagName("body")[0].style.background = selectedColor;
        }
      function GetCurrentColor()
      {
        var colorPicker = $find('<%=RadColorPicker1.ClientID%>');
        alert(colorPicker.get_selectedColor());
      }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
    <asp:TextBox ID="bgcolor" runat="server" Width="60px" Height="18px"
    AutoPostBack="True" OnTextChanged="bgcolor_TextChanged"></asp:TextBox>

    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
     ControlToValidate="bgcolor" ErrorMessage="INVALID" SetFocusOnError="True"
     ValidationExpression="^#?([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?$"></asp:RegularExpressionValidator>

    <telerik:RadColorPicker ID="RadColorPicker1" runat="server"
     Columns="16" Preset="Default" ShowIcon="True" Skin="Black"
     OnClientColorChange="ChangeBackground" ></telerik:RadColorPicker>
    <input type="button" value="GetCurrentSelectedColor" onclick="GetCurrentColor()" />
    </div>
    </form>
</body>
</html>

Also I added a button - when you click it the current selected code will be alerted.
In the example below is showed how to set/get a color to RadColorPicker
http://www.telerik.com/DEMOS/ASPNET/Prometheus/ColorPicker/Examples/ClientSideAPI/DefaultCS.aspx

[Obi-Wan Kenobi]

You can get RadColorPicker client object with:
var colorPicker = $find('<%=RadColorPicker1.ClientID%>');
I created for you an example with the posted code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
      function ChangeBackground(sender, args)
        {
            var selectedColor = sender.get_selectedColor();
            $get("<%=bgcolor.ClientID%>").value = selectedColor;
            document.getElementsByTagName("body")[0].style.background = selectedColor;
        }
      function GetCurrentColor()
      {
        var colorPicker = $find('<%=RadColorPicker1.ClientID%>');
        alert(colorPicker.get_selectedColor());
      }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
    <asp:TextBox ID="bgcolor" runat="server" Width="60px" Height="18px"
    AutoPostBack="True" OnTextChanged="bgcolor_TextChanged"></asp:TextBox>

    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
     ControlToValidate="bgcolor" ErrorMessage="INVALID" SetFocusOnError="True"
     ValidationExpression="^#?([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?$"></asp:RegularExpressionValidator>

    <telerik:RadColorPicker ID="RadColorPicker1" runat="server"
     Columns="16" Preset="Default" ShowIcon="True" Skin="Black"
     OnClientColorChange="ChangeBackground" ></telerik:RadColorPicker>
    <input type="button" value="GetCurrentSelectedColor" onclick="GetCurrentColor()" />
    </div>
    </form>
</body>
</html>

Also I added a button - when you click it the current selected code will be alerted.
In the example below is showed how to set/get a color to RadColorPicker
http://www.telerik.com/DEMOS/ASPNET/Prometheus/ColorPicker/Examples/ClientSideAPI/DefaultCS.aspx