Dynamically Resize HTML elements

One day I got real tired of havig to statically assign height and width to my MVC web pages, so I used this little tidbit to help dynamically resize a web app depending on the size of the window after document ready and after a resize event has fired.

function ResizeElements()
{
    var bodyDiv = document.getElementById('body');
    var contentWrapper = $('#body > .content-wrapper');
    var featuredHeight = $('#body > .featured').outerHeight(true);
    var kendoGrid = $('.KendoGrid');

    // set the height of the overall body container
    bodyDiv.style.height = (window.outerHeight - 125).toString() + 'px';

    // set the width of the content wrapper.  the wrapper inherits it's
// height from the body container
    contentWrapper.width(window.outerWidth - 200).toString() + 'px';

    // if there is a KendoGrid class element present, set it's height so
    // the bottom is about 10 pixels from the footer
    if (kendoGrid.length > 0)
    {
        kendoGrid.height(window.outerHeight - featuredHeight - 275);

// this helps re-render the kendo grid
        kendoGrid.data('kendoGrid').resize();
    }
}

$(document).ready(function ()
{
    ResizeElements();
});

$(window).resize(function()
{
    ResizeElements();
});

Advertisements
Dynamically Resize HTML elements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s