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.
Related
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]-->
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'm making a website at the moment and for some reason the z-index of a see through overlay is not working in internet explorer (it works in everything else), therefore I want to display a warning message that the website does not support internet explorer, how can I make a div with the class "Warning" show up only in internet explorer?
I am happy to this via any method (HTML, CSS, Jquery etc) as long as it either resolves the z-index issue or makes the warning div show.
Update: I had a friend of mine test my website and the conditional comments don't work in IE11, I want the div to be displayed in all versions of IE.
You can use a conditional statement to show the div:
<!--[if IE]>
<div class="warning">...</div>
<![endif]-->
This will work for all versions of IE, if you want to target specific versions, see here for more info.
EDIT: As GSerg has pointed out, this will only work for < IE11. For later versions of IE, you may have to rely on some JS like in this Q&A: Browser detection in JavaScript?
Html5 Boilerplate recommends this solution (checkout this link for more details):
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
Wrap your html in a conditional like so:
<!--[if lt IE 7]>[html here]<![endif]-->
the lt means 'less than'. You can target various version of IE by using lt, gt (greater than), lte (less than or equal to) and gte (greater than or equal to).
I am still new to JQuery and BluePrint. BluePrint recommends adding the following lines in HTML pages headers to tackle Internet Explorer related issues:
<!--[if lt IE 8]>
<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->
But, is this really necessary if one uses JQuery to manipulate pages?
Yes.
jQuery does not patch poor IE CSS support out-of-the-box. The Blueprint file attempts to 'reset' IE so that when you apply your own styles, they look in IE more like they should do (i.e. how they look in compliant browsers).
Should the reference to the Modernizr JavaScript file be in the head of the page? I always try and place all scripts on the bottom of the page and would like to preserve this. And if it needs to be in the head, why?
If you want Modernizr to download and execute as soon as possible to prevent a FOUC, put it in the <head>
From their installation guide:
Drop the script tags in the <head> of
your HTML. For best performance, you
should have them follow after your
stylesheet references. The reason we
recommend placing Modernizr in the
head is two-fold: the HTML5 Shiv (that
enables HTML5 elements in IE) must
execute before the <body>, and if
you’re using any of the CSS classes
that Modernizr adds, you’ll want to
prevent a FOUC.
I would argue no: every script you place in the <head> will block rendering and further script execution. The only thing Modernizr does which must happen in the <head> is the integrated html5shiv, which hacks HTML5 tag support into Internet Explorer 8 and earlier.
I was testing this yesterday and found this to be fairly significant – on the site I work on, which is already fairly well optimized, adding that single script to the head delayed my load-time by ~100ms in IE9, which doesn't even benefit from the shiv!
Since around 90% of my traffic comes from browsers which natively support HTML5 and I don't have core CSS which requires the modernizr classes to display correctly on the initial render, I'm using this approach which places the html5shiv into a conditional comment and loads modernizr without the integrated shim:
<html>
<head>
…
<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
…
<script src="modernizr.custom.min.js"></script>
</body>
</html>
Paul Irish is now suggesting that for > 75% of sites, there is no benefit to placing Modernizr in the head.
Move Modernizr to the bottom
It has more potential to introduce unexpected situations, however it's much better for the user to just have no scripts up in the head at all.
I bet >75% of sites dont need it in the head. I'd rather change this default and educate the 25% than watch as we slow down all these sites.
https://github.com/h5bp/html5-boilerplate/issues/1605
How about using IE conditionals in a slightly different way?
What does everyone think of this solution:
Within the <head></head> tags:
<!--[if lt IE 9 ]>
<script src="/path/to/modernizr.js"></script>
<![endif]-->
</head>
Before the end of the </body> tag:
<!--[if gt IE 8]><!-->
<script src="/path/to/modernizr.js"></script>
<!--<![endif]-->
</body>
This would result in Modernizr loading in the head for IE8 and below, and it will load before the body for any other browsers.
Open discussion on pros and cons welcome in the comments.