Fun with mootools

March 18, 2007

I was playing with mootools today, and whilst trying to create a swapping pair of content divs, I put together a neat algorithm for handling the callbacks and getting it to do what I want.

I only wanted one div showing at a time, and I wanted them to swap with a function. So I set up the following guardian variable and functions. Check it out.

var loadingDiv;
var contentDiv;
var transitionState = 0;
      
window.onload = function () {
  loadingDiv = new Fx.Slide('loadingDiv', {onComplete: nextTransition});
  loadingDiv.hide();
  contentDiv = new Fx.Slide('contentDiv', {onComplete: nextTransition});
}

function swapThem() {
  if(transitionState == 0) {
    transitionState = 1;
    contentDiv.slideOut();
  }
  else {
    transitionState = 2;
    loadingDiv.slideOut();
  }
}

function nextTransition() {
  if(transitionState == 1) {
    transitionState = 3;
    loadingDiv.slideIn();
  }
  else if (transitionState == 2) {
    transitionState = 4;
    contentDiv.slideIn();
  }
  else if (transitionState == 4) {
    transitionState = 0;
  }
}

It might be a little verbose, but it works like a charm.

Categories: Geek
Tags: ,

Leave A Comment

Your email will not be published.