Vol. 1, No. 41
Jump Around

"If you've got the feeling, jump across the ceiling."
- House Of Pain, "Jump Around"

Too often, JavaScript tends to fade into the woodwork, especially when it's given boring tasks like parsing variables, incrementing counters, verifying form inputs, and so forth. Don't misunderstand -- JavaScript is a fantastic workhorse, and the Web would be much diminished without it. But occasionally one has a pang of sympathy for it, as its relegated to doing the grunt work while Flash and Java hog the spotlight. Wouldn't it be nice to throw a little party for JavaScript?

There's a script that's been making the rounds in which JavaScript gets to show off a little bit. It takes advantage of the moveBy() method introduced in JavaScript 1.2 -- available in fourth-generation browsers -- to make the browser window waggle like a happy bee, or throb like San Francisco in 1906.

This is the kind of attention JavaScript deserves. First let's look at the code that makes it happen, and then go over how it works. (Sorry, but we have to do a little work before we can party.) Here is the function:

function shake(x,y,duration) {
  if (parent.moveBy) {
    for (i = 10; i > 0; i--) {
      for (j = duration; j > 0; j--) {
        self.moveBy(0,y);
        self.moveBy(x,0);
        self.moveBy(0,-y);
        self.moveBy(-x,0);
         }
      }
   }
}

The way it works is simple. You call the function, specifying three variables: x, y, and duration. x and y are the amount to move the window each time, in pixels, horizontally and vertically, respectively. Duration is how long you want the quake to last. The heart of the code is the four moveBy() statements. The first moves the window y pixels up, the second moves it x pixels to the right, the third moves it y pixels down, and the fourth moves it x pixels to the left. And the for loops make this happen repeatedly. Par-ty!

The moveBy() method takes as input a valid window reference, be it self, parent, or some other handle; and the horizontal and vertical displacement values in pixels. So the general syntax looks like this:

window.moveBy(x,y)

And a for loop, in case you've forgotten, takes three arguments: the starting value of the increment variable, the required value, and the increment operation. That is to say, in order to count up to ten from zero, using a variable called i, we start with i equal to zero, we end as soon as i gets greater than ten, and we add one to i each time the loop loops. The result of that, of course, is that the code inside the loop (set off by curly brackets) runs eleven times: once when i = 0, once when i = 1, and so on up to i = 10. The structure of such a for loop is this:

for (i = 0; i > 10; i++) {
  run this code each time;
  }

But you've worked with for loops before: this is old hat to you.

There are a couple of other window methods that work similarly to moveBy(), if you want to vary things a little. resizeBy() stretches the lower right corner of the browser window by the specified number of pixels horizontally and vertically, and looks like this:

window.resizeBy(x,y)

Another function, moveTo(), can be used for a similar effect with a little ingenuity -- it moves the browser window TO an absolute point on the screen. The x and y coordinates provided refer to a point relative to the upper left corner of the screen. Again the syntax is similar:

window.moveTo(x,y)

And resizeTo() does exactly what you'd expect -- resizes the browser window to a size in pixels that you specify.

To further dizzy and nauseate your site's visitors, there are yet more methods you can use: scrollBy() takes a horizontal and a vertical coordinate and moves the contents of the window around. Combining scrollBy(), moveBy(), and resizeBy() in a single function is a cruel, cruel thing to do.

But yeah. That's a little fun, right? Play with it on your site, make sure your users are paying attention, "shake them up," as it were. For even more fun you can give them a little link to click and laugh at the idea of their frantic mousing around when it won't sit still.

HINTS, POINTERS, AND TIPS 'O THE TRADE:

JavaScript's built-in security does not permit you to move a window containing data from a server other than the one that serves the script, or to move or resize a window off the screen.

The methods we explored this week can also be used when opening a new window, to make it do fancy things. Refer to July's tutorial on opening new browser windows.

Doctors say one of the most effective ways of getting rid of a cold quickly is washing your hands frequently so you don't keep reinfecting yourself.

RESOURCES:

Guide to JavaScript methods

Thau's JavaScript tutorial on Webmonkey.

Handcrafted Archive