Hide Label Automatically After Some Seconds Using JavaScript

In this tutorial we will explain how to Hide Label Automatically After Some Seconds Using JavaScript.Here we are using Textbox, Label and a submit button.By default label is set invisible, on click of button label is visible and will be invisible after 4 seconds automatically.

Design View:

01<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Hide_Label_Automatically_After_Some_Seconds.Index" %>
02 
03<!DOCTYPE html>
04 
05<html xmlns="http://www.w3.org/1999/xhtml">
06<head runat="server">
07<title>Hide Label Automatically After Some Seconds Using JavaScript</title>
08 
09<script type="text/javascript">
10window.onload = function () {
11var seconds = 4;
12setTimeout(function () {
13document.getElementById("<%=Autohide.ClientID %>").style.display = "none";
14}, seconds * 1000);
15};
16</script>
17 
18<style type="text/css">
19body
20{
21margin: 0px auto;
22width:900px;
23font-family:Calibri;
24font-size:14px;
25padding-top:100px;
26text-align:center;
27}
28.lbl
29{
30font-family:Calibri;
31font-size:24px;
32color:#154004
33}
34</style>
35</head>
36<body>
37<form id="form1" runat="server">
38<div>
39<h2>Hide Label Automatically After Some Seconds Using JavaScript</h2>
40     
41<br /><br />
42<asp:TextBox ID="Name" runat="server"></asp:TextBox>
43<br />
44<asp:Label ID="Autohide" runat="server" Visible="false" Text="Data has been Submitted" CssClass="lbl"></asp:Label><br /><br />
45<asp:Button ID="Submit" runat="server" Text="Submit" OnClick="Submit_Click" />    
46</div>
47</form>
48</body>
49</html>

Code:

01using System;
02using System.Collections.Generic;
03using System.Linq;
04using System.Web;
05using System.Web.UI;
06using System.Web.UI.WebControls;
07 
08namespace Hide_Label_Automatically_After_Some_Seconds
09{
10public partial class Index : System.Web.UI.Page
11{
12protected void Page_Load(object sender, EventArgs e)
13{
14}
15protected void Submit_Click(object sender, EventArgs e)
16{
17Autohide.Visible = true;
18}
19}
20}

Hide Label Automatically After Some Seconds Using JavaScript

Design View:

Code:

One reply on “Hide Label Automatically After Some Seconds Using JavaScript”