Question

I’m creating a slideshow using javascript that fades images. Awhile back, I discovered that to change the opacity of an image, I have to use a different API, depending on whether the page is viewed in Firefox or IE.

Firefox:

img.style.opacity = [value 0 to 1];

IE:

img.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity= [value 0 to 100] )";

So, currently, I use <script LANGUAGE="JScript"> for code that is meant for IE. This was suggested in the Mozilla docs.

The problem: Chrome thinks my <script LANGUAGE="JScript"> code is valid, when it is not.

How to make Chrome ignore the code inside <script LANGUAGE="JScript"> ? Or how to make my opacity code cross-browser?

Answer 1

If you don’t want to use a library such as jQuery, you should use Conditional Comments to target IE:

<script type="text/javascript" src="scripts.js"></script>
<!--[if IE]>
    <script type="text/javascript" src="ie-only-scripts.js"></script>
<![endif]-->

Then define a setOpacity function in scripts.js:

function setOpacity(element, value) {
    element.style.opacity = value;
}

Finally, overwrite that function definition in the ie-only-scripts.js file:

function setOpacity(element, value) {
    element.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=" + (value * 100) + ")";
}

As IE is the only browser to load the second script file, it has its own special version of the function, while other browsers get to do things properly 😉