Tutorial :Scrolling when idle?



Question:

Can anyone point me to an example of code for a page that begins to automatically scroll when the user is idle for an amount of time? I think this is slightly beyond my skill set. I think JQuery or something similar might be appropriate but I just can't seem to figure it out. I'm designing a site for the nonprofit I work for and we don't have the money to hire a programmer. I wouldn't ask anyone to code anything for me, just to point me in the right direction. Thank you so much.

Julie K.


Solution:1

Here is something quick and dirty that will do what you want. I currently have it set to 2 seconds idle time, but you can change that as you wish.

var now = new Date();  setInterval(function(){      var nnow = new Date();      if(nnow.getTime() - now.getTime() >= 2000)          $('body').animate({scrollTop: '+=50'}, 2000, 'linear');      }, 2000);  $(document)      .mousemove(function(){ now = new Date(); $('body').stop(); })      .keypress(function(){ now = new Date(); $('body').stop(); });  

Edit: added .stop in mousemove and keypress events to stop scrolling immediately when user moves mouse or presses a key, rather than waiting for animation to complete.


Solution:2

jQuery would definitely help here.

You should handle the keyboard and mouse events to catch user activity.

Then, whenever you see activity, call setTimeout to make your code run 2 minutes after the activity. Save the return value of the setTimeout call in a global variable, and call clearTimeout on it before setTimeout to clear the last timeout.

For example: (Using jQuery and the scrollTo plugin)

var timeout = false;  $(document.body).bind('keydown keyup mousemove mouseup', function() {      if (timeout) clearTimeout(timeout);      timeout = setTimeout(userIsIdle, 120000);    //120,000 milliseconds  });  function userIsIdle() {      $(document.body).scrollTo('100%', 100000);  }  


Solution:3

you could use a plugin like this, and set it to use JavaScripts setTimeout() function to trigger it, which could reset every time you detect certain user actions, such as keyDown and Click.


Solution:4

use the following jQuery functions to scroll the page's body

// Scrolling Down  $('body').animate({  scrollTop: '-=300px'  }, 2000);    // Scrolling Up  $('body').animate({  scrollTop: '+=300px'  }, 2000);   


Solution:5

I think onBlur event is what you're looking for, so you can do like this :

<body onblur="$('html, body').animate({scrollTop:0}, 'slow');">  

You can change the 0 to the vertical position where you want to scroll to.

Note: this will fire the scrolling when you go to other page or tab or where you can't see the page.


Solution:6

First you have to define what you mean by IDLE, I will assume that the user is not moving mouse for x amount of time. Here are the steps pseudo js.

 var lastTime=0;  var threshold=60000 ; // 1min  var howOftenToCheck = 1000;//1 sec  var inter = 0;  inter = setInterval(function() {      var delta=lastTime-currentTime;      if(delta>threashold){          clearInterval(inter);                 window.scrollTo(xpos,ypos);      }  }, howOftenToCheck);  

This should give you a general idea.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »