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': ''
});
}
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]>
Is there a way to use HTML conditional tags like <!--[if (IE 6)|(IE 7)]> inside a .js file as I need to execute certain javascript if visitor is using IE6 or IE7?
Thanks
I'd do something like this with the markup...
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
Then in your JS, you can check for the appropriate body styles:
if (html tag has class lt-ie8) {
// we're in ie7 and below land
}
You can use conditional comments in your markup, and use the result to create conditional variables in your js. Start your doc with this:
<!DOCTYPE HTML>
<!--[if lte IE 7]><html lang="en" class="ieDetect ie7Detect"><![endif]-->
<!--[if IE 8]><html lang="en" class="ieDetect ie8Detect"><![endif]-->
<!--[if IE 9]><html lang="en" class="ieDetect ie9Detect"><![endif]-->
<!--[if !IE]>--><html lang="en"><!--<![endif]-->
I usually prefer to use jQuery for this and check for classes:
var ieDetect = $('.ieDetect').length
, ie7Detect = $('.ie7Detect').length
, ie8Detect = $('.ie8Detect').length
, ie9Detect = $('.ie9Detect').length
;
if (ieDetect){
// do stuff with IE
}
If you want to only use JS, you can either use a class fetching function and retain the markup above, or you could forgo the generic ieDetect class and just use ie7Detect (and 8,9) as IDs on the html tag.
var ie7Detect = document.getElementById("ie7Detect").length
, etc...
Separate JS files are the best option.
However you can use navigator.userAgent:
var userAgent = navigator.userAgent;
From this you can determine the browser the user is using to view your page and use the if statement built into JS.
User navigator.userAgent to check the browser the user has.
Recommended reading: http://api.jquery.com/jQuery.support/
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;
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
}