Computer Magic Logo
Element size equal to viewport

Friday, January 22, 2016

Published by Aristotelis Pitaridis

The following script changes the size of a group of elements so that they will have the width and height that the browser's viewport has.

$(function() {
    // Set initial size
    SetWidthAndHeight();

    // Make sure elements updates dimensions on resize
    $(window).resize(function() {
        SetWidthAndHeight();
    });
});

function SetWidthAndHeight() {
    var WinWidth = $(window).width();
    var WinHeight = $(window).height();
    $('.MyElements').css({'width' : WinWidth, 'height' : WinHeight });
}