Shaky Div, Shaking Div

While tackling our newest project for SpinWeb (a new competitor for the offer to rewards genre of sites that doesn't work primarly of off the requirment to refer/annoy friends to ever see a reward), we decided to use of developing LIT model. During the preliminary design/development planning meetings, we quickly came to the issue of a better way for displaying error feedback. Turning to my experience of using macs to do our development, I was inspired by the error feedback response to the login screen. Anyone who has used this knows that when you mis-type your username/password, the login screen shakes back and forth while displaying an error.

This got us thinking on how to do on the web. After doing a little bit of research in the area, I quickly came to realize that no one else was really doing this (at least, not that I could find) and the current scripts that were in place were bulky, slow, and sometimes reverted to shaking the entire window by moving it around the screen, rather than shaking the content. The few scripts that I saw to actually do what we wanted, were very complex, usually utilizing trigonometry to get the content to shake in a sine and cosine destined paths.

By this point, I knew that we had to create something different, or this thing was never going to work. (Usually, when this phase of an idea comes, it means that if no one else is doing it, there is a very good reason why). Talking to the designer on the project, we came to a solution that involved modifying the padding of the content. We created a div that would contain all of the content of the page and centered it on the screen. Then using PHP and javascript, whenever there was an error on the page, it would trigger a body onload function call which would in turn shake the screen. The javascript used to do this is posted below.

var posleft=10;
var count=0;

function shake(){
obj = document.getElementById('wrap');
if(++count > 6){
count = 0; psleft=10; obj.style.padding='0' ;return; }
posleft*=-1;
var newpos=parseInt(obj.style.left)?parseInt(obj.style.left)+posleft:0+posleft;
if(newpos<0){
n = newpos*-1;obj.style.paddingLeft=n + 'px'; obj.style.paddingRight='0';
}else{
obj.style.paddingRight=newpos + 'px'; obj.style.paddingLeft='0';}
var timer=setTimeout("shake()",40);
}