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






3.63/5 (5 votes)
Sep 29, 2005

50951
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:
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 Label
s.
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