468,535 Members | 1,607 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,535 developers. It's quick & easy.

No mousemovement for a certain amount of time

Hello,

I want to make a hooverbox, which is shown when the mousepointer is not
moved for a amount of time.

When the hooverbox is shown, i will do a server request to retrieve the
information for the hooverbox.

I was thinking of using document.onmousemove and a infinit running while
loop comparing the mouse positions. Is this the way to solve it?
(pointers/samples are welcome ;-) )

Eduard Witteveen
Jul 23 '05 #1
4 1529
Eduard,

You can try looking into using setInterval function. When setInterval
calls the function, you could grab the coordinates of the mouse and
compare it with the previous x-y coordinates and see if there was any
change. If there isn't then you can do a server request otherwise
don't.

Jul 23 '05 #2
web.dev wrote:
You can try looking into using setInterval function. When setInterval
calls the function, you could grab the coordinates of the mouse and
compare it with the previous x-y coordinates and see if there was any
change. If there isn't then you can do a server request otherwise
don't.
Thank you very much, i got every thing working as you can see in the
sample below.

But i now have the problem that inserting the iframe into the page
triggers a mouseMove,... And since the load is finished after the
showHooverBox method, i cant stop it from happening,.. Any suggestions?
(i was thinking of not using a iframe, but putting the content of the
details.html hard in the the dhtml structure, but i dont know how to
issue a request from javascript_
<html>
<head>
</head>
<body>
</body>
<script language="javascript">
var HOOVER_BAR = "HOOVER_BAR";
function showHooverBox(x,y) {
if(!hooverBarVisible) {
var hoover = document.getElementById(HOOVER_BAR);
hoover.innerHTML = "<iframe src=\"details.html?x=" + + "&y=" + y + "\" width=\"200\" heigth=\"200\" scrolling=\"no\"></iframe>";
hoover.style.display = "block";
hoover.style.position = "absolute";
hoover.style.left = x;
hoover.style.top = y;
}
hooverBarVisible = true;
}
function hideHooverBox() {
if(hooverBarVisible) {
var hoover = document.getElementById(HOOVER_BAR);
hoover.style.display = "none";
}
hooverBarVisible = false;
}
var last_xpos;
var last_ypos;
var current_xpos;
var current_ypos;
// update the last movement
function mouseMove(e) {
current_xpos = event.x;
current_ypos = event.y;
hideHooverBox();
}
function mouseHooverCheck() {
if(current_xpos && current_ypos
&& current_xpos == last_xpos
&& current_ypos == last_ypos)
{
showHooverBox(current_xpos, current_ypos);
}
last_xpos = current_xpos;
last_ypos = current_ypos;
}
// attach the function to the mouse movement
document.onmousemove = mouseMove;
// callback is invoked after 0.5 seconds
window.setInterval(mouseHooverCheck, 500);
// add div, so we can put information in it, when needed
var hooverBarVisible = false;
var hoover = document.createElement("div");
hoover.id = HOOVER_BAR;
hoover.innerText = "[This text has to replaced by code from a certain url]";
hoover.style.display = "none";
document.body.appendChild(hoover);
</script>
</html>



Jul 23 '05 #3
web.dev wrote:
You can try looking into using setInterval function. When setInterval
calls the function, you could grab the coordinates of the mouse and
compare it with the previous x-y coordinates and see if there was any
change. If there isn't then you can do a server request otherwise
don't.
Thank you very much, i got every thing working as you can see in the
sample below.

But i now have the problem that inserting the iframe into the page
triggers a mouseMove,... And since the load is finished after the
showHooverBox method, i cant stop it from happening,.. Any suggestions?
(i was thinking of not using a iframe, but putting the content of the
details.html hard in the the dhtml structure, but i dont know how to
issue a request from javascript_
<html>
<head>
</head>
<body>
</body>
<script language="javascript">
var HOOVER_BAR = "HOOVER_BAR";
function showHooverBox(x,y) {
if(!hooverBarVisible) {
var hoover = document.getElementById(HOOVER_BAR);
hoover.innerHTML = "<iframe src=\"details.html?x=" + + "&y=" + y + "\" width=\"200\" heigth=\"200\" scrolling=\"no\"></iframe>";
hoover.style.display = "block";
hoover.style.position = "absolute";
hoover.style.left = x;
hoover.style.top = y;
}
hooverBarVisible = true;
}
function hideHooverBox() {
if(hooverBarVisible) {
var hoover = document.getElementById(HOOVER_BAR);
hoover.style.display = "none";
}
hooverBarVisible = false;
}
var last_xpos;
var last_ypos;
var current_xpos;
var current_ypos;
// update the last movement
function mouseMove(e) {
current_xpos = event.x;
current_ypos = event.y;
hideHooverBox();
}
function mouseHooverCheck() {
if(current_xpos && current_ypos
&& current_xpos == last_xpos
&& current_ypos == last_ypos)
{
showHooverBox(current_xpos, current_ypos);
}
last_xpos = current_xpos;
last_ypos = current_ypos;
}
// attach the function to the mouse movement
document.onmousemove = mouseMove;
// callback is invoked after 0.5 seconds
window.setInterval(mouseHooverCheck, 500);
// add div, so we can put information in it, when needed
var hooverBarVisible = false;
var hoover = document.createElement("div");
hoover.id = HOOVER_BAR;
hoover.innerText = "[This text has to replaced by code from a certain url]";
hoover.style.display = "none";
document.body.appendChild(hoover);
</script>
</html>



Jul 23 '05 #4
Eduard Witteveen wrote:
But i now have the problem that inserting the iframe into the page
triggers a mouseMove,... And since the load is finished after the
showHooverBox method, i cant stop it from happening,.. Any suggestions?
(i was thinking of not using a iframe, but putting the content of the
details.html hard in the the dhtml structure, but i dont know how to
issue a request from javascript

I fixed this by using the following code:

<html>
<head>
<script type="text/javascript" src="sarissa/sarissa.js"></script>
</head>
<body>
</body>
<script language="javascript">
var HOOVER_BAR = "HOOVER_BAR";
function showHooverBox(x,y) {
if(!hooverBarVisible) {
var hoover = document.getElementById(HOOVER_BAR);
hoover.style.display = "block";
hoover.style.position = "absolute";
hoover.style.borderWidth = "1px";
hoover.style.borderStyle = "solid";
hoover.style.backgroundColor = "#ffffbb";
hoover.style.left = x;
hoover.style.top = y;
// retrieve the dynamic content
var oDom = Sarissa.getDomDocument();
oDom.async = false;
oDom.load("details.aspx?x=" + x + "&y=" + y);
// alert(oDom.xml);
hoover.innerHTML = oDom.xml;
}
hooverBarVisible = true;
}
function hideHooverBox() {
if(hooverBarVisible) {
var hoover = document.getElementById(HOOVER_BAR);
hoover.style.display = "none";
}
hooverBarVisible = false;
}
var last_xpos;
var last_ypos;
var current_xpos;
var current_ypos;
// update the last movement
function mouseMove(e) {
current_xpos = event.x;
current_ypos = event.y;
hideHooverBox();
}
function mouseHooverCheck() {
if(current_xpos && current_ypos
&& current_xpos == last_xpos
&& current_ypos == last_ypos)
{
showHooverBox(current_xpos, current_ypos);
}
last_xpos = current_xpos;
last_ypos = current_ypos;
}
// attach the function to the mouse movement
document.onmousemove = mouseMove;
// callback is invoked after 0.5 seconds
window.setInterval(mouseHooverCheck, 500);
// add div, so we can put information in it, when needed
var hooverBarVisible = false;
var hoover = document.createElement("div");
hoover.id = HOOVER_BAR;
hoover.innerText = "[This text has to replaced by code from a certain
url]";
hoover.style.display = "none";
document.body.appendChild(hoover);
</script>
</html>
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Joe McIntier | last post: by
5 posts views Thread by raybakk | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.