Fade in and out (flashing) text using JavaScript in C# ASP.Net application

Question

In part of my application (WebForm ASP.Net) I change a text on the web page. To take user attention to the change, I want to fade-out the text until completely make it disappear, then change the text and then fade-in to show the new text.

I have partially implemented this in JavaScript. I can fade-out and fade-in a text using below codes:

JavaScript

<script type="text/javascript">
    function toHex(d) {
        return ("0" + (Number(d).toString(16))).slice(-2).toUpperCase()
    }

    var direction = 1;
    var timer_is_on = 0;
    var rgb = 0;

    function timedCount() {
        var lab = document.getElementById('lblMessage');
        if (direction == 1) {
            rgb = rgb + 15;
        }
        if (direction == -1) {
            rgb = rgb - 15;
        }
        lab.style.color = "#" + toHex(rgb) + toHex(rgb) + toHex(rgb);;
        if (rgb >= 255 || rgb <= 0) {
            if (direction == 1) {
                direction = -1;
            }
            else {
                timer_is_on = 0;
                return;
            }
        }
        setTimeout(timedCount, 50);
    }

    function startEffect() {
        if (!timer_is_on) {
            timer_is_on = 1;
            direction = 1;
            rgb = 0;
            timedCount();
        }
    }
</script>

ASPX

<form id="frm" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="pnlMain" runat="server">
        <ContentTemplate>
            <div style="width: 400px; margin: 0 auto; text-align: center; font-size: x-large">
                <span id="lblMessage">No Record is Selected</span>
            </div>
            <button onclick="startEffect()">Start!</button>
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

The Problem

I don't know 2 things:

1. How I change the text after fade-out completes
2. How to do all these from code-behind in C#.

Note: I want to do that without jQuery or any other JavaScript library.

Answer 1

I think there might be some CSS techniques to do this code simpler and shorter but to make your code compatible with all browsers I follow the way you are doing it.

You need to pass the new message to your JS function. I also changed the JS to pass the Id of the control so you can use the code for multiple elements in your page.

<script type="text/javascript">
    function toHex(d) {
        return ("0" + (Number(d).toString(16))).slice(-2).toUpperCase()
    }

    var direction = 1;
    var timer_is_on = 0;
    var rgb = 0;

    function timedCount(controlId, newMsg) {
        var lab = document.getElementById(controlId);
        if (direction == 1) {
            rgb = rgb + 15;
        }
        if (direction == -1) {
            rgb = rgb - 15;
        }
        lab.style.color = "#" + toHex(rgb) + toHex(rgb) + toHex(rgb);
        if (rgb >= 255 || rgb <= 0) {
            if (direction == 1) {
                direction = -1;
                lab.innerText = newMsg;
            }
            else {
                timer_is_on = 0;
                return;
            }
        }
        setTimeout(timedCount.bind(null, controlId, newMsg), 50);
    }

    function startEffect(controlId, newMsg) {
        if (!timer_is_on) {
            timer_is_on = 1;
            direction = 1;
            rgb = 0;
            timedCount(controlId, newMsg);
        }
    }
</script>

Also to solve post-back issue, you need to use hidden field to do the trick. This is important otherwise, your text will be restored on post-back.

<form id="frm" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="pnlMain" runat="server">
        <ContentTemplate>
            <asp:HiddenField ID="hfMessage" runat="server" />
            <div style="width: 400px; margin: 0 auto; text-align: center; font-size: x-large">
                <asp:Label ID="lblMessage" runat="server" Text="No Record is Selected"></asp:Label>
            </div>
            <asp:Button ID="btnFlash" runat="server" Text="Change Text" OnClick="btnFlash_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

And this is the code-behind

protected void Page_Load(object sender, EventArgs e)
{
    // on first load, store the text message in hidden field
    if (!Page.IsPostBack)
    {
        hfMessage.Value = lblMessage.Text;
    }

    if (Page.IsPostBack)
    {
        // on postback, set the text message from hidden field which is populated in button click
        lblMessage.Text = hfMessage.Value;
    }
}

protected void btnFlash_Click(object sender, EventArgs e)
{
    // This would be your message, I just used a date-time to create dynamic message.
    string newMessage = DateTime.Now.Second.ToString() + " Records Selected";

    // store the new message in hidden field to change the text on post-back, otherwise your message will be restored on post-back
    hfMessage.Value = newMessage;

    // call JS from code-behind, pass the control ID and the new message
    ScriptManager.RegisterStartupScript(this, GetType(), "flash", "startEffect('lblMessage', '" + newMessage + "');", true);
}

This was a challenging question :)