Change Label color on selection of Ajax ColorPickerExntender in ASP.Net

RichardS...

SOLVED CLOSED ACTIVE ANSWERED
User: RichardSa
Posted: on May 26, 2023 03:52 AM
Forum: ASP.Net AJAX
Answer: 1
Views: 975
Sample Code: Download

How to do I change label color and make the label visible if user chooses dark background color.

For instance, if I choose black color from ColorPickerExtender the label color should change to white.

It’s just to adjust the label color to adjust to background color.

<asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
<cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1"
    PopupButtonID="ColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="LabelColor" />
<div class="input-group-append">
    <span class="input-group-text" id="ColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
    <span id="toggle_picker" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 10pt; border: none;"></span></span>
</div>
<script type="text/javascript">
    function LabelColor(sender) {
        document.getElementById("bgCard").style.backgroundColor = "#" + sender.get_selectedColor();
        document.getElementById("lblName").style.color = "#ffffff;"; //I tried to do this, but it did not work.
    }
</script>

Download FREE API for Word, Excel and PDF in ASP.Net

steven

0 1

Reply
ANSWER
User: steven
Replied: on May 26, 2023 06:26 AM
Report

Hi RichardSa,

Please refer below sample.

HTML

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:TextBox ID="TextBox1" runat="server" />
    <cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1"
        PopupButtonID="TextBox1" PopupPosition="Right" OnClientColorSelectionChanged="Color_Changed" />
    <div id="bgCard" style="height: 40px; width: 100px">
        <asp:Label ID="lblName" runat="server">ASPSnippets</asp:Label>
    </div>
    <script type="text/javascript">
        function Color_Changed(sender) {
            document.getElementById("bgCard").style.backgroundColor = "#" + sender.get_selectedColor();
            if (sender.get_selectedColor() == "000000") {
                document.getElementById("lblName").style.color = "#FFFFFF";
            }
            else {
                document.getElementById("lblName").style.color = "#000000";
            }
        }
    </script>
</form>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Change Label color on selection of Ajax ColorPickerExntender in ASP.Net

Company

Explore

Follow us

Contact Us