dev.enekoalonso.com » countdown http://dev.enekoalonso.com having fun with code Wed, 12 Oct 2011 21:40:17 +0000 en hourly 1 MooTools classes with “Smart Start” http://dev.enekoalonso.com/2008/12/10/mootools-classes-with-smart-start/ http://dev.enekoalonso.com/2008/12/10/mootools-classes-with-smart-start/#comments Thu, 11 Dec 2008 06:02:22 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=117 A couple of days ago I was talking with my friend Karsten at work about one small but relevant issue we face when building websites: our beautiful MooTools classes cannot interact with elements on the DOM until the DOM has fully loaded. This, which is obvious, sometimes has some impact.

For example, the typical case we face is with tabs. Usually you will see code that hides all tab panels but the first one with CSS classes. But what if your visitor has Javascript disabled? With no Javascript, all tabs should be visible. So we need to hide the tabs with Javascript, but now we face the problem: we cannot alter the elements until the DOM is ready. And that is to late for some browsers like IE6 & IE7 which are not very fast processing Javascript. If we hide the tabs on the initialize method of our class, you will see them on the screen for a split of a second. That is not good.

The solution is simple: Use document.write to create the styles needed to hide the tabs as soon as the javascript is processed, this is, before the DOM is loaded. The problem is that we are not creating our classes until the DOM is loaded, so this code has to be placed somewhere else, breaking the encapsulation that object oriented programming gives us.

So we came up with an idea, more or less at the same time: Instantiate our classes with a ‘Smart Start’. This is, our objects will be created before the DOM is ready but will be smart enough to hold the interaction with the elements until that point. This will allow us to do other stuff if we want to, like hiding the tabs other than the first one.

As an example, I have modified this cool CountDown class that David Walsh has just published.

Here is the new code:

  1. var CountDown = new Class({
  2.  
  3.   Implements: [Options,Events],
  4.  
  5.   domReady: false,
  6.   startOnDomReady: false,
  7.   fx: null,
  8.  
  9.   options: {
  10.     element: null,
  11.     start: 10,
  12.     finish: 0,
  13.     startFont: '36px',
  14.     finishFont: '12px',
  15.     onComplete: $$empty,
  16.     duration: 1000
  17.   },
  18.  
  19.   initialize: function(options) {
  20.     this.setOptions(options);
  21.  
  22.     // Smart objects can listen to domready
  23.     window.addEvent('domready',function() {
  24.       this.domReady = true;
  25.       this.options.element = $(this.options.element); // Hook element
  26.       if (this.startOnDomReady) this.start();
  27.     }.bind(this));
  28.   },
  29.  
  30.   start: function() {
  31.     // If DOM is not ready, wait
  32.     if (!this.domReady) {
  33.       this.startOnDomReady = true;
  34.       return;
  35.     }
  36.  
  37.     // Create FX object only once
  38.     this.fx = new Fx.Tween(this.options.element, {
  39.       duration: this.options.duration,
  40.       link: 'ignore',
  41.       onComplete: function() {
  42.         if(this.options.start >= this.options.finish) {
  43.           this.anim();
  44.         } else {
  45.           this.fireEvent('complete');
  46.         }
  47.       }.bind(this)
  48.     });
  49.  
  50.     this.anim();
  51.   },
  52.  
  53.   anim: function() {
  54.     this.options.element.set('text',this.options.start–);
  55.     this.fx.start('font-size',this.options.startFont,this.options.finishFont);
  56.   }
  57. });
  58.  
  59. var cd = new CountDown({
  60.   element: 'countdown',
  61.   start: 12,
  62.   finish: 0,
  63.   onComplete: function() {
  64.     this.options.element.set('text','Done! Your special code is: 4065').setStyle('color','#090');
  65.   }
  66. }).start();

As you can see, the object is instantiated as soon as the Javascript is processed but, even with the function start() being called, the object doesn’t start processing until the DOM is ready.

Demo: http://dev.enekoalonso.com/research/moo-countdown-smartstart.php

Related Posts:

]]> http://dev.enekoalonso.com/2008/12/10/mootools-classes-with-smart-start/feed/ 0