Logo
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
jQuery Idle Timer fires a custom event when the user is "idle".
For more info please visit the Plugin's Github Repo

jQuery Idle Timer

The idle timer is built on jQuery and provides two events: idle.idleTimer and active.idleTimer, which fire when the user's idle state has changed. When you move your mouse over the page or start typing, you're considered active. On this page we have two idle timers. One for the entire document. Another for the text area on the right (or bottom if your on mobile).

Document Demo second timeout



                            <div class="btn-group mb-10">
                                <a href="javascript:;" id="btPause" class="btn btn-outline-secondary">Pause</a>
                                <a href="javascript:;" id="btResume" class="btn btn-outline-secondary">Resume</a>
                                <a href="javascript:;" id="btElapsed" class="btn btn-outline-secondary">Elapsed</a>
                                <a href="javascript:;" id="btInit" class="btn btn-outline-secondary">Init</a>
                                <a href="javascript:;" id="btDestroy" class="btn btn-outline-secondary">Destroy</a>
                            </div>
                            <textarea rows="10" cols="30" id="docStatus" class="form-control"></textarea><br />
							

                            var KTIdleTimerDemo = function() {
                                var _init = function() {
                                    //Define default
                                    var docTimeout = 5000;

                                    /*
                                    Handle raised idle/active events
                                    */
                                    $(document).on("idle.idleTimer", function(event, elem, obj) {
                                        $("#docStatus")
                                            .val(function(i, v) {
                                                return v + "Idle @ " + moment().format() + " \n";
                                            })
                                            .removeClass("alert-success")
                                            .addClass("alert-warning")
                                            .scrollTop($("#docStatus")[0].scrollHeight);
                                    });
                                    $(document).on("active.idleTimer", function(event, elem, obj, e) {
                                        $("#docStatus")
                                            .val(function(i, v) {
                                                return v + "Active [" + e.type + "] [" + e.target.nodeName + "] @ " + moment().format() + " \n";
                                            })
                                            .addClass("alert-success")
                                            .removeClass("alert-warning")
                                            .scrollTop($("#docStatus")[0].scrollHeight);
                                    });

                                    /*
                                    Handle button events
                                    */
                                    $("#btPause").click(function() {
                                        $(document).idleTimer("pause");
                                        $("#docStatus")
                                            .val(function(i, v) {
                                                return v + "Paused @ " + moment().format() + " \n";
                                            })
                                            .scrollTop($("#docStatus")[0].scrollHeight);
                                        $(this).blur();
                                        return false;
                                    });
                                    $("#btResume").click(function() {
                                        $(document).idleTimer("resume");
                                        $("#docStatus")
                                            .val(function(i, v) {
                                                return v + "Resumed @ " + moment().format() + " \n";
                                            })
                                            .scrollTop($("#docStatus")[0].scrollHeight);
                                        $(this).blur();
                                        return false;
                                    });
                                    $("#btElapsed").click(function() {
                                        $("#docStatus")
                                            .val(function(i, v) {
                                                return v + "Elapsed (since becoming active): " + $(document).idleTimer("getElapsedTime") + " \n";
                                            })
                                            .scrollTop($("#docStatus")[0].scrollHeight);
                                        $(this).blur();
                                        return false;
                                    });
                                    $("#btDestroy").click(function() {
                                        $(document).idleTimer("destroy");
                                        $("#docStatus")
                                            .val(function(i, v) {
                                                return v + "Destroyed: @ " + moment().format() + " \n";
                                            })
                                            .removeClass("alert-success")
                                            .removeClass("alert-warning")
                                            .scrollTop($("#docStatus")[0].scrollHeight);
                                        $(this).blur();
                                        return false;
                                    });
                                    $("#btInit").click(function() {
                                        // for demo purposes show init with just object
                                        $(document).idleTimer({
                                            timeout: docTimeout
                                        });
                                        $("#docStatus")
                                            .val(function(i, v) {
                                                return v + "Init: @ " + moment().format() + " \n";
                                            })
                                            .scrollTop($("#docStatus")[0].scrollHeight);

                                        //Apply classes for default state
                                        if ($(document).idleTimer("isIdle")) {
                                            $("#docStatus")
                                                .removeClass("alert-success")
                                                .addClass("alert-warning");
                                        } else {
                                            $("#docStatus")
                                                .addClass("alert-success")
                                                .removeClass("alert-warning");
                                        }
                                        $(this).blur();
                                        return false;
                                    });

                                    //Clear old statuses
                                    $("#docStatus").val("");

                                    //Start timeout, passing no options
                                    //Same as $.idleTimer(docTimeout, docOptions);
                                    $(document).idleTimer(docTimeout);

                                    //For demo purposes, style based on initial state
                                    if ($(document).idleTimer("isIdle")) {
                                        $("#docStatus")
                                            .val(function(i, v) {
                                                return v + "Initial Idle State @ " + moment().format() + " \n";
                                            })
                                            .removeClass("alert-success")
                                            .addClass("alert-warning")
                                            .scrollTop($("#docStatus")[0].scrollHeight);
                                    } else {
                                        $("#docStatus")
                                            .val(function(i, v) {
                                                return v + "Initial Active State @ " + moment().format() + " \n";
                                            })
                                            .addClass("alert-success")
                                            .removeClass("alert-warning")
                                            .scrollTop($("#docStatus")[0].scrollHeight);
                                    }


                                    //For demo purposes, display the actual timeout on the page
                                    $("#docTimeout").text(docTimeout / 1000);
                                }

                                return {
                                    //main function to initiate the module
                                    init: function() {
                                        _init();
                                    }
                                };
                            }();

                            jQuery(document).ready(function() {
                                KTIdleTimerDemo.init();
                            });
							

Element Demo second timeout



                            <div class="btn-group mb-10">
                                <a href="javascript:;" id="btReset" class="btn btn-outline-secondary">Reset</a>
                                <a href="javascript:;" id="btLastActive" class="btn btn-outline-secondary">Last Active</a>
                                <a href="javascript:;" id="btRemaining" class="btn btn-outline-secondary">Remaining</a>
                                <a href="javascript:;" id="btState" class="btn btn-outline-secondary">State</a>
                            </div>
                            <textarea rows="10" cols="30" id="elStatus" class="form-control"></textarea><br />
							

                            var KTIdleTimerDemo = function() {
                                var _init = function() {
                                    //Define textarea settings
                                    var
                                        taTimeout = 3000;

                                    /*
                                    Handle raised idle/active events
                                    */
                                    $("#elStatus").on("idle.idleTimer", function(event, elem, obj) {
                                        //If you dont stop propagation it will bubble up to document event handler
                                        event.stopPropagation();

                                        $("#elStatus")
                                            .val(function(i, v) {
                                                return v + "Idle @ " + moment().format() + " \n";
                                            })
                                            .removeClass("alert-success")
                                            .addClass("alert-warning")
                                            .scrollTop($("#elStatus")[0].scrollHeight);

                                    });
                                    $("#elStatus").on("active.idleTimer", function(event) {
                                        //If you dont stop propagation it will bubble up to document event handler
                                        event.stopPropagation();

                                        $("#elStatus")
                                            .val(function(i, v) {
                                                return v + "Active @ " + moment().format() + " \n";
                                            })
                                            .addClass("alert-success")
                                            .removeClass("alert-warning")
                                            .scrollTop($("#elStatus")[0].scrollHeight);
                                    });

                                    /*
                                    Handle button events
                                    */
                                    $("#btReset").click(function() {
                                        $("#elStatus")
                                            .idleTimer("reset")
                                            .val(function(i, v) {
                                                return v + "Reset @ " + moment().format() + " \n";
                                            })
                                            .scrollTop($("#elStatus")[0].scrollHeight);

                                        //Apply classes for default state
                                        if ($("#elStatus").idleTimer("isIdle")) {
                                            $("#elStatus")
                                                .removeClass("alert-success")
                                                .addClass("alert-warning");
                                        } else {
                                            $("#elStatus")
                                                .addClass("alert-success")
                                                .removeClass("alert-warning");
                                        }
                                        $(this).blur();
                                        return false;
                                    });
                                    $("#btRemaining").click(function() {
                                        $("#elStatus")
                                            .val(function(i, v) {
                                                return v + "Remaining: " + $("#elStatus").idleTimer("getRemainingTime") + " \n";
                                            })
                                            .scrollTop($("#elStatus")[0].scrollHeight);
                                        $(this).blur();
                                        return false;
                                    });
                                    $("#btLastActive").click(function() {
                                        $("#elStatus")
                                            .val(function(i, v) {
                                                return v + "LastActive: " + $("#elStatus").idleTimer("getLastActiveTime") + " \n";
                                            })
                                            .scrollTop($("#elStatus")[0].scrollHeight);
                                        $(this).blur();
                                        return false;
                                    });
                                    $("#btState").click(function() {
                                        $("#elStatus")
                                            .val(function(i, v) {
                                                return v + "State: " + ($("#elStatus").idleTimer("isIdle") ? "idle" : "active") + " \n";
                                            })
                                            .scrollTop($("#elStatus")[0].scrollHeight);
                                        $(this).blur();
                                        return false;
                                    });

                                    //Clear value if there was one cached & start time
                                    $("#elStatus").val("").idleTimer(taTimeout);

                                    //For demo purposes, show initial state
                                    if ($("#elStatus").idleTimer("isIdle")) {
                                        $("#elStatus")
                                            .val(function(i, v) {
                                                return v + "Initial Idle @ " + moment().format() + " \n";
                                            })
                                            .removeClass("alert-success")
                                            .addClass("alert-warning")
                                            .scrollTop($("#elStatus")[0].scrollHeight);
                                    } else {
                                        $("#elStatus")
                                            .val(function(i, v) {
                                                return v + "Initial Active @ " + moment().format() + " \n";
                                            })
                                            .addClass("alert-success")
                                            .removeClass("alert-warning")
                                            .scrollTop($("#elStatus")[0].scrollHeight);
                                    }

                                    // Display the actual timeout on the page
                                    $("#elTimeout").text(taTimeout / 1000);

                                }

                                return {
                                    //main function to initiate the module
                                    init: function() {
                                        _init();
                                    }
                                };
                            }();

                            jQuery(document).ready(function() {
                                KTIdleTimerDemo.init();
                            });
							

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9