Using bgsleight.js with Partial Page Rendering

As you already have found out the hard way, IE6 does not support transparent PNG images. That’s the hard truth. If you attempt such an easily overlooked edge case (note the sarcasm), what you’ll get is a completely opaque image rendered with your colors mixed with white (or is it black, I can’t tell— $%@!!# crappy IE6—no, that’s not Perl/Ruby). See the screen shot below. Beautiful isn’t it?

Screenshot of a transparent PNG rendered on IE6

Luckily, as you may have already found out Youngpup and All in the Head came up with a great little piece of JavaScript to iterate through your PNG images and apply an MS specific filter, actually acheiving the desired transparency. See the screenshot below.

Screenshot of a transparent PNG with the bgsleigh script applied

Specifically, the way these little gems work is by attaching an event handler to perform the magic in the window.onload event. So what do you do if you would also like to use transparent PNG images with a page that uses partial page rendering—you know, an UpdatePanel. Obviously, window.onload won’t be fired, that wouldn’t be very partial would it? Well, just add these hightlighted lines to the init function inside the bgsleight.js script (error handling removed for brevity). Please, forgive the funny indentation.

init: function() {

    if (navigator.platform == “Win32” && navigator.appNa

        addLoadEvent(fnLoadPngs);

        Sys

            .WebForms

            .PageRequestManager

            .getInstance()

            .add_endRequest(fnLoadPngs);                

    }

}

Code to add to bgsleight.js

The PageRequestManager is the class resposible for raising all of the “callback lifecycle” events.

Oh, and by the way, some weird thing happens to all clickable inputs and links. What’s worked for me is to put a couple of CSS rules like this:

    A { position: relative; }

    INPUT { position: relative; }

CSS to make inputs and links work with bgsleight.js

Tags: JavaScript, Design