Detect the Browser and show a other content - javascript

I build a website only with CSS3 & HTML5.
So IE can't display it correct.
I want to show every Internet Explorer-User a other site with a simple content: Please use a modern browser like Google Chrome, Fire Fox ...
How can i detect the browser and show a other site?
Or can i build a text for the Internet Explorer users like
<div style="display:none;">Please use a modern Browser!</div>
and let show it only for Internet Explorer-Users?

You can utilize IE detects that IE itself puts out. So place the div with the display none, and then make an ie stylesheet and target all the different versions you would like.
More information on specifics here: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

there is better option instead of adding a new style sheet
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie ie6" lang="en-US"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7" lang="en-US"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8" lang="en-US"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9" lang="en-US"> <![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-US">
<!--<![endif]-->
and in style sheet just add a class for selector
.page {
//some style for morden browsers
}
.ie .page {
//some style for all ie versions
}
.ie6 .page {
//some style for ie 6 only
}
.ie7 .page {
//some style for ie 7 only
}
.ie8 .page {
//some style for ie 8 only
}
.ie9 .page {
//some style for ie 9 only
}
it would be done using a single style sheet

navigator.userAgent
there is a very cool script here: http://www.quirksmode.org/js/detect.html

You can use the following :
<?php
$u_agent = $_SERVER['HTTP_USER_AGENT'];
if(preg_match('/MSIE/i', $u_agent))
{
// Change http://www.othersite.com, by your other site URL
header('Location: http://www.othersite.com');
}
?>
You can also use conditional comments for IE.

Related

IE detection not working

I wanted to detect IE8 and 9 via JavaScript. All of them return as 7.
I tried JQuery-1.8.2, but same results.
It returns "Compatible" version or something.
If both IE8 and 9 versions use their IE version as 7, why they behave differently?
Why MS labels it as 8 and 9 and send some other version details on the IP header?. Is this the expected behavior of IE?
I tried this too.
http://msdn.microsoft.com/en-us/library/ms537509(v=vs.85).aspx
Can anyone give an explanation about this.
Thanks.
You can find a solution Detect IE version (prior to v9) in JavaScript
See:
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
<head>
and then:
(function ($) {
"use strict";
// Detecting IE
var oldIE;
if ($('html').is('.ie6, .ie7, .ie8')) {
oldIE = true;
}
if (oldIE) {
// Here's your JS for IE..
} else {
// ..And here's the full-fat code for everyone else
}
}(jQuery));

How to detect if a user is using IE and inform them that the site doesn't support IE?

I'm creating a website with Zepto, so it doesn't support any Internet Explorer version.
How can I detect if a user is using Internet Explorer and redirect them to a page informing that the website doesn't support IE?
I've read about conditional comments, but them aren't supported in Internet Explorer 10.
Thanks.
You can never know for sure, but an easy option is to look at the user-agent (in e.g. PHP).
Also take a look here: How to display browser specific HTML?
Setup the document like this:
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
<head>
For IE10 use this:
if (Function('/*#cc_on return document.documentMode===10#*/')()
){
document.documentElement.className+=' ie10';
}
Then, what you do with these classes depends on whether you want to just show/hide a div with css, or use javascript to redirect the page.
Javascript:
(function ($) {
"use strict";
// Detecting IE
var IE;
if ($('html').is('.ie6, .ie7, .ie8, .ie9, .ie10')) {
IE = true;
}
if (IE) {
// redirect
window.location.replace('http://www.myotherpage.com');
}
}(jQuery));
OR CSS:
.ie6 .myDivClassName,
.ie7 .myDivClassName,
.ie8 .myDivClassName,
.ie9 .myDivClassName,
.ie10 .myDivClassName {
display: block;
}
Depends on what you are trying to do.

Conditional tags in javascript js file

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/

getting the ie edition without calling jquery

hi first (Jezen Thomas ty your code help me, but i cant use it), i have to make this code work with out calling jquery (since we dont know if it will be supported), so basically i have to get this code to show the ie version, only using html and javascript
<html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
<head>
<title>A HTML document needs a title to be valid.</title>
</head>
<body>
<script type="text/javascript">
window.onload = function mytest(){
"use strict";
// Detecting IE
var oldIE
if ($('html').is('.ie6, .ie7, .ie8')) {
oldIE = 1;
}
if (oldIE == 1) {
document.write("version<ie9")
} else {
document.write(" version => ie9")
}
}
</script>
</body>
</html>
i have to remove the ($) but i dont know for what to replace it (i just recently started with javascript)
alert(navigator.userAgent);
I hope that give you the start you need.

remove all styles based on browser version

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': ''
});
}

Categories