pepebe
8/6/2013 - 6:35 AM

HTML/JQUERY: Set window width specific class to body tag. Useful for adding media query support to older browsers or for adding width specif

HTML/JQUERY: Set window width specific class to body tag. Useful for adding media query support to older browsers or for adding width specific css without relying on media queries.

index.html
content_copyfile_download
<html>
    <head>
        
        <style>
            // hide body from view
            body {opacity: 0}
        </style>
        
    </head>
    <body
        class=""
        data-small="480"
        data-medium="600"
        data-large="960"
    >
        <h1>Hello World</h1>
        
        
        <div class="debug"></div>
        
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
            
            (function($,sr){
            
              // debouncing function from John Hann
              // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
              var debounce = function (func, threshold, execAsap) {
                  var timeout;
            
                  return function debounced () {
                      var obj = this, args = arguments;
                      function delayed () {
                          if (!execAsap)
                              func.apply(obj, args);
                          timeout = null;
                      };
            
                      if (timeout)
                          clearTimeout(timeout);
                      else if (execAsap)
                          func.apply(obj, args);
            
                      timeout = setTimeout(delayed, threshold || 100);
                  };
              }
              // smartresize 
              jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
            
            })(jQuery,'smartresize');
                     
            function debug(target,msg) {
                //code
                if (target == 'console') {
                    // write to browser console
                    console.log(msg);
                    return;
                }
                else if (target == 'body') {
                    // copy msg to debug
                    $('div.debug').html(msg);
                    return;
                }
                else if (target == 'alert') {
                    // show msg in popup
                    alert(msg);
                    return;
                }
                else {
                    return;
                }
            }
            
            function iniPage() {
                //execute on load and AFTER a resize.
                $('body').css({opacity: 0});

                var window_width = $(window).width();
                
                var small   = $('body').attr('data-small');
                var medium  = $('body').attr('data-medium');
                var large   = $('body').attr('data-large');
                
                if (window_width <= small) {
                    //small device
                    var body_class = 'small';
                }
                else if (window_width > small && window_width <= large) {
                    //medium device
                    var body_class = 'medium';
                }
                else if (window_width > large) {
                    //large device
                    var body_class = 'large';
                }
                
                $('body').removeClass('small medium large').addClass(body_class);
                
                // Show body
                $('body').animate({opacity: 1}, 3000);                

                var msg = 'function iniPage() executed. Body class is ' + body_class ;
                debug('console',msg);
            }
            
            
            $(document).ready(function() {
                // Execute when the DOM is fully loaded.
                iniPage();
            });
            
            $(window).smartresize(function(){
                // Execute after a window resize.
                iniPage();
            });
            
        </script>
        
    </body>
</html>