Unfortunately, this approach generates CSS warnings in browsers that don't support that proprietary property, such as Firefox 1.5, which displays CSS warnings in the JavaScript console by default. A solution that's better than inserting IE-specific style information into your global style sheet is to use JavaScript to add that declaration to the pollingMessage div's style attribute in IE only. That's what the setAlpha method that's called in init achieves. Here's the code for that method:

Example 3.40. appmonitor2.js (excerpt)
 
this.setAlpha = function() {
  var self = Status;
  if (document.all && typeof window.opera ==
      'undefined') {
    var styleSheets = document.styleSheets;
    for (var i = 0; i < styleSheets.length; i++) {
      var rules = styleSheets[i].rules;
      for (var j = 0; j < rules.length; j++) {
        if (rules[j].selectorText ==
            '#pollingMessage') {
          rules[j].style.filter =
              'alpha(opacity = 100)';
          return true;
        }
      }
    }
  }
  return false;
};

This code, which executes only in Internet Explorer, uses the document.styleSheets array to iterate through each style sheet that's linked to the current page. It accesses the rules in each of those style sheets using the rules property, and finds the style we want by looking at the selectorText property. Once it has the right style in the rules array, it gives the filter property the value it needs to change the opacity.

Opacity in Opera?

Unfortunately, at the time of writing, even the latest version of Opera (version 8.5) doesn't support CSS opacity, so such an animation does not work in that browser. However, this feature is planned for Opera version 9.

Running the Animation

The code for the processing animation consists of five methods: the first three control the "Processing ..." animation, while the remaining two control the "Done" animation. The three methods that control the "Processing ..." animation are:

   
• startProc, which sets up the "Processing ..." animation and schedules repeated calls to doProc with setInterval
   
• doProc, which monitors the properties of this class and sets the current frame of the "Processing ..." animation appropriately
   
• stopProc, which signals that the "Processing ..." animation should cease

The two that control the "Done" animation are:

   
• startDone sets up the "Done" animation and schedules repeated calls to doDone with setInterval
   
• doDone sets the current frame of the "Done" animation and terminates the animation once it's completed

Starting it Up

Setting the animation up and starting it are jobs for the startProc method:

Example 3.41. appmonitor2.js (excerpt)
 
this.startProc = function() {
  var self = Status;
  self.proc = 'proc';
  if (self.setDisplay(false)) {
    self.currOpacity = 100;
    self.displayOpacity();
    self.procInterval = setInterval(self.doProc, 90);
  }
};

After setting the proc property to proc (processing), this code calls the setDisplay method, which sets the color and content of the pollingMessage div. We'll take a closer look at setDisplay next.

Once the code sets the color and content of the pollingMessage div, it initializes the div's opacity to 100 (completely opaque) and calls displayOpacity to make this setting take effect.

Finally, this method calls setInterval to schedule the next step of the animation process. Note that, as with setTimeout, the setInterval call returns an interval ID. We store this in the procInterval property so we can stop the process later.

Share and Enjoy: