Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
60
rated 0 times [  67] [ 7]  / answers: 1 / hits: 22595  / 14 Years ago, wed, july 28, 2010, 12:00:00

Is it possible to use JavaScript to set the cursor attribute to the property none if the mouse is inactive for a certain amount of time (say, five seconds) and set it back to auto when it becomes active again?



EDIT: I realize that none is not a valid value for the cursor property. Nonetheless, many web-browsers seem to support it. Furthermore, the primary user for this is myself, so there is little chance of confusion arising as a result.



I've got two scripts that can do something similar:



window.addEventListener(mousemove,
function(){
document.querySelector(#editor).style.background = #000;
setTimeout(document.querySelector('#editor').style.background = '#fff', 5000);
}
, true);


and



var timeout;
var isHidden = false;

document.addEventListener(mousemove, magicMouse);

function magicMouse() {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function() {
if (!isHidden) {
document.querySelector(body).style.cursor = none;
document.querySelector(#editor).style.background = #fff;
isHidden = true;
}
}, 5000);
if (isHidden) {
document.querySelector(body).style.cursor = auto;
document.querySelector(#editor).style.background = #000;
isHidden = false;
}
};


With each of these, when the mouse is inactive for more than five seconds the background color turns white, and when the cursor is moved the background turns black. However, they don't work for making the cursor disappear. What surprises me is that if I put the command document.querySelector(body).style.cursor = none; into the JavaScript console it works perfectly. Inside the scripts, it does not seem to work.



I've posted the above scripts as this is as far as I have come in getting this to work. I'm not necessarily asking for a fix for either of the scripts; if you know of a more efficient way of hiding the cursor, please share.


More From » css

 Answers
25

In CSS 2 none is not a valid value for the cursor property. It is valid in CSS 3, however.



Otherwise you might be able to use a custom cursor loaded from a URI that is simply transparent.



I would consider this to be highly distracting for the user, though, so I wouldn't advise you to actually do that.


[#96089] Sunday, July 25, 2010, 14 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
patienceannel

Total Points: 674
Total Questions: 101
Total Answers: 101

Location: Northern Mariana Islands
Member since Fri, Jan 15, 2021
3 Years ago
patienceannel questions
Fri, Mar 11, 22, 00:00, 2 Years ago
Tue, Oct 20, 20, 00:00, 4 Years ago
Wed, Jul 24, 19, 00:00, 5 Years ago
;