Beautiful Pixel

I recently had a need to animate an arbitrary value over time in javascript. Now script.aculo.us animates things quite well, but all the animation functions only manipulate things which directly change your website appearance. What if I want to write my own effect

For example, lets say I want to display a completion percentage. I simply want to display a number which goes from 0% to 100% over some period of time. Like this:

A few times now I have used a useful pattern. The problem is that I want to remember the state of a javascript driven effect across multiple pages. For instance, one of my projects has a context sensitive administration pane that can be shown or hidden on any page. I want someone to be able to show this admin pane, go to another, and have the admin pane for that page already opened. Then I want them to be able to close the pane, and have it stay closed on all pages until it’s manually opened again.

How do manage this, when the opening and closing of the pane is entirely client side driven javascript? With Ajax, of course!

If you’re like me then you know Ruby a lot better than you know Javascript. Here’s a tidbit for refactoring your ugly javascript that I just stumbled onto.

Just now I found myself writing some javascript that looked like this:

  window.onload = function() {
    settings = {...snipped...}
    var divObj = $('content');
    var cornersObj = new curvyCorners(settings, divObj);
    cornersObj.applyCornersToAll();

    hideAllContent;
    showContent(1);

    animateStep(3, 400);
    animateArrow(3, 400);
    animateText(3, 800)

    animateStep(2, 800);
    animateArrow(2, 800);
    animateText(2, 1200)

    animateStep(1, 1200);
    animateArrow(1, 1200);
    animateText(2, 1600)
  }

This is fine and dandy and works well, but it’s ugly. I realized that if this was ruby code, it was in bad need of refactoring. But how to refactor in javascript?