Change Background Color on Pick

6 posts, 0 answers
  1. David
    David avatar
    77 posts
    Member since:
    Apr 2008

    Posted 09 Jul 2008 Link to this post


    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 ?

  2. David
    David avatar
    77 posts
    Member since:
    Apr 2008

    Posted 09 Jul 2008 Link to this post


    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 ?

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 14 Jul 2008 Link to this post

    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        

      

  5. David
    David avatar
    77 posts
    Member since:
    Apr 2008

    Posted 14 Jul 2008 Link to this post

    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)

  6. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 15 Jul 2008 Link to this post

    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
  7. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 15 Jul 2008 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017