Posted By

FatFolderDesigner on 09/24/11


Tagged

javascript jquery layout


Versions (?)

Flexible Site Layout with Resize Detection


 / Published in: JavaScript
 

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

This bit of jquery will take whatever you give it in the selector (which should be a valid jquery selector of any kind) and add or remove additional classas as appropriate based on width.

The width and style names are all determined by the last if statement and can easily be changes. The defaults are for sizes 320px or less, 321px to 768px, 768px to 1024px, and greater than 1024px to be given the styles tinyscreen, smallscreen, mediumscreen, and largescreen respectively.

More information plus some additional tips at the link, if you have any questions/comments/criticisms post them below, as well as if you use this in a project or improve upon it and I’ll update with that information included as well.

  1. var sizeable = 'body,#content,#sidebar,#footer';
  2. $(document).ready(function(){
  3. $(window).resize();
  4. });
  5. $(window).resize(function(){
  6. var width = parseInt($(window).width());
  7. // The following line was added for the example
  8. $('#currentsize').html(width);
  9. if(width<=320){
  10. $(sizeable).removeClass("tiny_screen small_screen medium_screen large_screen").addClass('tiny_screen');
  11. }else if( (width>320) && (width<=768) ){
  12. $(sizeable).removeClass("tiny_screen small_screen medium_screen large_screen").addClass('small_screen');
  13. }else if( (width>768) && (width<=1024) ){
  14. $(sizeable).removeClass("tiny_screen small_screen medium_screen large_screen").addClass('medium_screen');
  15. }else{//>1024
  16. $(sizeable).removeClass("tiny_screen small_screen medium_screen large_screen").addClass('large_screen');
  17. }
  18. });

Report this snippet  

You need to login to post a comment.