CODEWITHSUNDEEP
jqueryjquery-ui
Mark Redman
Mark Redman

Reputation: 24515

jQuery: Is there a way to maximize a Jquery UI Dialog to the browser size?

Is there a way to maximize a Jquery UI Dialog to the browser size (max width / height)?

Update:

I am using the answer from this question to get the height and width of the browser, and setting the height and the width properties of the Dialog.

Upvotes: 1

Views: 3604

Answers (2)

UberGeoff
UberGeoff

Reputation: 212

var isFullScreen = false;

function toggleFullScreen() {

    var windowW = $(window).width();
    var windowH = $(window).height();

    if (!isFullScreen) {

        //view full screen mode
        var wFull = windowW - 100;
        var hFull = windowH - 100;

        var xLeft = parseInt((windowW / 2) - (wFull / 2));
        var yTop = parseInt((windowH / 2) - (hFull / 2));     

        if (dialog != null) {
            dialog.dialog('option' , 'width', wFull);
            dialog.dialog('option' , 'height', hFull);    
            dialog.dialog('option', 'position', [xLeft,yTop]);
        }

        isFullScreen = true;

    } else {

        //view normal/original size mode
        //use the "dafault" height and width
        var xLeft = parseInt((windowW / 2) - (300 / 2));
        var yTop = parseInt((windowH / 2) - (200 / 2));

        if (dialog != null) {
            dialog.dialog('option' , 'width', 300);
            dialog.dialog('option' , 'height', 200);    
            dialog.dialog('option', 'position', [xLeft,yTop]);
        }

        isFullScreen = false;
    }
}

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382706

Looking at the manual, there are height, width, maxHeight, maxWidth properties you will need to use. To resize it to whatever browser window size is, you will have to use the resize event which van be seen by clicking on the events tab on the manual.

Upvotes: 1

Related Questions