1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How do I position a div based on the mouse position?

Discussion in 'JavaScript' started by Imozeb, Apr 28, 2010.

0
  1. #1
    I am trying to place a div based of where the users mouse is on the screen. I've searched some sites and I have come up with this.

    Javascript Code:
    
document.getElementById('floater').style.left = (event.clientX + document.body.scrolLeft);
document.getElementById('floater').style.top = (event.clientY + document.body.scrolTop);
    Code (markup):
    It states that event has not been defined. How do I fix this or get my code to work?

    Thanks.
     
    Imozeb, Apr 28, 2010 IP
  2. d_s

    d_s Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi,

    This can be fixed, by just wiring in the correct event and then using the details from that.

    here is a small working sample for you.

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Moving Div to mouse Cursor </title>

    <script type="text/javascript">
    
    function moveDivs(event)
    {
        x=event.screenX;
        y=event.screenY;
        
        document.getElementById("floatdiv").style.left=x+"px";
        document.getElementById("floatdiv").style.top=y+"px";
    }
    
    </script>

</head>
<body onmousemove="moveDivs(event)">
    <div id="floatdiv" style="background-color: Red; position: absolute">
        This is the floating div.
    </div>
    <div id="main">
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
        Main Content goes here <br />
    </div>
</body>
</html>
    Code (markup):
    hope this helps you. In case of any other javascript ideas that you may need, do checkout my blog at : http://www.dsaravanan.wordpress.com

    regards

    d_s

     
    d_s, Apr 30, 2010 IP
  3. Imozeb

    Imozeb Peon

    Messages:
    666
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    It works great when I don't scroll the screen but when I do it messes up.

    I'm trying to get the current scroll for x and y but it isn't working.
    Any ideas?

    Javascript Code:
    posx = e.screentX + document.body.scrolLeft;
posy = e.screenY + document.body.scrollTop;
    Code (markup):
    Thanks.
     
    Imozeb, Apr 30, 2010 IP
  4. Imozeb

    Imozeb Peon

    Messages:
    666
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    screen should get the position on the screen that the mouse is right? So then why is it not working with scrolling?
     
    Imozeb, May 2, 2010 IP
  5. Imozeb

    Imozeb Peon

    Messages:
    666
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Okay. I've got it working in IE and Chrome but FireFox is not accepting this line.


    Javascript:
    var e = window.event;
    Code (markup):
    It reads the line but it does not set var e to an event.
    Does anyone know why FireFox won't accept this line?

    Thanks.
     
    Imozeb, May 3, 2010 IP
  6. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #6
    Hi,
    An element must capture event object using either
    onmousemove element attribute, or using addEventListener().

    We can't just assign it to a global variable, probably because the way it behaves:
    it is created when needed, propagates through elements, and done.
    Other elements might use it later then with different event structure.

    Moreover, borrowing d_saravan's code,
    I guess it should be:

    x = e.clientX+window.scrollX;
y = e.clientY+window.scrollY;
    Code (markup):
    But this won't work in IE.
     
    Last edited: May 4, 2010
    hdewantara, May 4, 2010 IP
  7. Imozeb

    Imozeb Peon

    Messages:
    666
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    So if the event is the entire window where would I put the onmousemove? Could you give me an example, please? :)
     
    Imozeb, May 4, 2010 IP
  8. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #8
    Just use the example on post #2,
    but change the javascript to:
        <script type="text/javascript">
    
    function moveDivs([COLOR="Red"]e[/COLOR])
    {
[COLOR="Red"]      x = e.clientX+window.scrollX;
      y = e.clientY+window.scrollY;        
[/COLOR]        document.getElementById("floatdiv").style.left=x+"px";
        document.getElementById("floatdiv").style.top=y+"px";
    }
    
    </script>
    Code (markup):
    You might like to use the addEventListener(),
    a method for modern DOM level 2 browsers,
    but personally, hmm it is a bit complicated.
     
    hdewantara, May 4, 2010 IP
  9. Imozeb

    Imozeb Peon

    Messages:
    666
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #9
    This is my code:

    HTML code:
    <div id="floater"></div>
<div id="div1" onmouseover="positionf('div1')>some text here</div>
    Code (markup):
    Javascript Code:
    <script type="text/javascript">
    
    function positionf(e)
    {
      x = e.clientX+window.scrollX;
      y = e.clientY+window.scrollY;        
        document.getElementById("float").style.left=x+"px";
        document.getElementById("float").style.top=y+"px";

    }
    
    </script>
    Code (markup):
    Why is it not working?
     
    Imozeb, May 4, 2010 IP
  10. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #10
    Ups, not onmouseover,
    use onmousemove event instead.

    Now let's assume that you have set
    "floater" div to have absolute position style:
    <style type="text/css">
#floater{
  position: absolute;
}
</style>
    Code (markup):
    Then your code needs a few changes,
    see them in red:

    the HTML code should be:
    <div id="floater"></div>
<div id="div1" onmouse[COLOR="Red"]move[/COLOR]="positionf([COLOR="Red"]event[/COLOR])[COLOR="Red"]"[/COLOR]>some text here</div>
    Code (markup):
    And the javascript code should be:
    <script type="text/javascript">
    
    function positionf(e)
    {
        x = e.clientX+window.scrollX;
        y = e.clientY+window.scrollY;        
        document.getElementById("float[COLOR="Red"]er[/COLOR]").style.left=x+"px";
        document.getElementById("float[COLOR="Red"]er[/COLOR]").style.top=y+"px";

    }
    </script>
    Code (markup):
     
    hdewantara, May 5, 2010 IP
  11. Imozeb

    Imozeb Peon

    Messages:
    666
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I'm trying your code but it isn't working. It says clientX is not a variable.

    My HTML looks like this:

    <div id="div1" onmousemove="positionf('div1','This is some text',event)">some text here</div>
    Code (markup):
    My javascript looks like this now:

    <script type="text/javascript">
    
    function positionf(name, description, e)
    {
        x = e.clientX+window.scrollX;
        y = e.clientY+window.scrollY;
        document.getElementById(name).style.cursor = 'pointer';
        document.getElementById("floater").innerHTML=description;
        document.getElementById("floater").style.left=x+"px";
        document.getElementById("floater").style.top=y+"px";

    }
    </script>
    Code (markup):
    Why isn't it working?

    Thanks.
     
    Imozeb, May 6, 2010 IP
  12. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #12
    Hmm, strange.:confused:

    I've tested your latest code in my
    FF3.6.3, Safari4.0.5, Opera10.5, Chrome4.1.249.1064
    and it's working well.

    Not in IE8 though,
    IE doesn't recognize window.scrollX and window.scrollY variables.

    What is your current browser?

    Some quite old browsers might not know clientX and clientY vars.
    Those browsers might not support these DOM1 vars.
     
    Last edited: May 6, 2010
    hdewantara, May 6, 2010 IP
  13. Imozeb

    Imozeb Peon

    Messages:
    666
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I tried it again in Chrome and FF and it worked! I got something like this to work in IE before:

    Javascript:
    
function positionf()
{
if(!e){ var e = window.event; }
posx = e.clientX + document.documentElement.scrollLeft;
posy = e.clientY + document.documentElement.scrollTop;
//IE likes (document.documentElement.scrollTop) for the scroll and (window.event;) for the event
}
    Code (markup):
    But now I'm trying to figure out how to join your FF and chrome code with my IE code. Any ideas about how to detect browsers so I can join our codes into a cross browser function?

    Thanks.
     
    Imozeb, May 7, 2010 IP
  14. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #14 
    function positionf()
{
if(!e){ var e = window.event; }
posx = e.clientX + document.documentElement.scrollLeft;
posy = e.clientY + document.documentElement.scrollTop;
//IE likes (document.documentElement.scrollTop) for the scroll and (window.event;) for the event
}
    HTML:
    Ah! You yourself finally got the "universal" code!

    This code of yours work on all of my browsers,
    no need for browser detection anymore... :cool:
     
    hdewantara, May 7, 2010 IP
  15. Imozeb

    Imozeb Peon

    Messages:
    666
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #15
    I did!!! I can be finally be famous now. :D

    P.S. to get it to work on Chrome with scrolling use e.pageX and for FireFox add a few px to the left and top values.

    Cheers!
     
    Last edited: May 7, 2010
    Imozeb, May 7, 2010 IP
  16. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #16
    unigogo, May 8, 2010 IP