Created
February 1, 2012 16:29
-
-
Save erikvorhes/1717872 to your computer and use it in GitHub Desktop.
Responsive Images
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- NOTE: This doesn't work reliably. DO NOT USE. Thx. --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Responsive Images</title> | |
| <!-- A variation on http://www.monoliitti.com/images/ --> | |
| <!-- Note: the `big` version of the image will be broken, as it doesn’t exist. --> | |
| </head> | |
| <body> | |
| <h1>A responsive image?</h1> | |
| <noscript class="img"> | |
| <img src="http://erikanderica.org/i/people/erica.jpg" alt="My awesome wife." /> | |
| </noscript> | |
| <p>The following should only show when JavaScript is disabled.</p> | |
| <noscript> | |
| <img src="http://erikanderica.org/i/people/erik.jpg" alt="My current favorite picture of myself." /> | |
| </noscript> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| <script> | |
| (function(c, $) { | |
| $(function documentReady() { | |
| var FILENAME_APPENDED_TEXT = "-big.", | |
| big = screen.width >= 500; | |
| $("noscript.img").each(function addImage() { | |
| var $noscript = $(this), | |
| $img = $($noscript.text()), | |
| imgParts, | |
| imgExt; | |
| if (big) { | |
| imgParts = $img[0].src.split("."); | |
| imgExt = imgParts.pop(); | |
| $img.attr({ | |
| "src": (imgParts.join(".") + FILENAME_APPENDED_TEXT + imgExt) | |
| }); | |
| } | |
| $img.insertAfter($noscript); | |
| }); | |
| }); | |
| }(this, jQuery)); | |
| </script> | |
| </body> | |
| </html> |
Author
Author
Firefox has issues with this approach, as well. No consistent method to access the content of <noscript> = sad trombone.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Older versions of Safari don't allow access to the contents of the
<noscript>element. Hooray!