I have a functionality in JQUERY which requires basic plugin of jquery to work.
While testing in different browser I came across that my plugin was giving error in IE as
Object doesn't support this property or method
while the same plugin was working correctly in CHROME.
The plugin is
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
have a look at the fiddle which is working fine in CHROME but not in IE.
at line return H||(H=n.Deferred()
So I want a plugin which supports my functionality in IE 8 and chrome both.
The JQuery 2.x versions do not support IE8
To use JQuery in legecy browsers you will need to download the 1.x version from the JQuery downloads page: http://jquery.com/download/
Or if you're using the Google hosted libraries select the 1.x snippet.
The current latest version is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
Use a fallback method for IE 8 as it does not support jquery 2+
<!--[if (!IE)|(gt IE 8)]><!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8]>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<![endif]-->
Related
This is a very particular situation. Im working on a web app that needs support for IE8 and above + modern browsers. For IE8 we have managed to load jquery 1.X plus JQUery UI (both of them in just one file) and we have JQuery 2 and JQuery UI for modern browsers (in another file). The thing is i need to find a way to load the Jquery 1.X plugins just for IE8 and the rest of the plugins for modern browsers.
I have find some solutions when you have to add css targeting specific browsers but not something that would allow me to do something like this on a jsp file:
**Load just for modern browsers (ie9, ie10,ie11, chrome, firefox)** {
<script type="text/javascript" src="/eacat-theme/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="/eacat-theme/js/ui.dropdownchecklist.js"></script>
<script type="text/javascript" src="/eacat-theme/js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="/eacat-theme/js/noty/layouts/topCenter.js"></script>
<script type="text/javascript" src="/eacat-theme/js/noty/themes/default.js"></script>
}
**load just for ie8** {
<script type="text/javascript" src="/eacat-theme/js/js-old/noty/jquery.noty.js"></script>
<script type="text/javascript" src="/eacat-theme/js/js-old/noty/layouts/topCenter.js"></script>
<script type="text/javascript" src="/eacat-theme/js/js-old/noty/themes/default.js"></script>
}
I have another problem, i can't use javascript as a solution to target specific browsers since the jquery version will have to load also depending on the browser. Any help will be really appreciated. I don't know if its usefull but since im working in Liferay 6.2 i already have a class on the html tag that changes depending on the browser.
You need to create a new theme (or edit a custom theme you created) and add the following lines inside the tag:
<!--[if lt IE 8]>
<script type="text/javascript" src="$javascript_folder/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="$javascript_folder/jquery-migrate-1.2.1.min.js"></script>
<![endif]-->
<!--[if gte IE 8]>
<script type="text/javascript" src="$javascript_folder/jquery-2.1.1.min.js"></script>
<![endif]-->
<!--[if !IE]>
<!--><script type="text/javascript" src="$javascript_folder/jquery-2.1.1.min.js"></script><!-->
<![endif]-->
i'm using this solution and it's working
I found out that my javascript-intensive web site doesn't work reliably (or at all) in IE9.
It works, (usually, but not always) with the compatibility mode meta tag in the header, but I just want to build a page that I know will work well in IE9 and then have the usual page redirect to it when IE9 is detected. The usual page is fine in IE 7 and 8 (and every other browser I've tried it on).
Can anyone give me some javascript that will do that? Thank you!
Here's my usual page:
http://ianmartinphotography.com/test-site/test/
The simplest way would be to use IE Conditionals.
Note: IE10 and beyond have removed support for this feature. For modern browsers the widely accepted way of conditionally displaying content for compatibility purposes is using feature detection. Modernizr is a popular library built for handling feature detection.
For example:
<!--[if IE 9]>
<script type="text/javascript">
window.location = "http://www.ie9version.com";
</script>
<![endif]-->
Examples from the conditional site:
<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>
<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->
<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->
<!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
<![if false]>You are using a <em>downlevel</em> browser.<![endif]>
<!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->
<script LANGUAGE="JavaScript">
<!--
if( navigator.appName.toLowerCase().indexOf("microsoft") > -1 ||
navigator.userAgent.toLowerCase().indexOf("msie") > -1 ) {
window.open("http://www.pobox.com/~qed/windoze.html", "Windoze",
"dependent=no,titlebar=no,scrollbars=yes" );
}
// Paul Hsieh
// qed at pobox dot com
// -->
</script>
Source: http://www.cexx.org/snicker/nomsie.htm
1) If I'm already using Modernizr, will I then even need HTML5 Shiv to enable HTML5 tag support for IE?
2) Is HTML5 Shiv only for IE, or for all browser who don't have native HTML 5 support? Like older versions of Firefox, Safari, Chrome, etc?
1) If I'm already using Modernizer then even will I need HTML5 Shiv to
enable HTML5 tag supports for IE.
You don't need to separately include html5shiv, because Modernizr includes it:
As of Modernizr 1.5, this script is identical to what is used in the
popular html5shim/html5shiv library.
http://www.modernizr.com/docs/#html5inie
2) and is HTML5 Shiv only for IE or for all browser who don't have
native HTML 5 support. like older version of Firefox, Safari, Chrome
etc.
It's only for Internet Explorer.
Older versions of other browsers don't need it: http://caniuse.com/html5semantic
And the recommended snippet to include it is:
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Which will only ever run for IE less than 9.
Why do I get errors in ie6 when developing an html5 app with javascriptmvc?
The problem appears when I include in the header:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/libs/modernizr-1.6.min.js"></script>
And then before closing body:
<script type='text/javascript'
src='../steal/steal.js?appname,development'>
</script>
When I remove the html5shiv the app works but then it's impossible to style html5 elements.
You shouldn't need the html5shiv if you're using Modernizr, as Modernizr includes the same functionality itself.
Quote from the Modernizr homepage:
Lastly, Modernizr also adds support for styling and printing HTML5 elements. This allows you to use more semantic, forward-looking elements such as <section>, <header> and <dialog> without having to worry about them not working in Internet Explorer.
How do I verify if a site has Javascript enabled and if user's browser is IE 8?
Use conditional comments and some javascript code (it will work only if it's enabled, right? :))
<!--[if IE 8]>
<script type="text/javascript"> /*do something in JS - it's enabled!*/ </script>
<[endif]-->
Or you may want to look at conditional compilation in JS
If for whatever reason you need to know that you are dealing with IE8,
you have to watch for the IE9 preview, which smells like IE8,
but has some new objects:
<!--[if IE 8]>
<script type="text/javascript">
if(document.addEventListener) alert('IE9');
if(document.documentMode) alert('IE8'+ running as '+document.documentMode);
</script>
<[endif]-->