Red Button

Javascript OO

Even though it is often the bane of our lives, I strive to see that my website looks and functions in the same manner for users of Internet Explorer 6. However, when it comes to IE6 PNG transparency, an extra step is required. Since this browser is unable to display PNGs complete with transparency, I had to employ the use of Drew Diller's script.

As you may be aware, photoshop documents are constructed by placing a series of layers on top of one another, coming together to build a picture. This is replicated on the page by layering PNGs with transparency, one PNG for each layer in the document.

For browsers other than IE6, the show/hide functionality in the photoshop layers mock-up implementation involves modifying the CSS display property to switch between it's default value and 'none'. However, this approach fails for IE6 users, since a script is used to modify the source. Therefore, an alternative implementation is used to regenerate the PNG layers each time a show/hide effect is required. This is where the factory pattern comes in.

The parent object is defined as PhotoshopLayersManager(). Once the decision has been made to whether the user's browser is IE6 or a standard browser, prototype is employed to create a child instance e.g.:

Ie6PhotoshopsLayersManager.prototype = new PhotoshopLayersManager;
manager = new Ie6PhotoshopsLayersManager();

Here is the factory function:

function CreatePhotoshopsLayersManager(isIE6) {
  try {
    if (isIE6 === undefined)
      isIE6 = false;
  }
  catch(r) {
    isIE6 = false;
  }

  var manager = new PhotoshopLayersManager();

  if (isIE6) {
    Ie6PhotoshopsLayersManager.prototype = new PhotoshopLayersManager;
    manager = new Ie6PhotoshopsLayersManager();
    try {
      DD_belatedPNG.fix('.png');
    }
    catch(r) {
      alert(r);
    }
  }
  else {
    StandardsPhotoshopsLayersManager.prototype = new PhotoshopLayersManager;
    manager = new StandardsPhotoshopsLayersManager();
  }

  return manager;
}

Then, near the bottom of the script, we retrieve the appropriate manager using the function:
<script type="text/javascript">
  manager = CreatePhotoshopsLayersManager(isIE6);
</script>

You may be wondering where the isIE6 variable comes from? Actually this can be set anywhere. I define it at the top of every page, then set it using a conditional comment <!--[if lte IE 6]>, which will only fire in IE6 or earlier versions. I also do an additional check using try/catch to ensure that the variable defaults to false if the variable has not yet been defined.

The factory allows the command to show or hide layers to be completely agnostic to how that action is carried out. The responsibility of showing/hiding is up to the individual browser-specific implementation. Employing the factory pattern means that should the method of displaying the PNGs change for IE6, it will not affect the other browsers. This approach also affords me the option to add further platform-specific implementations in the future should the need arise, again without affecting the existing browsers.

If you're at all impressed, interested, or just feeling nice, use the bookmarking and sharing facilities at the bottom of the page to spread the word!


Get the Code