Different javascript for different browsers

JavaScript
1

I have an animated menu made using JavaScript.
The animation effect works well in all browsers apart from ie6.
Therefore I altered my code for ie6, so that the menu is still functional, but without any flashy effects.
Now I need to serve one JavaScript file to ie6 and a different one to all other browsers. What is the best way achieve this?

I tried this and it worked:

<script type="text/javascript" src="./js/index.js"></script>

<!--[if lt IE 7]>  <script type="text/javascript" src="./js/index_ie6.js"></script>
<![endif]-->

Is this good practice?
Or, could I do the same thing within the JavaScript file (i.e. write two functions and then execute only one of them, based on which browser the visitor is using)?

Thanks very much in advance.

2

If the JavaScript were written to use feature sensing it would then function properly in all browsers without needing to test what browser it is.

What exactly is it that you have different between the two scripts?

3

Hi Felgall,

What exactly is it that you have different between the two scripts?

Unfortunately, almost everything.
Um, how can I explain this?
The script in question is an adapted version of the expandable accordion from Chapter 5 of Sitepoint’s “Simply JavaScript”.
In ie6 the animation (when you expand and collapse various folds of the accordion) looks shoddy. So, for ie6 I have rewritten the methods that are responsible for the animation and have the various folds jumping straight from expanded to collapsed. This looks a bit worse but still functions fine.
In terms of JavaScript it means that I have three or so methods with the same name but different code.
If it helps I could post the two scripts.

Thanks for your help

4

Sounds like it would be simpler to fix the generic version to work properly for IE6. There probably isn’t much that would need fixing since IE6 supports exactly the same JavaScript as IE7 and IE8 and so it would only be the CSS in the page that is the problem.