Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add v.crude IE9 support.

  • Loading branch information...
commit 461e3e20b2063fc0fb9c5cd497701f0b83a94c40 1 parent d7e28f7
@chrishilditch authored
Showing with 25 additions and 4 deletions.
  1. +4 −2 index.html
  2. +21 −2 picturefill.js
View
6 index.html
@@ -17,7 +17,8 @@
<h1>Picturefill: A &lt;picture&gt; element polyfill</h1>
<p>For more info: <a href="http://github.com/scottjehl/picturefill">see project home.</a></p>
-
+
+ <!--[if IE 9]><video style="display:none"><![endif]-->
<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<!-- smallest size first - no @media qualifier -->
<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_m.jpg">
@@ -32,7 +33,8 @@
<!-- Fallback content for non-JS or non-media-query-supporting browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_m.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
</picture>
-
+ <!--[if IE 9]></video><![endif]-->
+
<script src="external/matchmedia.js"></script>
<script src="picturefill.js"></script>
</body>
View
23 picturefill.js
@@ -29,11 +29,30 @@
var matchMediaSupport = window.matchMedia("(min-width: 0px)").matches;
w.picturefill = function(){
+
+ // IE 9 fix:
+ // The picture element must be placed inside a video element, to prevent the stripping of the source elements
+ // This removes the picture element from the video element
+ // TODO - only run this in IE9,
+ var vs = document.getElementsByTagName( "video" );
+ for( var i = 0, il = vs.length; i < il; i++ ){
+ var vps = vs[ i ].getElementsByTagName( "picture" );
+ for( var j = 0, jl = vps.length; j < jl; j++ ){
+ document.getElementsByTagName('body')[0].insertBefore(
+ vps[j].cloneNode(true),
+ vs[ i ]
+ );
+ if (vps.length!=0) {
+ vs[i].removeChild(vps[j]);
+ }
+ }
+ }
+
var ps = document.getElementsByTagName( "picture" );
var patt_min_width = new RegExp('min-width: [0-9]+px');
- var patt_min_width_value = new RegExp("[0-9]+");
-
+ var patt_min_width_value = new RegExp("[0-9]+");
+
// Loop the pictures
for( var i = 0, il = ps.length; i < il; i++ ){
var sources = ps[ i ].getElementsByTagName( "source" ),
Please sign in to comment.
Something went wrong with that request. Please try again.