A "moveTo(x,y)" Review

You should already be familiar with the "moveTo" method from Beginning JavaScript Lesson 11. It's imortant to note that you can reposition a window whenever you want, not just when you open them.

See how we can move a box around by hovering over, clicking and moving the mouse off of the link below (onMouseOver, onClick, and onMouseOut):

Hover Here!!

The effect above is really easy and is centered around the "window.moveTo()" method that will place the top left corner of a window at any pixel using a simple coordinate system. The first number places the window across the screen, and the second places it vertically.

To begin coding this effect, we need to determine the events we'll be using. I used onMouseOver, onMouseOut, and put another function call in the HREF of the <a> tag for clicking (instead of using an onClick event).

I named the function "whizzin" and used parameters in the function call to set the coordiates that would position the window. The link looks like this:

<a href="javascript:whizzin(600,0)"
onMouseOver="whizzin(0,0)"
onMouseOut="whizzin(600,300)">
Hover Here!!
</a>

You can see that I'm using one function for all of the events, but having each event return different values. I'll use these values as coordinates for moving the window. Here's the "whizzin()" function:

function whizzin(across,updown){
whizzer = window.open("samp062.htm","mover",
"height=100,width=100,resizeable=0");

whizzer.focus();

whizzer.moveTo (across,updown);
}

The function above insures that the "whizzer" window will be open and focused before being moved.

The "moveBy(x,y)" Method

We're not stuck with having to place a window to a specific set of coordinates. We can move the window by pixel increments, say 50 pixels to the left.

This is done by using the "window.moveBy()" method instead of the "window.moveTo()" one. Try this example. Click the arrows to move the window 50 pixels at a time in any of eight directions.

In the example above, the arrows are image links that run a JavaScript in their HREF. This JavaScript uses the "window.moveTo()" method to get the window to move.

Lets see how the "move right" arrow is coded. First we set up the image link and put the following in the HREF of the <a> tag:

<a href="javascript:window.moveBy(50,0)">

It's the "moveBy(x,y)" part that gets the work done. The first number moves the window left and right. The second number moves the window up and down.

In this case, clicking the link moves the window 50 pixels to the right from its current position. This is the critical difference between "moveBy" and "moveTo".

To get the pixel to move left, we'd use negative numbers: -50. Here's the code for the left arrow:

<a href="javascript:window.moveBy(-50,0)">

Notice that in both cases above, we set the second number to zero. This is because the second number controls the up and down movement of the window and we're dealing only with left and right motion.

Also note that we do not have to use the "window." part of the "moveBy()" method's reference. We could've just used "moveBy(x,y)" since the event and the effect were both coded in the same window. If we wanted to make links in one window that controlled another, we would have to use the moving windows name -- "window_name.moveBy()".

Up & Down

As mentioned above, the second number of the "moveBy()" method effects the up and down motion of the window. Here's the code for "down":

<a href="javascript:window.moveBy(0,50)">

The value "50" would move the window 50 pixels down from the top of the screen when the link is clicked. Up is coded using a negative number:

<a href="javascript:window.moveBy(0,-50)">

Remember that a positive number goes down and a negative number goes up. This is a little confusing, but you'll get the hang of it with a little practice.

Diagonals

Diagonal motion requires that we move the window in both across and vertically at once. We do this by putting appropriate values in both slots in the parentheses. To go to the upper left:

<a href="javascript:window.moveBy(-50,-50)">

Moving up and to the right would be:

<a href="javascript:window.moveBy(50,-50)">

We had to use a positive 50 in the first number to move right and a negative 50 in the second to move up.

Here's a quick reference to the positive and negative number combinations to move a window diagonally. Remember that you can use any value for the number of pixels. You're not stuck with 50 like in the above examples.

Up & Left -- (- , -)

Up & Right -- (+, -)

Down & Right -- (+, +)

Down & Left -- (-, +)

Summary

You can move windows with two methods -- "window.moveTo()" and "window.moveBy()". The "moveTo()" method uses two numbers as coordinates to absolutely place the window's top left corner on the screen.

The "window.moveBy()" method moves a window a given number of pixels based on the windows current position.

Both use the first number to place the window across the page, and the second number positions the page up and down the screen.

You do not have to include the "window." part of a method's JavaScript reference if the event and the effect are coded on the same page/window. You could just use "moveTo()" or "moveBy()".

Exercises

1) Make a duplicate of the the sample page. Put the JavaScript in the HREF of the <a> tags.

If you don't want to bother making your own arrows, download mine. This is a zip file (18KB) with all of the JPG images you'll need. The arrows are arranged in a simple 3x3 table.

2) Now enhance this page using a single function in the page's <head> and parameters in the function call. Hint: <a href="movingWindow(-50,50)"> -- function movingWindow(across,vertical){}.

3) Further enhance this page by having the status bar display the direction of each arrow as the mouse hovers over it. You can just add a statement to your current function and another parameter to your function and function calls. Review the status bar lesson if you need to.

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index