Automatically Hide Label after some seconds in ASP.Net

Introduction: Hello Guys, “Welcome back” Today, I am here with another one new great article. In this article I explained the implementation about how to automatically hide an ASP.Net Label control after some seconds (say 5 seconds) using JavaScript.

Code of HTML Page

On the HTML page I placed controls a TextBox with the id named txt_name, a Button with the id named btn_submit  and a Label with the id named lbl_message and set visible property of Label  control is set to False. The Label will be made visible from server side after the click of the button.

Enter Name:

<asp:TextBox ID="txt_name" runat="server" />

<br />

<asp:Button ID="btn_submit"  Text="Submit" runat="server" OnClick="Submit" /><br />

<br />

<asp:Label ID="lbl_message" ForeColor="Green" Font-Bold="true" Text="Form has been submitted successfully." runat="server" Visible="false" />

 

Below is the code to make the Label visible on button click.

C#

protected void Submit(object sender, EventArgs e)

{

    Lbl_message.Visible = true;

    ClientScript.RegisterStartupScript(this.GetType(), "alert", "hide_label();", true);

}

 

Automatically Hiding Label control after 02seconds using JavaScript

I created a JavaScript function that will be hiding the Label after 5 seconds when you click on the Buttom. This function using the ClientScript RegisterStartupScript method after clicking the Button.

A variable seconds holds the value which determines after how many seconds the Label will hide. You can set whatever value you need in seconds as per your requirement.

Finally within JavaScript setTimeout function, the Label is hidden by setting its CSS display property to none and the timeout is specified by multiplying the ‘seconds’ variable to 1000 as setTimeout function accepts value in Milliseconds.

<script type="text/javascript">

    function hide_label() {

        var seconds = 2;

        setTimeout(function () {

            document.getElementById("<%=lbl_message.ClientID %>").style.display = "none";

        }, seconds * 1000);

    };

</script>

Conclusion: In above code, I have been explained that how to automatically hide an ASP.Net Label control after some seconds (say 2 seconds) using JavaScript. Bye and take care of yourself Developers. We will come back shortly with the new article.

 

Regards

Programming Hub