Load different jquery script if browser is internet explorer?

I've been having some major issues with a layout I'm making specifically in Internet Explorer. I know IE converts width and heights differently when there is borders and padding, so I included codes in my css to make the navigation look the same in IE as in Mozilla and Chrome.

The issue I'm having now is though is that I have jquery animation running on my navigation and it is messing up in IE, most of it due to the height differences between my Mozilla/Google code and the specifics for IE. I have looked around on several sites and I created a separate jquery file with the height parameters to make the navigation look fine in IE, but for some reason IE is pulling from menu.js instead of the iemenu.js

I found several sites with different bits of code to try and force IE to read iemenu.js instead of menu.js while the other browsers read menu.js. Unfortunately, for some reason IE will not read iemenu.js, instead reading menu.js.

I have tried

<script type="text/javascript">var runFancy = true;</script>
<script>runFancy = true;</script>
<!--[if IE]>
<script type="text/javascript">
runFancy = false;
</script> // <script type="text/javascript" src="iemenu.js"></script>
<![endif]-->

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

I have also tried

<!--[if IE 9]>
<script type="text/javascript" src="iemenu.js"></script>
<![endif]--> 

Another I found that didnt work as well:

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

Another issue I'm having is the animation, which causes the navigation to shrink in height then go back to it's normal size when the mouse is taken away, is extremely glitchy when I include padding in the css to make the text move down a bit. I have tested this without the padding and the animation works fine, but about half of the text cuts off after it does the animation. I have also tried using the hoverintent plugin which did not fix the glitching problem.

Here is a sample of the navigation css:

.nav1 {
 width:96px;
 bottom:0;
 right: 311px;
 height:45px;
 font-size:20px;
 font-family:Verdana, Geneva, sans-serif;
 color:#ffffff;
 padding-top:15px;
 padding-bottom:0px;
 display: inl开发者_运维知识库ine-block;
 position:absolute;
 text-align:center;
 border:1px solid;
 border-bottom:0px;
 border-color:#000000;
 background: url("images/navbg.jpg") no-repeat;
 }

 * html .nav1 {
\width: 96px; /* for IE5 and IE6 in quirks mode */
 w\idth: 98px; /* for IE6 in standards mode */
 \height: 61px; /* for IE5 and IE6 in quirks mode */
 h\eight: 62px; /* for IE6 in standards mode */
 }

And here is the jquery code. Both iemenu.js and menu.js are built the same, they just have different values for height:

$(function() {

$('.nav1').hover(function() {
    $(this).stop().animate({height:30, right: 311}, 300);
}, function() {
    $(this).stop().animate({height:45, right: 311}, 300);
});

 $('.nav2').hover(function() {
    $(this).stop().animate({height:30, right: 408}, 300);
}, function() {
    $(this).stop().animate({height:45, right: 408}, 300);
});

  $('.nav3').hover(function() {
    $(this).stop().animate({height:30, right: 505}, 300);
}, function() {
    $(this).stop().animate({height:45, right: 505}, 300);
});


  $('.nav4').hover(function() {
    $(this).stop().animate({height:30, right: 602}, 300);
}, function() {
    $(this).stop().animate({height:45, right: 602}, 300);
});



});

I have tried nearly every IE fixer trick in the book I know and have found online both here and on other sites and nothing seems to be working so far....I work on IE 7.

Also, for reference if it helps, I have been putting the if IE codes after my other script html and before

Try it like this:

<script type="text/javascript">var runFancy = true;</script>
<script>runFancy = true;</script>
<script type="text/javascript" src="menu.js"></script>
<!--[if IE]>
<script type="text/javascript">
runFancy = false;
</script> // <script type="text/javascript" src="iemenu.js"></script>
<![endif]-->

In this case menu.js will be loaded first and iemenu.js will be loaded afterwards. And if the functions are the same, the iefunction will overwrite the "normal" function and it should work.

Your need $.browser

if ($.browser.msie) {
    alert("this is ie!");
 }

For script loading you can use $.getScript

$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

So the final example

<script type="text/javascript" src="iemenu.js">
   if ($.browser.msie) {
      $.getScript('iemenu.js', function() {});
     }
</script>

Try to detect the misbehavior and use jQuery.support if possible since jQuery.browser is deprecated.

I would use this approach because, in my opinion, it's cleaner and more accurate then loading two scripts and overwriting code, like in accepted answer.

In this code iemenu.js will be loaded only if it is IE version less then IE9 and in other cases, like IE9-10-11 or any other browser, it will load menu.js

<!--[if lt IE 9]>
    <script src="iemenu.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="menu.js"></script>
<!--<![endif]-->

Here is example and discussion about two different versions of jQuery: http://www.impressivewebs.com/loading-different-jquery-version-ie6-8/

Maybe I'm late with answer :) ...

Your menu.js will load always, because it is not in any if. If it overwrites your functions, you'd be back to square one.

A sollution might be to load the menu first, but that's a bit of a hack. still