Click here to Skip to main content
13,558,758 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


11 bookmarked
Posted 5 Jun 2010
Licenced CPOL

ASP.NET Hide Controls after number of seconds

, 22 Jun 2010
Rate this:
Please Sign up or sign in to vote.
ASP.NET Hide Label/DIV Controls after number of seconds


One of the functional requirements for my web page is
to hide an ASP.NET Label Control after displaying it for number of
seconds in response to button click event. I found few examples on
but somewhat not meet my constraint. I'm also looking for functionality to hide
controls other than the Label control, hide multiple controls simultaneously
and writing client-side JavaScript for re-use. I have put together an example
code showing the implementation of the mentioned requirements.

Figure 1


Putting everything together

Shown below is the JavaScript function that accepts two
parameters namely ctrl and timer. The first parameter is a
string that contains the control ID for HTML markup. We can pass in a single
control ID or as many control ID as we need from the code behind. See below
for an example.

1. ControlOne.ClientID

2. ControlOne.ClientID + ","+ControlTwo.ClientID +", " + ControlThree.ClientID + …

The second parameter indicates how many milliseconds from now the application
should hide the control. This JavaScript function will split the ctrl on
the comma (,) and load the results into an array. Then it will loop through the
array and set the element property display value to "none".

Listing 1
function HideCtrl(ctrl, timer) {
    var ctry_array = ctrl.split(",");
    var num = 0, arr_length = ctry_array.length;
    while (num < arr_length) {
        if (document.getElementById(ctry_array[num])) {
            setTimeout('document.getElementById("' + ctry_array[num] + '").style.display = "none";', timer);
        num += 1;
    return false;

Shown in listing 2 is the content of the .aspx file.

Listing 2
<div style="width: 90%;">
    <div style="background:#CCCFFF;padding:5px 0 6px 10px">Guess the number game</div>
    <div style="border:solid 1px #919191;padding:0 0 20px;min-height:100px;">
        <asp:Label ID="Label1" runat="server" Text="Enter a number between 1 and 5" />
         <asp:TextBox ID="txtAns" runat="server" Width="30px" />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 

                runat="server" ErrorMessage="*" 

                Display="Dynamic" ControlToValidate="txtAns" />
        <asp:RangeValidator ID="RangeValidator1" runat="server" 

                ErrorMessage="(1-5)" ControlToValidate="txtAns" 

                Display="Dynamic" MaximumValue="5" Type="Integer" 

                MinimumValue="1" />
            <asp:Button ID="btnExampleOne" runat="server" Text="Submit" />  
            <br /> <br /><asp:Label ID="lblMsg" runat="server" Text="" />
            <div runat="server" visible="false" id="divBallon">
                <asp:Label ID="lblMsg2" runat="server" Text=""></asp:Label>
                <img src="images/ballons-07.gif" alt="ballons" />

Add the code shown in listing 3 to the page load events to direct the client not to store the responses in its history.
This will prevent the control from re-appearing when the user clicks on the browser back button.

Listing 3


Displayed below is the code in the button click event. The code is pretty straight forward.
Use the ScriptManager.RegisterStartupScript() method if the ASP.NET markup code are in the UpdatePanel,
else use the Page.ClientScript.RegisterStartupScript() method.

Listing 4

void btnExampleOne_Click(object sender, EventArgs e)
    Random rand = new Random();
    string strScript = string.Empty;
    int intRndNum = rand.Next(1, 6);
    int intRes = int.Parse(txtAns.Text);

    string strCtrl = lblMsg.ClientID;

    //multiple control
    //string strCtrl = lblMsg.ClientID + ", " + control2.clientID + "," +control3.ClientID;

    strScript = "HideCtrl('" + strCtrl + "', '3000')";

    if (intRes == intRndNum)
        lblMsg2.Text = "The correct number is: " + intRndNum + ". You entered: " + intRes + ". Good job!";
        lblMsg.Text = string.Empty;
        divBallon.Visible = true;
    //hide the DIV
        strScript = "HideCtrl('" + divBallon.ClientID + "', '3000')";
        divBallon.Visible = false;
        lblMsg.Text = "The correct number is: " + intRndNum + ". You entered: " + intRes + ". Please try again.";

    Page.ClientScript.RegisterStartupScript(this.GetType(), Guid.NewGuid().ToString(), strScript, true);


  • June 06, 2010: First release.


If you find any bugs or disagree with the contents, please drop me a line and I'll work with you to correct it.
I would suggest downloading the demo and explore it in order to grasp the full concept of it because I might left out some useful information.

IE, Firefox, Google Chrome, Safari

Tested on IE 6.0/7.0/8.0, Google Chrome, Firefox, Safari


Hide asp label after 5 seconds

HttpCachePolicy.SetNoStore Method

Watch this script in action



Download <pre><code><pre></pre>


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Bryian Tan
Software Developer (Senior)
United States United States
I have over 10 years of experience working with Microsoft technologies. I have earned my Microsoft Certified Technology Specialist (MCTS) certification. I'm a highly motivated self-starter with an aptitude for learning new skills quickly.

You may also be interested in...


Comments and Discussions

GeneralReason for my vote of 5 Well-written and informative. Thank... Pin
BrianBissell13-Sep-11 4:13
memberBrianBissell13-Sep-11 4:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180515.1 | Last Updated 22 Jun 2010
Article Copyright 2010 by Bryian Tan
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid