Example 3.35. appmonitor2.js (excerpt)
this.cleanup = function() {
var self = Monitor;
self.reqStatus.cleanup();
self.reqStatus = null;
};
The cleanup method in the Status class does the IE housekeeping:
Example 3.36. appmonitor2.js (excerpt)
this.cleanup = function() {
Status.div = null;
};
If we don't set that div reference to null, Internet Explorer will keep the memory it allocated to that variable in a death grip, and you'll see memory use balloon each time you reload the page.
In reality, this wouldn't be much of a problem for our tiny application, but it can become a serious issue in large web apps that have a lot of DHTML. It's good to get into the habit of cleaning up DOM references in your code so that this doesn't become an issue for you.
The displayOpacity Method
The central piece of code in the Status class lives in the displayOpacity method. This contains the browser-specific code that's necessary to change the appropriate CSS properties of the pollingMessage div. Here's the code:
Example 3.37. appmonitor2.js (excerpt)
this.displayOpacity = function() {
var self = Status;
var decOpac = self.currOpacity / 100;
if (document.all && typeof window.opera == 'undefined') {
self.div.filters.alpha.opacity = self.currOpacity;
}
else {
self.div.style.MozOpacity = decOpac;
}
self.div.style.opacity = decOpac;
};
The currOpacity property of the object represents the opacity to which the pollingMessage div should be set. Our implementation uses an integer scale ranging from 0 to 100, which is employed by Internet Explorer, rather than the fractional scale from zero to one that's expected by Mozilla and Safari. This choice is just a personal preference; if you prefer to use fractional values, by all means do.
In the method, you'll see a test for document.all -- a property that's supported only by IE and Opera -- and a test for window.opera, which, unsurprisingly, is supported only by Opera. As such, only IE should execute the if clause of this if statement. Inside this IE branch of the if statement, the proprietary alpha.opacity property is used to set opacity, while in the else clause, we use the older MozOpacity property, which is supported by older Mozilla-based browsers.
Finally, this method sets the opacity in the standards-compliant way: using the opacity property, which should ultimately be supported in all standards-compliant browsers.
IE Gotchas
Internet Explorer version 6, being an older browser, suffers a couple of issues when trying to render opacity-based CSS changes.
Fortunately, the first of these is easily solved by an addition to our pollingMessage CSS rule:
Example 3.38. appmonitor2.css (excerpt)
#pollingMessage {
float: right;
width: 80px;
padding: 0.2em;
text-align: center;
background: #fff;
}
The addition of the background property fixes the first specific problem with Internet Explorer. We must set the background color of an element if we want to change its opacity in IE, or the text will display with jagged edges. Note that setting background to transparent will not work: it must be set to a specific color.
The second problem is a little trickier if you want your CSS files to be valid. IE won't let you change the style.alpha.opacity unless it's declared in the style sheet first. Now, if you don't mind preventing your style sheets from being passed by the W3C validator, it's easy to fix this problem by adding another declaration:
Example 3.39. appmonitor2.css (excerpt)
#pollingMessage {
float: right;
width: 80px;
padding: 0.2em;
text-align: center;
background: #fff;
filter: alpha(opacity = 100);
}
Share and Enjoy:
