Most of the Time Some Customers Require a Feature that if a user on their Web site is Idle or hasn't performed any activity for a period of 5 minutes ,then show an Alert box message or may be an expired user Session alert. (due to it requirement of customer).
Like in corporate sites or business Sites if we stay ideal for sometime automatically we will get an alert like your idle for this much time on this particular site and your session is going to expire within 5 minutes or something .
We can implement this functionality easily by using available JQuery plug-in.
For that first create new asp.net website in visual studio and write the following code in your aspx page .
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show alert message when user idle for sometime on webiste</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.idle-timer.js"></script>
<script type="text/javascript">
$undefinedfunctionundefined) {
var timeout = 5000;
$undefineddocument).bindundefined"idle.idleTimer", functionundefined) {
$undefined"#status").htmlundefined"User is idle :undefined").cssundefined"backgroundColor", "silver");
alertundefined"user idle for more than "+ undefinedtimeout/1000)+" secs")
});
$undefineddocument).bindundefined"active.idleTimer", functionundefined) {
$undefined"#status").htmlundefined"User is active :D").cssundefined"backgroundColor", "yellow");
});
$.idleTimerundefinedtimeout);
});
</script>
</head>
<body>
<form runat="server" id="form1">
<h1>Aspdotnet-Suresh.com</h1><h3>Showing User Active & Idle Status based on Time</h3>
<div id="status" style="padding: 5px;"> </div>
</form>
</body>
</html>
In the header section I added some of script files. By using those files we have a chance to show alert messages when user is idle for more than 5 secs (Here I took 5 sec time) on website using JQuery in asp.net and you can DOWNLOAD SAMPLE CODE From Bottom (attached).
Now Fress F5 anf run your application and check the output.
Sample OUT PUT
For more Information about this JQuery plugin check JQuery Idletimer-plugin and JQuery tooltip demo page idletimer-plugin
0 comments:
Post a Comment