I'm running a very simple enquire.js test as per the enclosed and finding that it doesn't get a response from IE9. Several other browsers are responding fine (FF, Chrome, Safari). I've tested the test-suite from GITHUB in IE9 which runs fine - so I must be missing something. Any help appreciated!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>enquire.js test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="frame">hello</div>
<script src="js/libs/jquery.1.7.1.js"></script>
<script src="../dist/enquire.js"></script>
<script>
$(document).ready(function(){
enquire.listen(50);
enquire.register("screen and (max-width: 1000px)",
{
match : function(){
$("#frame").css("background-color","#f00");
},
unmatch : function(){
$("#frame").css("background-color","#0f0");
},
});
});
</script>
</body>
</html>
IE9 does not support the matchMedia API so you have to include a polyfill to get it to work. You can add the polyfill to the page however you like, providing it's loaded before enquire. Personally I use Modernizr to conditionally load polyfills, but that's personal preference.
Hope that helps
Related
I am trying to polyfill webcomponents as explained at https://www.webcomponents.org/polyfills/ since I wanted my sample app to work on both Chrome and Firefox. However I am getting ReferenceError: customElements is not defined error in Firefox. See my code below on the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sample</title>
<link rel="stylesheet" href="css/site.css">
<!-- Components -->
<link rel="import" href="components/global/site-navigation.html">
</head>
<body>
<script>
(function () {
if ('registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')) {
// platform is good!
} else {
// polyfill the platform!
var e = document.createElement('script');
e.src = 'js/webcomponents.js';
document.body.appendChild(e);
}
})();
</script>
<site-navigation></site-navigation>
</body>
</html>
What am I missing?
PS: Everything works fine in Chrome (with/without the polyfill)
You are using an old version of webcomponentsjs polyfill, which implements Custom Elements v0's document.registerElement() instead of v1's customElements.define().
You should use the new version 1.0 on github.
Just load the webomponents-lite.js script in the <head> part of your page:
<script src="webcomponents-lite.js"></script>
Update: Now polyfill version 2 was released. HTML Imports polyfill is not shipped any more, but can be used it separately, or you can still download v1 branch.
I have got code as below. I want change content of Meta-tags IE=Edge. But this code only in browser"chrome", browser"IE11" inactive. The people help me, please!!!
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="IE=EmulateIE7">
<script src="../js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$('meta[name=description]').remove();
$('head').append( '<meta name="description" content="IE=Edge">' );;
});
});
</script>
</head>
<body>
<button>Click me</button>
</body>
</html>
please you can see this page:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
It forces the browser the render at whatever the most recent version's standards are. Just like using the latest version of jQuery on Google's CDN, this is the most recent, but also can potentially break your code since its not a fixed version.
Last, but not least, consider adding this little tidbit:
See the page
Page 2
I am using the zurb foundation and all is working well except for data-alert. I am unable to close data-alert with the X. In other posts, people say to add the $(document.foundation(); again after the data-alert div. I have tried it with and without the second initialization. Here is the code.
<!DOCTYPE HTML>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="/css/foundation.min.css">
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<div data-alert class="alert-box alert radius hide-for-print">You can't close this!!!×</div>
<script>
$(document).foundation();
</script>
</body>
</html>
I would appreciate any help I can get on this.. Thanks.
The data-alert was not closing because modernizr wasn't included in your project.
DEMO
Mostly this kind of errors you can solve by checking the console.
In console, It was showing the following error:
ReferenceError: Can't find variable: Modernizr
Because foundation.min.js required modernizr to work
I am using propertychange for ie's to capture the input values. it's not working with ie11. any one suggest me the correct way to use it to work with all ie's.
here is my code and html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PropertyChange</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="propChange.js"></script>
</head>
<body>
<input type="text">
</body>
</html>
script:
jQuery(document).ready(function($) {
$('input').on('propertychange', function(){
console.log(this.value);
});
});
In the console I am getting this:
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
and
HTML1300: Navigation occurred.
Use DOMSubTreeModified to make it work in IE11 (IE11 manipulates DOM) :
$('input').on('DOMSubTreeModified propertychange', function(){
console.log(this.value);
});
I'm trying to develop an app that will just stream a shoutcast, the deal is I can't make it work, I'm testing my app on a android 4.2 and it seems to not work at all, I'm just doing the example from intel xdk documentation.
Here is the simple code i have made atm:
<!DOCTYPE html>
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
</style>
<script src='intelxdk.js'></script>
<script type="text/javascript">
var onDeviceReady=function(){
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
function PlayMe() {
intel.xdk.player.startShoutcast("http://209.9.238.10:8008/",true);
}
</script>
</head>
<body>
<button onClick="PlayMe();">PLAY ME</button>
</body>
</html>
This issue is only seen on Android devices with version 3.0 and above. With the change of the Android web browser and WebView's rendering engine to Webkit, the intel.xdk.startShoutcast() can not successfully executed since it is an internal modification to the browser's engine.
Please use this format, it will just stream a shoutcast without errors,
Here is the simple format I have made:
http://209.9.238.10:8008/;strem.mp3
I have tested my app on an android 4.3 and it seems to work well.