Question

I need to create a container when a page loads that will be covering the entire screen. If the screen is re-sized the dimensions of the container need to be adjusted accordingly.

I am trying to use jQuery UI draggable and need to user a containment area to prevent dragging outside the visible boundaries of the screen.

$("#container").width(window.width());

Answer 1

You can bind event handlers to window resize: http://api.jquery.com/resize/

function resize() {
    $("#container").width($(window).width());
    $("#container").height($(window).height());
}

$(function() {
    //other init code...
    resize();
});

$(window).resize(resize);

Though bear in mind using jQuery to resize a part of the page is generally regarded as a bad practice in most cases. Why not CSS?

edit: window should’ve been $(window) in resize().