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

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:

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.

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