ResizR - jQuery Auto-Width

Dec 7, 2011 jQuery

Background: The Need For Resizr

I have been working on some projects latley which consist of an aside and a section. Those who have been missing out on HTML5, think of it as a workspace with a toolbar. The left pane has a static width while the right pane needed to be 100% of the remaining space. Essentially, there was no easy way to accomplish this unless I decided to use a table. In DIV world, it’s not so easy. Below I posted the function incase you have a need for Resizr too!

The Function: Resizr

    <script>
    $(document).ready(function(e){
        /***Start Resizr***/
            $.fn.resizr = function(){
            var offset = arguments[0] || {}; // It's your object of arguments

            $('.resizr').width($(window).width()-offset);
            $('section').height($(window).height());

            $(window).resize(function(e) {
                $('.resizr').width($(window).width()-offset).height($(window).height());
                $('section').height($(window).height());
            });
        };
        /***End Resizr***/
    });
    </script>

Usage is simple, call the following within document.ready and assign your right pane to class resizr:

 $.resizr(256); // Where 256 is the offset of the left pane

comments powered by Disqus