Getting Google Chrome to Ignore IE Javascript

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

Use a library, such as jQuery or scriptaculous. They have cross browser animations and CSS built-in.

Answer 2

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 ;-)

Answer 3

Another possibility is to check within the javascript function whether the particular properties that IE or Firefox use exist, then set the appropriate one. For instance:

function setOpacity(element, value) {
    if (typeof (element.style.opacity) != "undefined") {
        // This is for Firefox, Safari, Chrome, etc.
        element.style.opacity = value;
    }
    else if (typeof (element.style.filter) != "undefined") {
        // This is for IE.
        element.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + (value * 100) + ")";
    }
}

You do have to be aware if a particular browser happens to have both properties. In this case, Google Chrome does have a filter property as well as an opacity property, but IE does not have an opacity property. Thus, the ordering of the if clauses above will work for both browsers.