This is a migrated thread and some comments may be shown as answers.

Change Background Color on Pick

5 Answers 240 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 09 Jul 2008, 03:59 PM

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 ?

5 Answers, 1 is accepted

Sort by
0
David
Top achievements
Rank 1
answered on 09 Jul 2008, 07:27 PM

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 ?

0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 14 Jul 2008, 10:47 AM

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        

  

0
David
Top achievements
Rank 1
answered on 14 Jul 2008, 01:29 PM
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)

0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 15 Jul 2008, 12:11 PM
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
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 15 Jul 2008, 12:11 PM
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
Tags
ColorPicker
Asked by
David
Top achievements
Rank 1
Answers by
David
Top achievements
Rank 1
Obi-Wan Kenobi
Top achievements
Rank 1
Share this question
or