locked
Highlighting label control on label click RRS feed

  • Question

  • User-1994446809 posted

    Hello forum,

    I recently surfed the internet in search of how to highlight label control and change the color of the highlighted label with colorpicker; I found this link but when i followed it directions to highlight label on label click I could not find the label_Click in the Events page in the properties windows.

    Here is the article:

    https://docs.microsoft.com/en-us/visualstudio/ide/step-4-add-a-click-event-handler-to-each-label?view=vs-2019

    Please I need help in learning how to change color of a highlighted label on button click. For instance, I have 5 label controls and a button and I want to change color of a label when I highlight a label and click the button to change color.

    What I tried is quite different from what I want to achieve

    HTML

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
          <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <div>
                <center>
            <br /><br />
            <asp:Label ID="Label1" runat="server" Text=" Name"></asp:Label><br /><br />
            <asp:Label ID="Label2" runat="server" Text="Your Role"></asp:Label><br /><br />
            <asp:Label ID="Label3" runat="server" Text="Age"></asp:Label><br /><br />
            <asp:Label ID="Label4" runat="server" Text="ID Number"></asp:Label><br /><br />
            <asp:Button ID="Button1" runat="server" Text="Change Color" />
    
            <asp:TextBox ID="TextBox1" runat="server" Style="display: none;" />
            <cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1" PopupButtonID="Button1" PopupPosition="Right" OnClientColorSelectionChanged="ColorChanged" />
            </center>
            </div>
        </form>
         <script type="text/javascript">
            function ColorChanged(sender) {
                //sender.get_element().value = "#" + sender.get_selectedColor();
                document.getElementById("Label4").style.color = "#" + sender.get_selectedColor();
            }
        </script>
    </body>
    </html>
    Friday, October 2, 2020 9:10 PM

Answers

  • User409696431 posted

    You can use <input type="color"> to create a color picker, and react to that choice with JavaScript to change the color of elements in your page.

    See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color for a complete example, including the Javascript functions.  Just copy that and see how it works, then adapt it to what you want to do.

    I should mention that input type="color" has wide support, but not universal support.  See: https://caniuse.com/input-color

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 3, 2020 8:46 AM

All replies

  • User409696431 posted

    First, clarify what kind of project you are working on.  The link you gave is for a Windows Forms project (one that runs on a Windows desktop computer). That is handled in a different forum.  The current forum is at https://docs.microsoft.com/en-us/answers/topics/windows-forms.html  You can search the old forum at https://social.msdn.microsoft.com/Forums/en-US/home?forum=winforms 

    From your other post, I think are working with Web Forms, in which case this is the right forum (although the Web Forms section would be better than the Getting Started section), but you followed a wrong tutorial.

    Saturday, October 3, 2020 6:10 AM
  • User-1994446809 posted
    1. Hi KathyW, 

    I am trying to create a software/website where users can design invoice, certificates to their taste. These mentioned documents will logo on them; the image control is for uploaded logo. On these mentioned documents, label controls forecolor can be changed to a desired color. That is why I am seeking help on how to change colors of label controls when a label is highlighted. When a particular label is being highlighted, then "change color" button is clicked, it should popup a color picker and change the color of that label upon selecting color from color picker.

    Please can you help me?

    Saturday, October 3, 2020 8:21 AM
  • User409696431 posted

    You can use <input type="color"> to create a color picker, and react to that choice with JavaScript to change the color of elements in your page.

    See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color for a complete example, including the Javascript functions.  Just copy that and see how it works, then adapt it to what you want to do.

    I should mention that input type="color" has wide support, but not universal support.  See: https://caniuse.com/input-color

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 3, 2020 8:46 AM
  • User-1994446809 posted

    Hi KathyW, 

    Thank you very much for the link..It was helpful, and I really appreciate your help.

    Thank you.

    Saturday, October 3, 2020 4:52 PM