PDA

View Full Version : javascript on mouse move



akanesakura
11-02-2008, 08:24 PM
hi guys,

i need some help adding some javascript on my html. below is my html code.



<html>
<title>Javascript Help</title>
</head>

<body style="background-color: #FFCC00; ">

<div id="graybox" style="width: 800px; height: 350px; margin: 100px auto; background-color: #CCCCCC;">

<div id="pointer" style="width: 10px; height: 50px; background-color:#0099FF; position: absolute; top: -1; left: 50%; "></div>

</div>


</body>
</html>




i want the pointer (blue rectangle) to follow my mouse position whenever i enter the graybox, the pointer should move only left and right.

thanks!:)

Kenny
11-03-2008, 03:02 AM
This is from a drag script I modify for different purposes, there is a cross browser script too but, this should suffice for IE


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HEAD>
<TITLE>__</TITLE>
<STYLE type=text/CSS>

</STYLE>

</HEAD>
<body style="background-color: #FFCC00; ">

<div id="graybox" style="width: 800px; height: 350px; margin: 100px auto; background-color: #CCCCCC;">

<div id="pointer" style="width: 10px; height: 50px; background-color:#0099FF; position:relative "></div>

</div>
<SCRIPT type="text/javascript">
var moveapproved=false; var z,x,y,w;
function move(){
if(moveapproved){z.style.pixelLeft=event.clientX-10; return false;}
}
function moves(){
moveapproved=true; z=document.getElementById('pointer');w=document.getElementById('graybox')
x=event.clientX;y=event.clientY;document.onmousemove=move;
}
document.getElementById('graybox').onmouseover=moves;
document.getElementById('graybox').onmouseout=new Function("moveapproved=false");

</SCRIPT>

</BODY></HTML>

Nile
11-03-2008, 03:31 AM
Kenny, that only works in IE... If you go to this page:
http://www.dynamicdrive.com/dynamicindex11/domdrag/index.htm
And you scroll somewhat to the bottom, you'll see scrollers that only go left and right, and some that only go up and down. I'm sure you can find a way of putting these into your box, if you can't just tell me and I can do it for you.
I hope this helps,
Nile

magicyte
11-03-2008, 03:33 AM
Not even in IE7, for me. It is really messed up. I tried it. I'm not taking it to use, I just came here to see what Nile was saying. Just testing...

-magicyte

Nile
11-03-2008, 03:38 AM
Magicye, you'll need to use the pageY and pageX variables/what ever they are. I don't suggest doing this, there are tones of scripts out there already. And one even made by me. I'm not gonna give this one because I gave a one from dd above. I really don't suggest doing it unless your doing it for the fun of it. If you are:
pageY and pageX don't need events before them like clientY and clientX. They just need any variable. I suggest putting an `e` variable in the function, and making that e value event. Then before the client and page you'll put that e variable. If you know what I mean? Lol...

magicyte
11-03-2008, 03:41 AM
Oh, I've done it before. I'm just testing this stuff out because you said something was wrong.

-magicyte