CODEWITHSUNDEEP
javascriptjqueryinternet-explorer
ltjfansite
ltjfansite

Reputation: 460

Get IE Version + Add Class to body

I am trying to find which version of IE people are using and adding a class to the body tag depending on which browser.

the code i have is 

if (navigator.appName == "Microsoft Internet Explorer") {
//Set IE as true
ie = true;
//Create a user agent var
var ua = navigator.userAgent;
//Write a new regEx to find the version number
var re = new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");
//If the regEx through the userAgent is not null
if (re.exec(ua) != null) {
    //Set the IE version
    ieVersion = parseInt(RegExp.$1);
}


}

else {
    ie = false;
}

function ieTag() {
    if (ie == true) {
        if (ieVersion == 7) {
            $('body').addClass('IE7');
        }
    }
    if (ie == true) {
        if (ieVersion == 8) {
            $('body').addClass('IE8');
        }
    }
    if (ie == true) {
        if (ieVersion == 9) {
            $('body').addClass('IE9');
        }
    }

}

and i am using this to call the function 

<script type="text/javascript">
    $(document).ready(function () {
        //IE Version Control
        ieTag();
    });
</script>

but i am only picking up IE 9 for some reason, i have had this script working before so i really dont understand whats gone wrong!!!

i have even tried using this script 

function ieTag() {
if (ie == true) {
    $('body').addClass('IE' + ieVersion);
}

}

but still only picking up IE9

I ma using IE( and the developer tools to change version (which both of these scripts has worked on before)

Upvotes: 1

Views: 7698

Answers (5)

tomaszbak
tomaszbak

Reputation: 8287

If you have jQuery you can add ie class to body like this

$(function(){
  if ($.browser.msie && $.browser.version == 8) {
    $('body').addClass('ie8');
  }
});

Upvotes: 0

ltjfansite
ltjfansite

Reputation: 460

The Reason why the js in the question failed in IE 7 and IE 8 was the fact i had included the script using application/javascript rather than text/javascript,

the reason is doesn't work with application/javascript is because this is a new way of including the script that only modern browsers support and older browsers does not support this method, hence IE 7 & 8 failing.

Upvotes: 0

adeneo
adeneo

Reputation: 318312

This is probably not the answer you are looking for, but it does seem like the simplest solution:

<!--[if lt IE 7]>      <body class="ie6">    <![endif]-->
<!--[if IE 7]>         <body class="ie7">    <![endif]-->
<!--[if IE 8]>         <body class="ie8">    <![endif]-->
<!--[if IE 9]>         <body class="ie9">    <![endif]-->
<!--[if gt IE 9]>      <body class="ie10+">  <![endif]-->
<!--[if !IE]><!-->     <body>                <!--<![endif]-->

of course added in the HTML where your body tag is supposed to start.

Upvotes: 8

Pointy
Pointy

Reputation: 413876

You don't need JavaScript for this.

<!--[if IE 9]>
  <body class='ie9'>
<![endif]-->
<!--[if IE 8]>
  <body class='ie8'>
<![endif]-->

etc. For normal browsers you do:

<!--[if IE]><!-->
  <body class='normal'>
<!--<![endif]-->

Upvotes: 0

Kevin B
Kevin B

Reputation: 95066

You could use conditional comments so that it doesn't affect other browsers.

<!--[if IE 6]>
<script>
$(document).ready(function(){
    $("body").addClass("ie-6");
});
</script>
<![endif]-->
<!--[if IE 7]>
<script>
$(document).ready(function(){
    $("body").addClass("ie-7");
});
</script>
<![endif]-->
<!--[if IE 8]>
<script>
$(document).ready(function(){
    $("body").addClass("ie-8");
});
</script>
<![endif]-->
<!--[if IE 9]>
<script>
$(document).ready(function(){
    $("body").addClass("ie-9");
});
</script>
<![endif]-->

Upvotes: 1

Related Questions