/    Sign up×
Community /Pin to ProfileBookmark

Move Window When Mouse Touches It

Copy linkTweet thisAlerts:
Apr 30.2008

I’m working on a project for school, and as a part of this project I would like the window to move to a random place onscreen if the mouse touches it. Yes, I know this can be annoying, but it will simply be a part of my project. Be gentle, I’m just learning JS. Thanks! ?

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@marcusamiApr 30.2008 — I hope this puts you in the write direction


<body onmouseover="self.moveTo(100,100);">

<script language="JavaScript" type="text/javascript">

<!--

self.moveTo(10,10);

//-->

</script>


</body>
[/QUOTE]
Copy linkTweet thisAlerts:
@CableauthorApr 30.2008 — Thanks! That code makes sense to me so far. Where would I add a check to determine if the mouse is still on the window even after it moved, so as to move it again? I'd like the window to continuously check for the mouse, and if the mouse is touching it, it will move.
Copy linkTweet thisAlerts:
@marcusamiApr 30.2008 — it would be good if you learnt how to do it

especially if you're doing it for a school project

it sounds like you might be up to deviousness, ha

what you need to do is :

1) be able to get deminsions of client screen

2) create a random number w/in those deminsions

everytime sum1 puts there mouseover the body

this is example on how to create a random number

variable x = a random number through 100
var x = Math.floor(Math.random()*[B]100[/B]); [/QUOTE]

so your going to assign two variables that are random w/in the clients screen deminsions (youll have to figure out how to get that!)

for example
randomX = Math.floor(Math.random()*maxWidth);

randomY = Math.floor(Math.random()*maxHeight); [/QUOTE]

then

<body onmouseover="self.moveTo(randomX, randomY);">
[/QUOTE]


this is just to help you get in the right direction

try to figure it out, if you cant post you code

regards

Marcus
Copy linkTweet thisAlerts:
@marcusamiApr 30.2008 — I am weak, and did it myself

if you want it. Thing is i didnt take into consideration

the size of the browser screen

so the smaller you make your browser window the more

it moves all around

the bigger the browser window is opened at the less it will appear its moving


regards

Marcus
Copy linkTweet thisAlerts:
@CableauthorMay 08.2008 — I would love to have the code if you wouldn't mind. I've been fiddling with it and can't get it to behave the way I'd like it to. Maybe I can learn a thing or two from your code. Yep, I'm a noob.
Copy linkTweet thisAlerts:
@yearbassMay 08.2008 — use mousemove event to continuously check for the mouse. try this simple example in prototype.js flavor

[code=php]<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="includes/prototype.js"></script>
<script type="text/javascript">
var xWindow = {
pointerX:0,
pointerY:0,
handleMouseMove:function(evt){
this.pointerX = Event.pointerX(evt);
this.pointerY = Event.pointerY(evt);

var currentElement = Event.element(evt);
if (currentElement.className == "moveable") {
var randomX = Math.floor(Math.random()*200);
var randomY = Math.floor(Math.random()*200);
self.moveTo(randomX,randomY);

Event.stopObserving(document.body,'mousemove',xWindow.bHandleMouseMove);
currentElement.onmouseout = function () {
Event.observe(document.body,'mousemove',xWindow.bHandleMouseMove);
}
}
}
};
xWindow.bHandleMouseMove = xWindow.handleMouseMove.bindAsEventListener(xWindow);
Event.observe(window,'load',function(){
Event.observe(document.body,'mousemove',xWindow.bHandleMouseMove);
});
</script>
</head>

<body>
<div style="position:absolute;top:30px;left:130px;width:50px;height:50px;border:1px solid black;" class="moveable">
Touche Me
</div>
<div style="position:absolute;top:120px;left:130px;width:50px;height:50px;border:1px solid black;" class="moveable">
Touche Me
</div>
<div style="position:absolute;top:120px;left:330px;width:50px;height:50px;border:1px solid black;">
Not moveable
</div>
</body>
</html>
[/code]

demo: http://www22.brinkster.com/yerieonweb/moveme.html

note: prototype.js is available at (http://prototypejs.org)
Copy linkTweet thisAlerts:
@marcusamiMay 12.2008 — heres the one i made

its not too special


<html>

<head>

<title>

</title>

<script language="JavaScript" type="text/javascript">

<!--

var maxWidth = screen.width;

var maxHeight = screen.height;

function moveScreen(){

var randomX = Math.floor(Math.random()*maxWidth-600); /* i did the minus 600 and 400 because it seemed to make it move around more */

var randomY = Math.floor(Math.random()*maxHeight-400);

if(randomX < 0 || randomY < 0){

do{

var randomX = Math.floor(Math.random()*maxWidth-600);

var randomY = Math.floor(Math.random()*maxHeight-400);

} while(randomX < 0 || randomY < 0)

}

self.moveTo(randomX,randomY);

document.getElementById('thisW').value = randomX;

document.getElementById('thisH').value = randomY;

}


//-->

</script>

</head>

<body onmouseover="moveScreen()">

X / Y

<br>

<textarea rows="2" cols="15" name="thisW" id="thisW" >

</textarea>

<textarea rows="2" cols="15" name="thisH" id="thisH" >

</textarea>

</body>





</body>

</html>
[/QUOTE]
×

Success!

Help @Cable spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...