No mousemovement for a certain amount of time

Discussion in 'Javascript' started by Eduard Witteveen, Jul 7, 2005.

  1. 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
     
    Eduard Witteveen, Jul 7, 2005
    #1
    1. Advertising

  2. Eduard Witteveen

    web.dev Guest

    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.
     
    web.dev, Jul 7, 2005
    #2
    1. Advertising

  3. Changing the html document triggers a mouse move event

    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>
     
    Eduard Witteveen, Jul 8, 2005
    #3
  4. Changing the html document triggers a mouse move event

    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>
     
    Eduard Witteveen, Jul 8, 2005
    #4
  5. Re: Changing the html document triggers a mouse move event

    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>
     
    Eduard Witteveen, Jul 8, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jack Wright
    Replies:
    2
    Views:
    6,955
    yeswanthi
    May 28, 2007
  2. Jim
    Replies:
    2
    Views:
    432
    bruce barker
    Jul 19, 2004
  3. Dave
    Replies:
    0
    Views:
    487
  4. Pif Paf
    Replies:
    1
    Views:
    414
    Josiah Carlson
    Feb 24, 2004
  5. Wijnand Smant

    log mousemovement

    Wijnand Smant, Jul 25, 2006, in forum: C++
    Replies:
    1
    Views:
    285
    Victor Bazarov
    Jul 25, 2006
Loading...

Share This Page