Filter Opacity IE8

Question

I ma trying to set the opacity of an element. I am setting it to 0 and it hovers under the mouse pointer which is used for some pretty advanced click tracking.

Works fine in all browsers apart from IE. In IE 8 when filter opacity is set to 0 the element acts as if its display:none. I've also tried using:

$('#tracking').css('opacity',0)

I thought doing it that way might work, but does the same.

Answer 1

Im not using Jquery, so I don't know if these code is useful to you. But it works.

function getOpacity(target){
    if(target.currentStyle)
    {
        if(!target.filters.alpha) target.style.filter = "alpha(opacity=100)";
        return Number(target.filters.alpha.opacity) / 100;
    }else{
        return Number(document.defaultView.getComputedStyle(target,null).opacity);
    }
}

function setOpacity(target,opacity){
    if(target.style.opacity || target.style.opacity == "")
    {
        target.style.opacity = opacity;
    }else if(target.style.filter || target.style.filter == "")
    {
         target.filters.alpha.opacity = parseInt(opacity * 100);
        }

}

Answer 2

With jQuery you can also use fadeTo, to make things fade. I don't know if this is handy in your situation, but you can create beautiful websites with it:

$("#myelement").stop().fadeTo('fast', 0.000001);

This also works in Internet Explorer. More info: http://api.jquery.com/fadeTo/

Answer 3

Firefox, Chrome, Safari etc use 'Opacity' where as IE uses 'Alpha'.

Just set both styles:

$('#tracking').css('opacity',0) $('#tracking').css('alpha',0)

you get the idea...