#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Location
    CA, USA
    Posts
    271
    Rep Power
    11

    Alert after time of inactivity then click to logout


    I am sure this is simple.
    On most bank websites after 10 mins or so of inactivity an alert box pops up saying that you will be logged out.

    How do you do that?
    I figured you can use settimeout on the onload maybe?

    the other thing is what happens when the user clicks the OK button on the alert box? How do you get that to trigger the page to go to the logout page?

    Thanks
  2. #2
  3. Person
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2007
    Location
    Moon
    Posts
    1,158
    Rep Power
    550
    Precisely. Though, your forgetting how to trigger the idle state; you will have to clear it (clearTimeout) and set it (setTimeout) every time the user moves the mouse in the document (document.onmousemove).

    How do you get that to trigger the page to go to the logout page?
    location.href

    Comments on this post

    • tbankar agrees
    Give Opera some love. Use it and you'll see why.

    Oh, those monkeys.::What's wrong with the world today?::The lion king in 5 seconds.

    My body is so sexy.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    You should probably listen for document.onkeyup events too.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Location
    CA, USA
    Posts
    271
    Rep Power
    11
    Originally Posted by bals28mjk
    Precisely. Though, your forgetting how to trigger the idle state; you will have to clear it (clearTimeout) and set it (setTimeout) every time the user moves the mouse in the document (document.onmousemove).

    location.href
    I still am missing something. when I do the location.href it doesn't wait for the alert box to show up. it just sends me there immediately. I am quite rusty in working with js.

    Code:
    <script type="text/javascript">
    setTimeout("alert('5 seconds!')",5000)
    location.href='http://yahoo.com' 
    </script>
  8. #5
  9. Person
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2007
    Location
    Moon
    Posts
    1,158
    Rep Power
    550
    Hi, you need to put the alert message and page redirect into a function and place a function reference for that function in the first parameter of setTimeout.
    Give Opera some love. Use it and you'll see why.

    Oh, those monkeys.::What's wrong with the world today?::The lion king in 5 seconds.

    My body is so sexy.
  10. #6
  11. Application is what Divides Us
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Dec 2002
    Location
    Titusville, FL
    Posts
    2,179
    Rep Power
    59
    If all you would need is the alert and redirect, then this should be fine... however I can't remember if it is with or without the quotes.
    Code:
    var t= window.setTimeout("function(){ alert('5 seconds'); window.location.href='www.devshed.com/'; }", 5000);
    if you need more than what's there above... something to this effect is what I'd do...
    Code:
    function isInactive(){
      var msg= "Notice of Inactivity and allow confirm of redirection...";
      var temp= (window.confirm(msg)) ? 'www.devshed.com/' : null;
      if (temp) window.location.href= temp;
    }
    var t= window.setTimeout("isInactive()", 5000);
    Download [ Fx | Op ] Validate [ Markup | Css ]
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Location
    CA, USA
    Posts
    271
    Rep Power
    11

    getting there, but more questions


    Thank for all your help so far.

    I have this so far.
    Code:
    <script type="text/javascript">
    function logout()
    {
    alert('You have been logged out.')
    location.href='logout.php' 
    }
    
    function resetlogout()
    {
    clearTimeout(t);
    }
    
    var t= setTimeout("logout()",5000)
    </script>
    and the resetlogout() function is called on a onKeyUp="resetlogout()" on one of the fields that needs to filled in to continue.

    I know it will reset the setTimeout on the page reload which happens after a transaction, but how can I get it to reset the Timeout countdown after the KeyUp?

    Also I have it go to the logout page but if you click back in the browser it just takes you right back to the page with all the info. It shouldn't do that should it? The user should have been logged out.
    I am sure it may have something to do with my logout page. Maybe I am not destroying the session properly.
  14. #8
  15. Person
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2007
    Location
    Moon
    Posts
    1,158
    Rep Power
    550
    Originally Posted by jsKid
    If all you would need is the alert and redirect, then this should be fine... however I can't remember if it is with or without the quotes.
    function references are without, (the first one with the anonymous function shouldn't have quotes).
    Originally Posted by jsKid
    if you need more than what's there above... something to this effect is what I'd do...
    So you are telling the user to confirm that he's not there? Lol jsKid, think about that.


    Originally Posted by Kravvitz
    You should probably listen for document.onkeyup events too.
    I forgot to mention, Kravvitz, that I like your idea.


    Originally Posted by dandcp
    and the resetlogout() function is called on a onKeyUp="resetlogout()" on one of the fields that needs to filled in to continue.
    Why just one? I'd do it for the whole document.
    JavaScript Code:
    var t;
    document.onmousemove=to
    document.onkeypress=to
    function logout()
    {
    alert('You have been logged out.')
    location.href='http://www.google.com' 
    }
    function to(){
    clearTimeout(t);
    t=setTimeout(logout,5000)//logs out in 5 seconds
    }
    Also, I just noticed that onmousemove is always firing in ie, even when the mouse is stationary inside the document (but not outside,) your probably going to have to write a workaround for this probably checking if the mouse coordinates have changed.
    Give Opera some love. Use it and you'll see why.

    Oh, those monkeys.::What's wrong with the world today?::The lion king in 5 seconds.

    My body is so sexy.
  16. #9
  17. Application is what Divides Us
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Dec 2002
    Location
    Titusville, FL
    Posts
    2,179
    Rep Power
    59
    haha good point... it was more of an example than anything really
    but definitely funny in retrospect.

    I'm for including krav idea as well.
    Download [ Fx | Op ] Validate [ Markup | Css ]
  18. #10
  19. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Location
    CA, USA
    Posts
    271
    Rep Power
    11

    Thanks


    Thanks everyone. This is what I ended up with and seems to be ok for what I need.

    Code:
    <script type="text/javascript">
    var t;
    window.onload=resetTimer;
    document.onkeypress=resetTimer;
    
    function logout()
    {
    	alert("You are now logged out.")
    	location.href='logout.php' 
    }
    function resetTimer()
    {
    	clearTimeout(t);
    	t=setTimeout(logout,1800000) //logs out in 30 minutes
    }
    </script>
    Again, I know this is probably not a js thing but after it gets sent to logout.php the user could easily just hit back button and see the previous page. What am I missing? I noticed on my bank website you can't seem to go back. How is that done?
  20. #11
  21. Person
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2007
    Location
    Moon
    Posts
    1,158
    Rep Power
    550
    Again, I know this is probably not a js thing but after it gets sent to logout.php the user could easily just hit back button and see the previous page. What am I missing? I noticed on my bank website you can't seem to go back. How is that done?
    You're right dandcp, this is no longer a JavaScript thing.

    I'd probably start a new thread in the php forum if you are having problems with the session.

    (Also, you may suggest a moderator to move this thread for you.)

    @jsKid Lol.
    Give Opera some love. Use it and you'll see why.

    Oh, those monkeys.::What's wrong with the world today?::The lion king in 5 seconds.

    My body is so sexy.
  22. #12
  23. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Location
    CA, USA
    Posts
    271
    Rep Power
    11
    no problem.

    Thanks everyone for you help on the js section.

    I am heading back to the php section.

    see you later!
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    1
    Rep Power
    0

    Yea you need a script that ends the session like my examples


    You need an end session script to go witht that (its pure php) Check out my example on my site theclanz.netau.net )
    Originally Posted by dandcp
    Thanks everyone. This is what I ended up with and seems to be ok for what I need.

    Code:
    <script type="text/javascript">
    var t;
    window.onload=resetTimer;
    document.onkeypress=resetTimer;
    
    function logout()
    {
    	alert("You are now logged out.")
    	location.href='logout.php' 
    }
    function resetTimer()
    {
    	clearTimeout(t);
    	t=setTimeout(logout,1800000) //logs out in 30 minutes
    }
    </script>
    Again, I know this is probably not a js thing but after it gets sent to logout.php the user could easily just hit back button and see the previous page. What am I missing? I noticed on my bank website you can't seem to go back. How is that done?

IMN logo majestic logo threadwatch logo seochat tools logo