Posted By

FatFolderDesigner on 11/05/11


Tagged

resize mobile single site automatic comaptibility


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

burnandbass
CSB_Campaigner


Flexible Site Layout With Resize Detection, now improved!


 / Published in: jQuery
 

URL: http://fatfolderdesign.com/488/css/better-flexible-site-layout-with-resize-detection

I've previously posted this here: http://snipplr.com/view/59044/flexible-site-layout-with-resize-detection/

This new version is short and more efficient, plus it no longer shows 1 (harmless) error on launch. Works the same as last time, the sizable object has the size to add the class too all the sizable elements, so for this example if the screen is less that 450px it'll add the class "phone" to the body (and the other elements), and if it's larger than 750px, but not 1000px, it'll give it the tablet layout. More information about the script is at the link, questions/comments/concerns can be sent to be from here or the comments section at the link.

  1. var sizeable = 'body,#master,#content,#posts,#sidebar,#footer,#comments';
  2. var sizes = {'450':'phone','750':'tablet','1000':'desktop'};
  3. $(document).ready(function(){
  4. $(window).resize();
  5. });
  6. $(window).resize(function(classes){
  7. $.each(sizes,function(k,v){
  8. var w = parseInt($(window).width());
  9. if(w>=k){
  10. $(sizeable).removeClass().addClass(v);
  11. }
  12. });
  13. });

Report this snippet  

You need to login to post a comment.