Buy Questpond's video subscriptions on huge discount.
DotNetFunda.com
Online: 1270
Home > Forums > ASP.NET >

How to calculate website idle timer [Resolved]

Posted by kgovindarao523-21772 under ASP.NET on 12/26/2013 | Points: 10 | Views : 8135 | Status : [Member] [MVP] | Replies : 5
Write New Post | Search Forums | AnsweredResolved Posts | Un Answered Posts | Forums Home 
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

Reply | Reply with Attachment
Alert Moderator 

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: 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

Latest Posts