Rob's Blog

Update: see my jQuery plugin for an easy-to-use fade transition.

More web related stuff.

I have recently been wrestling with a DHTML fade effect, which has uncovered some interesting problems in JavaScript that seem to crop up regularly on news groups and mailing lists:

How to change the opacity of an HTML element

The fade effect I was trying to recreate relies on rapidly increasing (or reducing) the opacity of an HTML element so that it appears to fade in to (or out of) existance. IE6, IE7 and Firefox both support element opacity, but of course, they rely on different commands to invoke changes to this property.

for IE 6/7:
   element.style.filter = "alpha(opacity=" + value + ")";
where
   0 <= value <= 100

for Firefox:
   element.style.opacity = value
where
   0 <= value <= 1

Whilst there are a number of suggestions over the interweb which demonstrate these techniques, I have yet to see one which combines the two in a simple, cross-browser script that doesn’t raise an exception when it attempts to execute the command for a different browser. Here’s a simple function to acheive this result:

function setOpacity(element, value)
{
  if ((value >= 0) && (value <= 100) && element && element.style)
  {
    if (typeof(element.style.opacity) != null)
      element.style.opacity = value / 100;
    if (typeof(element.style.filter) != null)
      element.style.filter = "alpha(opacity=" + value + ")";
  }
}

How to call window.setTimeout on an object method

I’ve seen this problem discussed on many occasions, but trawled through many, many posts before I found the correct answer. In short, the window.setTimeout method executes or evaluates an expression after a given number of milliseconds has elapsed. The expression is usually supplied as a string, and most attempts to call setTimeout from an object method, passing another object method as the statement to execute look something like this:

function testObj()
{
  this.sayHello = function() { alert("Hello, World!"); };
  window.setTimeout("this.sayHello()", 1000);
}

This will not work, as the setTimeout method is a method of the window object, and hence the “this” part of the expression argument will refer to the window object, and not an instance of testObj.

setTimeout can also evaluate a method pointer instead of a string expression, and this is where the solution lies:

function testObj()
{
  var me = this;
  this.sayHello = function() { alert("Hello, World!"); };

  setTimeout(function() {me.sayHello(); }, 1000);
}

This new class references itself (the “me” variable). By passing a new function to setTimeout and referencing “me”, we can acheive the appropriate timeout functionality, and ensure the object isn’t garbage collected until the method is executed.

Putting it all together

I have created a simple class which implements a cross-browser fade effect on HTML elements using the two techniques described above. The effect is initiated by calling “fadeIn(el)” or “fadeOut(el)“, where “el” is either an element, or an element’s id.

Download the sourcecode here: DHTML Fade Effect

This entry was posted on Monday, February 12th, 2007 at 5:04 pm and is filed under Computers, Software Engineering, Web.