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.
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
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.
screen should get the position on the screen that the mouse is right? So then why is it not working with scrolling?
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.
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.
So if the event is the entire window where would I put the onmousemove? Could you give me an example, please?
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.
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?
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):
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.
Hmm, strange. 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.
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.
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...
I did!!! I can be finally be famous now. 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!