How to hide custom control after certain time

Question

I have a custom control which displays results of some operations.

It is hidden by default and its made visible on the code-behind of some other class.

Now I want to hide it after a certain amount of time. How do I do it?

Edit:

Some answers suggested adding following javascript block at the end of the custom control which is not working if Visible="false" is used on the custom control.

But I did not made that clear enough and so accepted that as an answer.
Have to take a look at: How to call javascript function from code-behind

The timeout function is correctly called if Visible="true" is used.

ASPX:

<control id="customControl" runat="server" Visible="false"/>

Solution if Visible="true" is used in markup:

Custom control - ASPX:

<div id="body">
    <!-- custom control -->
</div>
<script type="text/javascript">     
    window.setTimeout(function() { document.getElementById('<%=Me.divBody.ClientID%>').style.display = 'none'; }, 2000);
</script>

Custom control - Code-behind:

Me.customControl.Visible = True

Solution if Visible="false" is used in markup:
From start the script block is not rendered and later is not added automatically. So we need to register it.

Custom control - ASPX:

<div id="divBody">
    <!-- custom control -->
</div>
<script type="text/javascript">     
    window.setTimeout(function(){ alert("test"); });         
</script>

Custom control - Code-behind:

Me.customControl.Visible = True
Dim hideScript AS String = "window.setTimeout(function() { document.getElementById('" & Me.divBody.ClientID & "').style.display = 'none'; }, 2000);"
ScriptManager.RegisterClientScriptBlock(Me.Page, Me.GetType, "script", hideScript, True)

Source: http://www.codeproject.com/Tips/85960/ASP-NET-Hide-Controls-after-number-of-seconds

score 0 · Answer 1 · answered Jul 02 '12 at 14:26

You could have a property on the object which when executed changed the visible property to false if you were outside of a stipulated time frame, so you'd have a visible from and until field and have that generate a boolean when compared to the current time.

score 0 · Answer 2 · answered Jul 02 '12 at 14:28

You can probably use the javascript setTimeout function to execute some code to hide the div which has the user control to hide after a time period

<div id="divUserControlContainer">
 //put your user control embed code here
</div>

<script type="text/javascript">
$(function(){

    window.setTimeout(function() {  
         $("#divUserControlContainer").hide();
    }, 2000);

});
</script>

score 0 · Answer 3 · answered Jul 02 '12 at 14:34

0

You achieve it by simple JQuery methods:

$("#CustomControl").hide(1000);
$("#CustomControl").show();

answered Jul 02 '12 at 14:34

HatSoft

11,077
3
28
43

score 0 · Accepted Answer · answered Jul 02 '12 at 14:39

0

I haven't seen any reference to jQuery in the question, hence vanilla JS solution: Put this at the end of the User Control file

<script type="text/javascript">
    setTimeout(function(){
         document.getElementById("<%=this.ClientID%>").style.display = "none";
        }, 5000);

</script>

answered Jul 02 '12 at 14:39

Chandu

81,493
19
133
134

This is not working, even a simple alert does not gets fired. The element is definetly made visible from code-behind. – djmj Jul 09 '12 at 12:56
Make sure there are no javascript errors on the page load and check – Chandu Jul 09 '12 at 12:56
I edited my question. The problem is if visible is set to false by default javascript is not called. If it is set to true the element is visible from start and the javascript timeout function is called. – djmj Jul 09 '12 at 13:08
A check can be added before assigning the setTimeout handler.In either case the solution above should work.. What is the issue you are facing? – Chandu Jul 09 '12 at 13:11
I reedited my question now with your code suggest and a simple alert example which is not working if `Visible="false"` is used on the custom control. – djmj Jul 09 '12 at 13:26
Gotcha.. The issue here is if you set the Visible property to false Asp.Net will not render the HTML for that control. Hence the script/code is not rendered to the browser to start with. – Chandu Jul 09 '12 at 13:29
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/13613/discussion-between-chandu-and-djmj) – Chandu Jul 09 '12 at 13:29

How to hide custom control after certain time

4 Answers4