Flexible Site Layout with Resize Detection

/ Published in: JavaScript
Save to your folder(s)

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 tiny_screen, small_screen, medium_screen, and large_screen 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.

Copy this code and paste it in your HTML
  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. });

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

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.