Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > No mousemovement for a certain amount of time

Reply
Thread Tools

No mousemovement for a certain amount of time

 
 
Eduard Witteveen
Guest
Posts: n/a
 
      07-07-2005
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
 
Reply With Quote
 
 
 
 
web.dev
Guest
Posts: n/a
 
      07-07-2005
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.

 
Reply With Quote
 
 
 
 
Eduard Witteveen
Guest
Posts: n/a
 
      07-08-2005
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>





 
Reply With Quote
 
Eduard Witteveen
Guest
Posts: n/a
 
      07-08-2005
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>





 
Reply With Quote
 
Eduard Witteveen
Guest
Posts: n/a
 
      07-08-2005
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>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How do I stop the Webservice execution after certain amount of time? Jack Wright ASP .Net 2 05-28-2007 07:06 AM
log mousemovement Wijnand Smant C++ 1 07-25-2006 01:38 PM
ASP.NET Locks File for a certain amount of time? Dave ASP .Net 0 10-04-2004 10:52 PM
slow pages after certain amount of idle time... Jim ASP .Net 2 07-19-2004 04:21 PM
Wait for input, but only for a certain amount of time Pif Paf Python 1 02-24-2004 07:05 AM



Advertisments