Created
May 23, 2012 09:11
-
-
Save dvschultz/2774119 to your computer and use it in GitHub Desktop.
psudeocode for interdigitation solution
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
| //Psuedocode (To be updated) | |
| var $window = window.innerWidth; | |
| $(window).resize(function{ | |
| $window = window.innerWidth; | |
| }); | |
| $('.region').each(function(){ | |
| var $breakpoint = data-breakpoint; | |
| if ($window > $breakpoint){ | |
| magically insert content! | |
| } | |
| }); |
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
| <!DOCTYPE html> | |
| <!-- | |
| Interdigitation allows for content to be inserted into different locations based on a responsive page design | |
| See slide #50 here: | |
| http://www.slideshare.net/Saraboettcher/content-everywhere-rethinking-content-for-a-more-flexible-futureready-web | |
| This is basically a hack until CSS3 Regions become widely adopted, or another solution becomes a better option | |
| Partially inspired by Jeremy Keith's Conditional Loading for Responsive Designs: | |
| http://24ways.org/2011/conditional-loading-for-responsive-designs | |
| --> | |
| <html lang=""> | |
| <head> | |
| </head> | |
| <body> | |
| <div> | |
| <!-- Put chunks of static content here --> | |
| </div> | |
| <!-- When you come across content that needs to be interdigitated --> | |
| <script class="region" type="text/region" data-content="content-xyz" data-breakpoint="0"> | |
| Define content here | |
| </script> | |
| <!-- Place noscript tag where the best default location for the content would be (mobile- or desktop-first: designer's choice!) --> | |
| <noscript>Your browser does not support JavaScript!</noscript> | |
| <div> | |
| <!-- Put chunks of static content here --> | |
| </div> | |
| <!-- Define second location for content-xyz and a new breakpoint --> | |
| <script class="region" type="text/region" data-content="content-xyz" data-breakpoint="480"> | |
| Define content here | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment