check user is inactive show a popup and reset if he clicks on continue button javascript

Question

Requirement :

If user is inactive then show a popup after 5 minutes. and if selected continue session the timer will reset for this and again check for the same.
If user haven't click any continue button then the page will refresh.

go through http://stackoverflow.com/questions/1060008/is-there-a-way-to-detect-if-a-browser-window-is-not-currently-active — AB Udhay, Aug 26 '16 at 08:08

score 0 · Answer 1 · answered Aug 26 '16 at 08:03

0

How do you want to check if they are inactive?

You can tie an event to both the keyboard and mouse and reset timer each time the mouse moves/clicks or keydown.

answered Aug 26 '16 at 08:03

Vesprawn

1
1

score 0 · Answer 2 · answered Aug 26 '16 at 08:12

<body onmousemove = "canceltimer()"; onclick = "canceltimer()">

var tim = 0; 
function reload () 
{
tim = setTimeout("location.reload(true);",180000);   // 3 minutes
}
function canceltimer() 
{
 window.clearTimeout(tim);  // cancel the timer on each mousemove/click
 reload();  // and restart it
 }

score 0 · Answer 3 · answered Aug 26 '16 at 08:20

Using jQuery:

$(function() {
        (function handleInactivity() {
            var maxIdleTime = 5000; // 5 seconds
            var timeout = setTimeout(displayPopup, maxIdleTime);

            function resetTimer() {
                console.log("Timer reset");
                clearTimeout(timeout);
                timeout = setTimeout(displayPopup, maxIdleTime);
            }

            function displayPopup() {
                console.log("You're up");
                // Display popup of your choice
            }

            $(document).on("mousemove", resetTimer);
            $(document).on("mouseDown", resetTimer);
            $(document).keypress(resetTimer);
        })();
    });

Thanks for answer i have improved it as per my Requirement – Anuj Sachan Aug 27 '16 at 12:43 — Anuj Sachan, Aug 27 '16 at 12:43

score 0 · Answer 4 · answered Aug 27 '16 at 12:42

 _inactiveUserPopUp = function(warningTime,PageReloadTimeAfterWaring){

        var maxIdleTime = warningTime *1000,timeout,resetTimer,displayPopup,pageReload;

            timeout = setTimeout(displayPopup, maxIdleTime);

            resetTimer = function(){
             // console.log("Timer reset");
            clearTimeout(timeout);
            timeout = setTimeout(displayPopup, maxIdleTime);
        };

            displayPopup = function(){
                //console.log("You're up");
            clearTimeout(timeout);
            var reloadPage = setTimeout(pageReload, PageReloadTimeAfterWaring*1000);

            $(".modalDialog").css({
                "opacity": 1,
                "display": "block"
            });

            $(".close").on("click", function() {
                $(".modalDialog").css({
                    "opacity": 0,
                    "display": "none"
                });
            });

            $("#extend-session").off().on("click", function() {

                clearTimeout(reloadPage);

                $(".modalDialog").css({
                    "opacity": 0,
                    "display": "none"
                });

                $.ajax({
                    url: $("#openModal").data("ajaxUrl"),
                    type: "POST",
                    data: {
                        activeUser: true
                    },
                    success: function(data) {

                    }
                });

            });
        };

        pageReload = function(){
              //console.log("reload page now")
            $(document).off("mousemove");
            $(document).off("mouseDown");
            $(document).off("keypress");

            window.location.reload();
        };

        $(document).on("mousemove", resetTimer);
        $(document).on("mouseDown", resetTimer);
        $(document).keypress(resetTimer);

    };

check user is inactive show a popup and reset if he clicks on continue button javascript

4 Answers4