Javascript Window Shake

This evening I came accross the window.moveBy() JavaScript function and thought it would be cool to shake the browser window when a user fails to log in. It turns out that I was not the only one thinking this, but none of the examples worked for me. Some had no proper delays, others only worked from the page header, and some were plain unreadable.

I’m no Javascript guru, but I hacked this together which is working pretty nicely. It is in fact almost undistinguishable from the Apple login window shake at a login failure:

<script type="text/javascript">
if (window.moveBy) {
	delay = 70;
	shakes = 3;
	window.moveBy(-10, 0);
	for (j = shakes; j > 0; j--) {
		setTimeout( "window.moveBy(20, 0)", j*delay );
		setTimeout( "window.moveBy(-20, 0)", 
					j*delay+(delay/2));
	}
	setTimeout( "window.moveBy(10, 0)", (shakes+1)*delay );
}
</script>

In my case, I surrounded this code with a Tapestry @Conditional and made it into a reusable Tapestry component so that I can make any window shake as soon as it contains an error.

The code will work anywhere on your page, but I advise you to put it at the bottom of the HTML. This will make sure that the content is shown in the browser before you shake it.

It’s visually much stronger than just adding an errortext to the page. If people log in a couple of times a day, they don’t even notice extra text on the screen. This will “shake” them awake🙂

Have fun!

2 Responses to Javascript Window Shake

  1. Joris says:

    /me looks up the company policy on easter eggs…🙂

  2. rolfje says:

    /me thinks this is not an easter egg.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s