How to calculate website idle timer [Resolved]

Posted by kgovindarao523-21772 under ASP.NET on 12/26/2013 | Points: 10 | Views : 6746 | Status : [Member] [MVP] | Replies : 6
Hi,

My requirement is to Calculate website idle time.
i.e. i run my website and i don't perform any operation(even mouse move) for 1 min, then i need to display an error message.

Thanks in advance.

Thank you,
Govind



Responses

Posted by: Allemahesh on: 12/27/2013 [Member] [MVP] Silver | Points: 50

Up
0
Down

Resolved
This posible using JQuery.

See the below code:-


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>

<script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" language="javascript">
idleTime = 0;

$(document).ready(function() {
//Increment the idle time counter every minute.
var idleInterval = setInterval("displayMessage()", 10000); // 10 Seconds

//Zero the idle timer on mouse movement.
$(this).mousemove(function(e) {
idleTime = 0;
});

$(this).keypress(function(e) {
idleTime = 0;
});
})

function displayMessage() {
idleTime = idleTime + 1;
if (idleTime > 6) {
alert('Idle for for 1 min.');
idleTime = 0;
}
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>


If you help, click on "Mark As Answer" link.

Happy Coding.

kgovindarao523-21772, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Prabhukiran345 on: 12/27/2013 [Member] Starter | Points: 50

Up
0
Down

Resolved
Hi Govind,
Once go through this code. This may help you.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready(function(e)
{
var tt_exp = "1"; //set the exp time in min
tt_exp = (parseInt(tt_exp) * 60000); //set the time in microsecond
$(document).bind("idle.idleTimer", function(){
$("#divId").html("Time Out"); //here you can attach any function for timeout action
});
$(document).bind("active.idleTimer", function(){
//alert("You are alive ")
$("#divId").html("You are alive"); //This means the session is alive
});
jQuery.idleTimer(tt_exp);
});
</script>


Thanks,
Prabhu Kiran Bommareddy

kgovindarao523-21772, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Bageshkumarbagi on: 12/27/2013 [Member] Starter | Points: 25

Up
0
Down
hi
I got error on both code in prabhu code i got folling error
Microsoft JScript runtime error: Object doesn't support property or method 'idleTimer'.

And Mahesh code i got folowing error
Microsoft JScript runtime error: Object doesn't support property or method 'ready'

how can resolve the error plz let us know.

Thanks,
Bagesh Kumar Singh
Mark as answer if you have been satisfied

kgovindarao523-21772, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Allemahesh on: 12/27/2013 [Member] [MVP] Silver | Points: 25

Up
0
Down
Make sure you need to add the below tag:-

<script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>


kgovindarao523-21772, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Prabhukiran345 on: 12/27/2013 [Member] Starter | Points: 25

Up
0
Down
Hi,
Save the belove code as :"idle-timer.js" (JavaScript File) and try it.


( function( $ ) {

$.idleTimer = function( firstParam, elem, opts ) {

// defaults that are to be stored as instance props on the elem
opts = $.extend( {
startImmediately: true, //starts a timeout as soon as the timer is set up
idle: false, //indicates if the user is idle
enabled: true, //indicates if the idle timer is enabled
timeout: 30000, //the amount of time (ms) before the user is considered idle
events: "mousemove keydown DOMMouseScroll mousewheel mousedown touchstart touchmove" // activity is one of these events
}, opts );


elem = elem || document;

var jqElem = $( elem ),
obj = jqElem.data("idleTimerObj") || {},

/* (intentionally not documented)
* Toggles the idle state and fires an appropriate event.
* @return {void}
*/
toggleIdleState = function( myelem ) {

// curse you, mozilla setTimeout lateness bug!
if ( typeof myelem === "number" ) {
myelem = undefined;
}

var obj = $.data( myelem || elem, "idleTimerObj" );

//toggle the state
obj.idle = !obj.idle;

// reset timeout
var elapsed = ( +new Date() ) - obj.olddate;
obj.olddate = +new Date();

// handle Chrome always triggering idle after js alert or comfirm popup
if ( obj.idle && ( elapsed < opts.timeout ) ) {
obj.idle = false;
clearTimeout( $.idleTimer.tId );
if ( opts.enabled ) {
$.idleTimer.tId = setTimeout( toggleIdleState, opts.timeout );
}
return;
}

// create a custom event, but first, store the new state on the element
// and then append that string to a namespace
var event = $.Event( $.data( elem, "idleTimer", obj.idle ? "idle" : "active" ) + ".idleTimer" );
$( elem ).trigger( event );
},

/**
* Stops the idle timer. This removes appropriate event handlers
* and cancels any pending timeouts.
* @return {void}
* @method stop
* @static
*/
stop = function( jqElem ) {

var obj = jqElem.data("idleTimerObj") || {};

//set to disabled
obj.enabled = false;

//clear any pending timeouts
clearTimeout( obj.tId );

//detach the event handlers
jqElem.off(".idleTimer");
};

obj.olddate = obj.olddate || +new Date();

if ( typeof firstParam === "number" ) {
opts.timeout = firstParam;
} else if ( firstParam === "destroy" ) {
stop( jqElem );
return this;
} else if ( firstParam === "getElapsedTime" ) {
return ( +new Date() ) - obj.olddate;
}


/* (intentionally not documented)
* Handles a user event indicating that the user isn't idle.
* @param {Event} event A DOM2-normalized event object.
* @return {void}
*/
jqElem.on( $.trim( ( opts.events + " " ).split(" ").join(".idleTimer ") ), function() {
var obj = $.data( this, "idleTimerObj" );

//clear any existing timeout
clearTimeout( obj.tId );

//if the idle timer is enabled
if ( obj.enabled ){
//if it's idle, that means the user is no longer idle
if ( obj.idle ){
toggleIdleState( this );
}

//set a new timeout
obj.tId = setTimeout( toggleIdleState, obj.timeout );
}
});

obj.idle = opts.idle;
obj.enabled = opts.enabled;
obj.timeout = opts.timeout;

//set a timeout to toggle state. May wish to omit this in some situations
if ( opts.startImmediately ) {
obj.tId = setTimeout( toggleIdleState, obj.timeout );
}

// assume the user is active for the first x seconds.
jqElem.data( "idleTimer", "active" );

// store our instance on the object
jqElem.data( "idleTimerObj", obj );
};

$.fn.idleTimer = function( firstParam, opts ) {
// Allow omission of opts for backward compatibility
if ( !opts ) {
opts = {};
}

if ( this[0] ){
return $.idleTimer( firstParam, this[0], opts );
}

return this;
};

})( jQuery );


Thanks,
Prabhu Kiran Bommareddy

kgovindarao523-21772, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Prabhukiran345 on: 12/27/2013 [Member] Starter | Points: 25

Up
0
Down
Hi Bageshkumar,
Once look after the link below provided. This may give you a clear view.

https://github.com/mikesherov/jquery-idletimer

Thanks,
Prabhu Kiran B.

Thanks,
Prabhu Kiran Bommareddy

kgovindarao523-21772, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response