Time Until Wedding
Days
Hours
Minutes
Seconds
 
Navigation
 
Search
 
My Usable Projects
 
Reading...
 
Listening...
 
Random Image
img_2063.jpg
 
Archives
 
Me. Elsewhere.
 
Feeds and Such

Google Reader or Homepage
Add to My Yahoo!
Add to Technorati Favorites!
Bookmark del.icio.us
Bookmark Furl
Bookmark Spurl
 
Darcy
 
Things I Like
Sidux Linux
 
License
 
Fun with mootools

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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.

Posted March 18th, 2007 - Permalink
Categories: JavaScript - Programming
You can leave a comment, or trackback from your own site.
 
Adjacent Posts
 
Comments