JavaScript / HTML - new Audio JavaScript fails in IE 8 and less? - javascript

How can I fix this? eg:
snd = new Audio("foo/bar.wav")
alert("abc") //in IE this line wont run??!
snd.play()

If you detect the feauture (the supported type),
your script will not throw an error in other browsers (mobile etc.),
that doesn't support audio.
You could make it crossbrowser conditional ie.
if (typeof window.Audio != 'undefined') {
/* var snd = new Audio("foo/bar.wav"); ... */
}
or consider to use Modernizr.

IE8- does not support the <audio> element. See http://caniuse.com/#feat=audio. If you can separate your script, you can do this:
<!--[if lte IE 8]>
<script>
alert("Old IE.");
</script>
<![endif]-->
<!--[if IE 9]>
<script>
snd = new Audio("foo/bar.wav");
alert("IE9");
snd.play()
</script>
<![endif]-->
<!--[if !IE]> -->
<script>
snd = new Audio("foo/bar.wav");
alert("Not IE (Or IE10+)");
snd.play()
</script>
<!-- <![endif]-->
IE10 drops conditional comments altogether, so it will use the !IE script.

Related

load css style sheet based on IE document mode

I'm building a website and I would like to include different versions of my style sheet based on the document mode the browser is in (not the browser mode).
For example of the documentmode = ie8 I might want to load main_ie8.css but if the documentmode = ie9 I might want to load main_ie9.css
I have a number of users that run IE9 in compatibility mode. This defaults the document mode to ie7 standards. I use the following meta tag to force the document mode to IE9 standards in IE9:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
The problem is the browser mode is still set to IE compatibility. So the user agent is still set to IE7.
Since there is no way on the server side to determine the document mode the browser is running in and conditional comments are also based on the browser mode not the document mode, how can I load my css files based on the document mode rather than the browser mode.
Use this code to detect browser mode and document mode.
var j = jQuery.noConflict();
j(document).ready(function(){
/* detect usage of IE Developer Tools using different Mode for Browser and Document */
if(j.browser.msie) {
var browserVersion = j.browser.version.slice(0,j.browser.version.indexOf("."));
var documentVersion = document.documentMode;
}
}
});
Send an ajax 'get' call to a sample.php script:
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//do the settings based on the response from php
/*you can echo the css file name to be picked
based
on browser mode or document mode*/
var response=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://<?php echo IP; ?>/yourapp/sample.php?mode="+,true);
xmlhttp.send();
Hope it helps!
You could run a conditional javascript that tests the document mode, then appends the css. Something like:
if (BrowserDetect.browser == 'Explorer')
{
if (document.documentMode == 7 && BrowserDetect.version > 7)
{
// user is running IE in compatability mode
// load special CSS
}
}
Got this idea from a similar posts' answer at https://stackoverflow.com/a/13732003/3100667
If this is more of an issue of browser support for CSS styling, which it sounds like, you could also work around it by loading shims and polyfills to enable CSS3 support in older IE versions. The popular HTML5 Shiv is a good starting place.
A collection of other polyfills that may help fix a specific problem you're targeting is at https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
You can try conditional comments
http://www.quirksmode.org/css/condcom.html
<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9<br />
<!-- <![endif]-->
</p>

sniffing IE8 only

What's the shortest javascript code to sniff if the browser is IE8.
I want to do something special just for IE8
I don't want to wire up a library that gives me back all the browsers and the versions.
I just want to write one or two lines to work out if it's IE8.
thanks
zo
The best way I found is to use conditional styles, or conditional compiling:
var isIE8 = false;
<!--[if IE 8]>
<script type='text/javascript'>
isIE8 = true;
</script>
<![endif]-->
Then in your code, you can simply check this value:
<script type='text/javascript'>
if (isIE8) {
alert('Your browser is IE8');
}
</script>
You can do this in HTML, by using this:
<!--[if IE 8]>
<script type="text/javascript" src="IE8.js">
<![endif]-->
Also take a look at this tutorial: http://msdn.microsoft.com/en-us/library/ms537509%28v=vs.85%29.aspx
In your HTML, you can include markup for certain IE browsers using conditional comments:
<!--[if IE 8]>
<script type="text/javascript" src="ie8_hacks.js">
<![endif]-->

How to Redirect all IE users to a new page

My programmer is on vacation so I need your help! I discovered a page that has a bug for IE users. I want to redirect all IE users to a different page.
How can I do this? I searched all through Google and Stackoverflow and cannot find an answer. (I found some scripts, and tried them, but none worked).
Try:
<!--[if IE]>
<script type="text/javascript">
window.location = "http://www.google.com/";
</script>
<![endif]-->
Or, a non-JS solution, put the following in your head section:
<!--[if IE]>
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.google.com">
<![endif]-->
A reminder that the [if IE] solution does not apply to IE 10 or greater. This can be very annoying for "features" that have not been fixed by IE 10. I am going to try the php and java solutions and re-comment.
I put this in header and it works for all IE versions:
<!-- For IE <= 9 -->
<!--[if IE]>
<script type="text/javascript">
window.location = "https://google.com";
</script>
<![endif]-->
<!-- For IE > 9 -->
<script type="text/javascript">
if (window.navigator.msPointerEnabled) {
window.location = "https://google.com";
}
</script>
For Internet Explorer 10 this one works well
<script type="text/javascript">
if (navigator.appName == 'Microsoft Internet Explorer')
{
self.location = "http://www.itmaestro.in"
}
</script>
Server-side solution using PHP that's guaranteed to work on all browsers:
<?
if ( preg_match("/MSIE/",$_SERVER['HTTP_USER_AGENT']) )
header("Location: indexIE.html");
else
header("Location: indexNonIE.html");
exit;
?>
Support for conditional comments has been removed in Internet Explorer 10 standards
I'm use this dirty hack for redirecting IE10+ users
<script type="text/javascript">
var check = true;
</script>
<!--[if lte IE 9]>
<script type="text/javascript">
var check = false;
</script>
<![endif]-->
<script type="text/javascript">
if (check) {
window.location = "page_for_ie10+.html";
}
</script>
js code:
<script>if (/*#cc_on!#*/false || (!!window.MSInputMethodContext && !!document.documentMode)){window.location.href="https://....html";}</script>
You can also use this Boycott-IE:upgrade-your-browser

Is there a way to introduce Internet Explorer conditional comments using JavaScript?

I have a segment of HTML code which includes a conditional comment:
<!--[if IE]>
<link rel="stylesheet" ...>
<[endif]-->
This code was tested and works correctly when included in the HEAD section of the page, on the initial page rendering.
I would like to introduce the same conditional CSS to an existing page using JavaScript in an Ajax response.
I have tried:
var comment = document.createComment("[if IE]>\n<link rel=\"stylesheet\" ...>\n<[endif]");
Wicket.Head.addElement(comment); //this is framework code that just appends the element to the HEAD node of the page. I debugged and verified that it's doing the appendChild(...) call.
The above code does not cause the stylesheet to be applied in Internet Explorer 7. Is there a way, using JavaScript, to introduce the conditional style in a way that Internet Explorer understands?
Just to be clear, I am trying to use JavaScript to create a conditional style, not trying to write browser-conditional JavaScript.
You can use conditional comments inside innerHTML as follows:
var div = document.createElement("div");
div.innerHTML = "<!--[if IE]><i></i><![endif]-->";
if (div.getElementsByTagName("i").length) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "ie_only.css";
document.getElementsByTagName("head")[0].appendChild(link);
}
Very simple:
/*#cc_on document.createStyleSheet("ie.css"); #*/
Do you know Modernizr?
Also, it is great to use this in the HTML open tag (replace the no-js with js!)
<!--[if lt IE 7 ]><html lang=en-us class="no-js ie6"><![endif]-->
<!--[if IE 7 ]><html lang=en-us class="no-js ie7"><![endif]-->
<!--[if IE 8 ]><html lang=en-us class="no-js ie8"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang=en-us class=no-js> <!--<![endif]-->
So you can do this in CSS:
.ie7 .myDiv {
foo:bar;
}
Can also be accessed in javascript with:
if( document.body.className.indexOf("ie") > -1 ){
//
}
// or using jQuery
if( $(document.body).hasClass("ie6") ){
}
All this is unnecessary.
public void renderHead(IHeaderResponse response)
if (WebSession.get().getClientInfo().getClientProperties().isBrowserInternetExplorer()) {
response.renderJavaScriptReference(new JavaScriptResourceReference(MyClass.class, "ie.js"));
}
If you choose to use Modernizr be aware of https://issues.apache.org/jira/browse/WICKET-3433

How to avoid the loading of a specific javascript lib on IE?

I have a JQuery-Datepicker that (however) crashes my site when you are using IE6. So I want the site to prevent the loading of that particular javascript on IE6.
I know about this trick:
<!--[if IE 6]>
<script type="text/javascript" src="datepicker.js"></script>
<![endif]-->
But I need it the other way around: To load the Script if the browser is NOT IE 6. This will not work, since Mozilla & Co. will see just a simple comment:
<!--[if !IE 6]>
<script type="text/javascript" src="datepicker.js"></script>
<![endif]-->
So, what's the best solution for this problem? Any ideas?
Thanks in advance.
var loadLibrary = true;
<!--[if IE 6]>
loadLibrary = false;
<![endif]-->
if(loadLibrary)
{
var s = document.createElement("script");
s.setAttribute("type", "text/javascript");
s.setAttribute("src", "datepicker.js");
document.getElementsByTagName("head")[0].appendChild(s);
}

Categories