How to identify the running Internet Explorer Versions which is IE7,IE8 or IE9. According to this, I need to call the css styles using the java script function. Please write that javascript code.
Help me
If your objective is purely to include specific stylesheets for specific versions of Internet Explorer, you want to use conditional includes:
HTML
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
And so on.
Usually detecting features is the best thing, but a fairly good point in this special case is detecting the existence of conditional comments, which are supported by IE only.
Here's what I usually do:
var div = document.createElement("div"), IE;
div.innerHTML = "<!--[if IE 5]>5<![endif]--><!--[if IE 5.0]>5.0<![endif]--><!--[if IE 5.5]>5.5<![endif]-->\
<!--[if IE 6]>6<![endif]--><!--[if IE 7]>7<![endif]--><!--[if IE 8]>8<![endif]--><!--[if IE 9]>9<![endif]-->";
IE = d.firstChild && d.firstChild.nodeType===3 ? +d.innerHTML : false;
Related
I have a website which is running on Jquery 2.x. This is supported by IE 9+ and Chrome and Firefox. But I want the website to work with IE 8.
How can I unload Jquery 2.x and load 1.x for only IE 8 ?
I have tried using the following:
<!--[if lt IE 9]>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<![endif]-->
But both versions will load in this case.
Try using a condition to check if the browser is IE8, like you did, and add a class to the <html> element:
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
Then, in your Javascript code, you can easily check if the <html> element has the class specified for older browsers and load the script dynamically inside your page's <head>, like so:
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
if(document.getElementsByTagName('html')[0].className == 'ie8')
script.src = "jquery_1.x.js";
else
script.src = "jquery_2.x.js";
script.type = 'text/javascript';
head.appendChild(script);
Note that this method might be quite slow, however.
You can add required jQuery version with following special conditional comments:
<!--[if lte IE 8]>
<script src="/js/jquery-1.12.4.min.js"></script>
<![endif]-->
<!--[if (gte IE 9)]><!-->
<script src="/js/jquery-3.3.1.min.js"></script>
<!--<![endif]-->
Note the additional <!--> just after the second if and its special closing <!--<![endif]-->. This will cause that modern browsers like as Chrome/FireFox don't consider it as comment and so include the new jQuery version.
I got a scenario where I need a JavaScript to load in all browsers except IE7. Any help is greatly appreciated. I've tried the below code:
<!--[if gt IE 7]>
<script type="text/javascript">
//Some script XXX to execute
</script>
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<script type="text/javascript">
//Some script XXX to execute
</script>
<!--<![endif]-->
I think this works too
<!--[if !(IE 7)]>
// tag here
<![endif]-->
You can also do a combination of
<![if !IE]>
// script tag
<![endif]>
<!--[if (gte IE 8)&(lt IE 7)]>
// script tag
<![endif]-->
see docs here http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
I am not sure if you are looking to load an entire file or just a few lines of script. If it's only a few lines the jquery way is easier
Use navigator.userAgent to check the browser identification.
also see here
try this
if ( $.browser.msie == true && $.browser.version < 8) {
//code for ie 7
}
else
{
document.write("<script src=\"test.js\">");
}
Looks like you're already on the right lines with conditional comments
<!--[if !(IE 7)]>--><script>alert("I'm not IE7");</script><!--<![endif]-->
To any non-IE browser, this becomes
<!--[if !(IE 7)]>--> Comment
<script>alert("I'm not IE7");</script> Element
<!--<![endif]--> Comment
To any IE browser, this becomes
<!--[if !(IE 7)]> If not IE 7
--> (continued) AND Comment
<script>alert("I'm not IE7");</script> Element
<!--<![endif]--> Comment AND End if
From which, if it is IE 7, it gets snipped.
<!--[if !(IE 7)]> If - not rendered
SNIP
<![endif]--> End If
You could reduce this down if you don't mind invalid HTML
<![if !(IE 7)]><script>alert("I'm not IE7");</script><![endif]>
Launched my website – http://www.artsbrand.co.uk – yesterday without having tested the finished product on IE. Now that I have, it initially brings up completely unstyled html, then after a couple of seconds the screen just goes blank. When that happens, this is the only thing in the source:
<script defer onreadystatechange='google.loader.domReady()' src=//:></script>
Does this have something to do with my Google Custom Search Engine?
I have a few conditional comments, which I'll list below in case they're important:
First I set up the html class (the no-js class is for Modernizr):
<!--[if lt IE 7 ]><!--> <html class="ie ie6 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 7 ]><!--> <html class="ie ie7 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 8 ]><!--> <html class="ie ie8 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 9 ]><!--> <html class="ie ie9 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"><!--<![endif]-->
Then I set up three different stylesheets with media queries:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" media="screen and (max-width: 489px)" href="<?php bloginfo('stylesheet_directory'); ?>/device.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 490px) and (max-width: 899px)" href="<?php bloginfo('stylesheet_directory'); ?>/smallscreen.css" />
<!--<![endif]-->
<link rel="stylesheet" type="text/css" media="screen and (min-width: 900px)" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
This one's just for Sticky Footer (as per the instructions here http://www.cssstickyfooter.com/style.css ):
<!--[if !IE 7]><!-->
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<!--<![endif]-->
I only have access to IE7 and IE9, but the behaviour is exactly the same in both of those – 1-2 seconds of unstyled page (I saw a split second of CSS once in IE9!) followed by sheer blankness. I'd be very grateful for any help you guys can offer!
EDIT - I'm less convinced it has anything to do with conditional comments now – I just tried getting rid of all of them and it made no difference at all. I should probably also mention that I've tried both versions of Google CSE (Search Element V1 and Search Element V2) and the results were the same.
UPDATE - I've got a fairly messy workaround now, although the search will have to be out of action in IE for now. The problem was a combination of my dodgy use of media queries/conditional comments (I'm new to both of them!) and the still unknown issue that's causing IE to react badly with the Google CSE. So anyway here's what my stylesheet links look like now:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" media="screen and (max-width: 489px)" href="<?php bloginfo('stylesheet_directory'); ?>/device.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 490px) and (max-width: 899px)" href="<?php bloginfo('stylesheet_directory'); ?>/smallscreen.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 900px)" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
<!--<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
<![endif]-->
Meanwhile the search script is wrapped in [if !IE] comments.
This is just a guess because I can't get my IE7 machine to boot right now, but I think it may be because the script you have is before the closing head tag.
From what I remember, IE does weird things when you try to access elements on the page that haven't been fully parsed yet.
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); is essentially trying to insert the new script tag before the very first script tag, which is inside the uncompleted head tag.
I thought s.parentNode would be null (or undefined) in this case, but apparently it's something else, maybe the whole document? Who knows, IE does crazy things.
At any rate, what I'd try is moving that google script tag inside the body of your page, instead of in the head, and see if that makes a difference.
As for the CSS, IE before 9 doesn't support media queries. You can use something like respondjs to make it work in IE, but you need to put the queries in the CSS file, not in the link tag itself.
I wonder if there is the possibilaty to load some javascript files only if its not the IE 8 like this:
<!--[if NOT IE 8]>
<script type="text/javascript" src="assets/scripts/slideshow.js"></script>
<![endif]-->
<!--[if IE 8]>
<script type="text/javascript" src="assets/scripts/slideshowOnlyForIE8.js"></script>
<![endif]-->
Try this (cited from here)...
<!--[if !IE 8]><!-->
<script type="text/javascript" src="assets/scripts/slideshow.js"></script>
<!--<![endif]-->
<!--[if IE 8]>
<script type="text/javascript" src="assets/scripts/slideshowOnlyForIE8.js"></script>
<![endif]-->
I assume that you are either limited by a feature that IE8 lacks or taking advantage of an IE8 specific feature. In this case, the best thing to do is test for that gating feature.
Basically, combine the two scripts into one, and kick it off with a simple if test to see if your feature is available:
if(crucialIEFunction()) {
//run IE8 slideshow code
}
else
{
//run non IE slideshow code
}
I would like to know how i can remove all css styles based on checking if the browser is less than IE8.
So if it detects IE7 then remove all styles? I wonder if this is possible via some jquery?
Will this fix most IE7 issues:
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
I don't know why you want to remove all styles for a browser version. I suppose that you have some CSS problems with IE7, and often a good way of fixing it, rather than deleting all your CSS, is to use ie7.js: http://code.google.com/p/ie7-js/.
Here is a demo of what it can do.
Also, this script has a version for IE8 and IE9.
<!--[if lt IE 8]>
<body class='oldIE'>
<![endif]-->
<!--[if gte IE 8]>
<body class='ok'>
<![endif]-->
<!--[if !IE]>
<body class='ok'>
<![endif]-->
here you would need to prefix all the styles you don't IE7 to apply with .ok
another method would be
<!--[if lt IE 8]>
//include an old IE specific stylesheet or none at all
<![endif]-->
<!--[if gte IE 8]>
//include your stylesheets
<![endif]-->
<!--[if !IE]>
//include your stylesheets
<![endif]-->
The best solution is to remove a specific class name rather than wiping the entire CSS for an element:
// Identity browser and browser version
if($.browser.msie && parseInt($.browser.version) == 7) {
// Remove class name
$('.class').removeClass('class');
// Or unset each CSS selectively
$('.class').css({
'background-color': '',
'font-weight': ''
});
}