Click here to Skip to main content
15,860,859 members
Articles / Web Development / ASP.NET
Article

Auto-hide an ASP.NET 2.0 control after X seconds using client-side JavaScript

Rate me:
Please Sign up or sign in to vote.
3.63/5 (5 votes)
4 Oct 2005 50.4K   32   4
This code will iterate through all the controls on a page, finds the type you wish to hide (status labels after clicking the Submit button, for example), and hide them using JavaScript after X number of seconds.

Introduction

I needed a way to hide an ASP.NET Label control after a few seconds. I have a page where the user can write some text in a textbox, click Submit, then a label displays "Saved!" -- I wanted that label to disappear after a few seconds in case the user wanted to edit the text and save again, thus displaying the saved label for a few more seconds.

Nothing too complicated, just some VB code that iterates through all the controls on the page, looks for a Label control with the first few chars of the ID matching "lblStatus" or "lblSaved", then writes the JavaScript block to hide those controls after a few seconds.

I have applied this code within a class I call "commonFunctions" and I call it from my master page Load event:

VB
commonFunctions.hideAllStatusLabelsAfterXSecs(Page)

Hopefully the code is self-explanatory and you can modify it for your needs. It can apply to any type of control, not just Labels.

VB
Public Shared Function hideAllStatusLabelsAfterXSecs(ByVal mePage As Page)
        ' hide all "lblStatus" and "lblSaved" labels after X seconds

        ' based on this javascript:
        ' <script type='text/javascript'>
        ' if (document.getElementById('control_id') != null)
        ' var x1 = setTimeout("document.getElementById('control_id').
        '                               style.display='none'", 2000);
        ' </script>

        ' ^^ control_id is control.ClientID in ASP.NET 2.0 code

        ' # of seconds until hide
        Dim xsecs As Integer = 2

        ' convert request seconds into js seconds
        Dim realSecs As Integer = xsecs * 1000

        ' define the script string to add to the page
        Dim theScript As New StringBuilder

        ' js header
        theScript.Append("<script type='text/javascript'>" + vbCrLf)
        theScript.Append("// hide all status labels after X seconds" + vbCrLf)

        ' iterate through all page controls
        Dim oControl As Control
        Dim childc As Control
        Dim labelall As Label
        Dim countControls As Integer = 0
        Dim jsCtrlStr As String ' document.getElementByID('ctrl_id')

        For Each oControl In mePage.Form.Controls
            For Each childc In oControl.Controls
                ' is it a label?
                If TypeOf childc Is Label Then
                    labelall = CType(childc, Label)

                    ' is it a label we want to hide after X seconds?
                    If Left(childc.ID.ToString, 9) = "lblStatus" Or _
                        Left(childc.ID.ToString, 8) = "lblSaved" Then

                        ' increment variable so no two vars are the same in js
                        countControls = countControls + 1

                        ' define js control string
                        jsCtrlStr = "document.getElementById('" & _
                                             childc.ClientID & "')"

                        ' is the control currently visible? script error otherwise
                        theScript.Append("if (" & jsCtrlStr & " != null) ")

                        ' rest of js
                        theScript.Append("var x" & countControls.ToString & _
                            " = setTimeout(""" & jsCtrlStr & _
                            ".style.display='none'"", " & _
                            realSecs.ToString & ");" + vbCrLf)
                    End If
                End If
            Next
        Next

        ' js close block
        theScript.Append("</script>")

        'test: show client js block, stop
        'System.Web.HttpContext.Current.Response.Write(theScript.ToString)
        'System.Web.HttpContext.Current.Response.End()

        ' add js block to page
        mePage.ClientScript.RegisterStartupScript(GetType(String), _
                         "HideLabelControls", theScript.ToString)

        Return "0"
    End Function

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralThanks! Here is the C# version Pin
mpowrie18-Sep-07 22:40
mpowrie18-Sep-07 22:40 
GeneralRe: Thanks! Here is the C# version Pin
Mohamed Younis14-Apr-09 3:18
Mohamed Younis14-Apr-09 3:18 
GeneralRe: Thanks! Here is the C# version Pin
eduardosequeira28-Jan-10 3:54
eduardosequeira28-Jan-10 3:54 
GeneralUserControl Pin
eng_Hosam Kamel16-Jul-07 23:03
eng_Hosam Kamel16-Jul-07 23:03 

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.