jquery.idle
jquery.idle copied to clipboard
Scrolling in element is not picked up
Hello, jquery.idle has been working great for me, except for one case.
I have a <pre>
element with a scrollbar (overflow:auto
) and I use jquery.idle in Firefox as such:
$(function(){
$(document).idle({
onIdle: function(){
...
},
onActive: function(){
...
},
onShow: function(){
...
},
onHide: function(){
...
},
events: 'click contextmenu dblclick mousedown mouseenter mouseleave mouseover mouseout mouseup wheel drag dragend dragenter dragleave dragover dragstart drop resize scroll select',
idle: 3500
})
});
When a user is using said scrollbar with the mouse, jquery.idle thinks the page is in idle mode. I do not know what component this is a limitation of, but I wonder if there is a way to get it to work (or if I'm doing something wrong).
Thanks in advance!
Hi, could you please share a jsfiddle or something like that showing the problem ? I guess that the approach to a solution is better this way :)
Hello @kidh0 , you're right about that. (Also I wrote auto
above. I meant to say scroll
, which makes your point)
- Navigate here and open the console so you can see the logging https://jsfiddle.net/9fg8pjcz/2/
- Use the scrollbar of the
div
element and keep scrolling up and down. Notice how you eventually enter theonIdle
state even though you are still moving the mouse. - You may stop moving the mouse now.
Edit: Same happens if you mouse-select some text and keep the mouse button down.
Are you testing on google chrome or other browser? I just tested on google chrome and it worked everytime, using the mousescroll and using the up and down arrows of the keyboard. You were able to reproduce the problem on the jsfiddle?
I am testing both on Google Chrome and Firefox. OS is Linux (Xorg).
Using the scroll wheel and keyboard buttons generate events which are picked up in the document, so jquery.idle remains in onActive
state. That is fine.
However, if you hold the left mouse button on the scrollbar and scroll by moving the mouse up and down, you will reach the onIdle
state.
True that, but it will trigger the isActive as soon as you stop holding the button. Right? I guess this is a behavior of the browser, not an issue.
It will trigger isActive
, but it's too late, since the user was already not idle.
I understand jquery.idle expects the browser to inform it about events, but I don't know if there is another way for the browsers to communicate this information, so that this problem does not occur. Hence why I opened this issue.
Even if there is no such way, it would be nice to at least have a section regarding jquery.idle's limitations (even if they do not stem from itself).
It looks like there should be a way. With addEventListener
one can specify useCapture=true
and (at least) scroll events are then picked up from any element. https://jsfiddle.net/uzkd3xqp/6/
Seems that it is an open issue on jQuery backlog: https://github.com/jquery/jquery/issues/1735
Right now, the vanilla version of the plugin uses AddEventListeners, maybe you could give it a try using the useCapture
parameter: https://github.com/kidh0/jquery.idle/blob/master/vanilla.idle.js
Using the vanilla version, modified to pass useCapture=true
, with the drag
event enabled seems to do the trick in the jsfiddle example. Thanks.
- Would you be interested in adding a
useCapture
option to jquery.idle's interface? - Would it make sense for you to convert
jquery.idle.js
into a thin wrapper aroundvanilla.idle.js
so that both may provide this functionality? - I noticed that there is a difference in the interfaces.
jquery.idle.js
accepts a string forevents
, butvanilla.idle.js
expects a list of strings. It will be important to make sure both are accepted if you merge the two.
It may be a good think to wrap the vanilla into a jQuery container. I guess that it will be much easier to maintain the code. Probably it will be the next major release (2.x.x). Are you willing to make this update and maybe add some tests ? It is open for pull requests ;)
I would want to work on it. Unfortunately it has been (and by the looks of it will remain) on the back burner due to more pressing issues. I have it noted down and will hopefully get to it when possible.
May the reason for idle time not being reset with mouse scroll be linked to the comment in the Stackoverflow post here:
https://stackoverflow.com/questions/667555/how-to-detect-idle-time-in-javascript-elegantly
Check DaxChen's comment Frank Conijn's response.
For example, if you hold the mouse still and only do scrolling, does it reset the timer for you?