Using jQuery to fadeIn and fadeOut 24bit PNG images in Internet Explorer you may get black rings. If you’re using CSS images, a I’ve written how to fix black rings here. However if you use images in the HTML like this:

<ul id="ImageList">
<li><img src="24-bit-1.png" alt="img1" id="img1"/></li>
<li><img src="24-bit-2.png" alt="img2"/></li>
<li><img src="24-bit-3.png" alt="img3"/></li>
</ul>

Use need to use this jQuery fix instead:

if( $.browser.msie && parseInt($.browser.version) < 9 ) {
                $('#ImageList >li > img').each(function(){
                                $(this).attr('width', $(this).width());
                                $(this).attr('height', $(this).height());
                                $(this).css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='"+$(this).attr('src')+"')");
                                $(this).attr('src', '/images/Transparent.gif');
                });
}

It works by replacing the image with a filter, which supports alpha transparency. It uses a 1×1 Transparent.gif, and checks if the browser is IE8 or less.

Note! you must fade out the parent for it work:

$('#img1').parent().fadeOut();

Tags: IE, javascript, jQuery, PNG

In Internet Explorer you get black rings around your 24 bit PNG files while fading in or out. It usually happens when using fadeIn() or fadeOut(). This is caused by IE only being able to apply transparency to one alpha filter at a time to an element. It effects IE 6, 7 and 8.

The first step: fade out the container, not the elements you want to fade.

This solution works for PNG files set by CSS.

The next is to apply this jQuery magic to the elements inside the container:

if($.browser.msie && $.browser.version< 9) {

$('ul#HomeFaderControls li').css('filter', 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#01FFFFFF,endColorstr=#01FFFFFF)');

}

It works by making an invisible gradient behind the element that will apply a color to it. Other solutions call for multiple non standard CSS hacks. You’ll have to change ‘ul#HomeFaderControls li’ to the elements you want to fade out.

Smart coders will pick up there’s one bit of alpha channel in there. IE 7 sees the color is transparent and doesn’t apply the filter, so we force it by applying one bit of color. Most monitors won’t be able to display that while it’s transitioning.

Tags: HTML, IE, js

With modern browsers, we can simply use the function addEventListener to add events to the new HTML5 <canvas> tag. This function does not exist in IE (yet, IE9 apparently has it). I started my code base from Operas examples, which looks like this:

canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup',   ev_canvas, false);

Sadly Microsofts Internet Explorer does not support these functions. To remedy this, simply include Google’s Excanvas and use this:

// Attach the mousedown, mousemove and mouseup event listeners.
    if (canvas.addEventListener){
        canvas.addEventListener('mousedown', ev_canvas, false);
        canvas.addEventListener('mousemove', ev_canvas, false);
        canvas.addEventListener('mouseup',   ev_canvas, false);
    } else if (canvas.attachEvent){ // IE
        var trackend = false;
        var trackstart = false;
        var trackmid = false;
        canvas.onselectstart = function () {canvas.onmousemove();trackstart = true;return false;}
        canvas.onclick = function () {trackend = true;}
        canvas.onmousemove = function () {
            var mtarget = document.getElementById('Drawing');
            var x = event.clientX + mtarget.scrollLeft;
            var y = event.clientY + mtarget.scrollTop - 20;
            var mtype = 'mousemove';
            if (trackstart) {
                trackstart = false;
                trackmid = true;
                mtype = 'mousedown';
            }
            if (trackend) {
                trackmid = false;
                mtype = 'mouseup';
            }
            if (trackend || trackmid || trackstart) {
                trackend = false;
                ev_canvas({
                    type: mtype,
                    layerX: x,
                    layerY: y,
                    target: mtarget
                });
            }
        }
    }

You will have to change the ChangeMeToYourCanvasID to your canvas ID. The X and Y positions may change if you scroll the page, so I minused var x & y by scrollTop and scrollLeft. ev_canvas is the name of the handle function.

We can now use events exactly the same across all browsers.

Tags: excanvas, HTML, IE, javascript