Updating media query

mobify · Feb 25, 2013 · b0e17b7 · b0e17b7
1 parent 6630542
commit b0e17b7
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/examples/assets/js/large.js b/examples/assets/js/large.js
@@ -0,0 +1 @@
+alert("I'm executed from a script loaded from a media query that only loads if the browser with is at least 480px wide! Refresh again with a smaller width to see the other script load");
diff --git a/examples/assets/js/small.js b/examples/assets/js/small.js
@@ -0,0 +1 @@
+alert("I'm executed from a script loaded from a media query that only loads if the browser with is at most 480px wide! Refresh again with a larger width to see the other script load.");
diff --git a/examples/capturing-mediaquery/index.html b/examples/capturing-mediaquery/index.html
@@ -75,7 +75,7 @@
     background-color: teal;
 }
 </style>
-<title>Mobify.js image gallary example</title>
+<title>Mobify.js Media Query</title>
 </head>
 <body class="foo">
 <div class="small">
@@ -88,6 +88,10 @@ <h1 media="(min-width : 481px)">Big images downloaded</h1>
     <img src="/examples/assets/images/leaves-big.jpg" width="100%" media="(min-width : 481px)">
     <img src="/examples/assets/images/office-big.jpg" width="100%" media="(min-width : 481px)">
 </div>
+
+<h1 media="(min-width : 481px)">
+<script src="/examples/assets/js/small.js" media="(max-width: 480px)"></script>
+<script src="/examples/assets/js/large.js" media="(min-width: 481px)"></script>
 <script>
 // Grab the total time since starting capturing and send it
 // to the parent for testing in performance.html

diff --git a/examples/capturing-mediaquery/main.js b/examples/capturing-mediaquery/main.js
@@ -5,8 +5,9 @@ function modifyDom(elements, prefix) {
         var el = elements[i];
         var mediaQuery = el.getAttribute("media");
         var match = window.matchMedia(mediaQuery).matches;
+        console.log(match, el)
         var src = (prefix || "") + "src";
-        if (el.tagName === "IMG") {
+        if (el.tagName === "IMG" || el.tagName === "SCRIPT") {
             if (match) {
                 var set = src, unset = "unset-src";
             } else {

diff --git a/examples/capturing-picturepolyfill/index.html b/examples/capturing-picturepolyfill/index.html
@@ -78,13 +78,13 @@
 <title>Mobify.js image gallary example</title>
 </head>
 <body class="foo">
-<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
-    <source src="/examples/assets/images/small.jpg">
-    <source src="/examples/assets/images/medium.jpg" media="(min-width: 450px)">
-    <source src="/examples/assets/images/large.jpg" media="(min-width: 800px)">
-    <source src="/examples/assets/images/extralarge.jpg" media="(min-width: 1000px)">
-    <img src="/examples/assets/images/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
-</picture>
+    <picture>
+        <source src="/examples/assets/images/small.jpg">
+        <source src="/examples/assets/images/medium.jpg" media="(min-width: 450px)">
+        <source src="/examples/assets/images/large.jpg" media="(min-width: 800px)">
+        <source src="/examples/assets/images/extralarge.jpg" media="(min-width: 1000px)">
+        <img src="/examples/assets/images/small.jpg">
+    </picture>
 <script>
 // Grab the total time since starting capturing and send it
 // to the parent for testing in performance.html