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

Question

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.

score 1 · Answer 1 · edited Jul 25 '13 at 12:33

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;
    }
}

I like your answer, but full-screen will not work when the screen size can change. This happens, for instance, when you change the orientation of a tablet. Would it be possible to then resize the dialog? — rakensi, Dec 14 '13 at 20:40

score 1 · Accepted Answer · answered Mar 01 '11 at 09:57

1

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.

answered Mar 01 '11 at 09:57

Sarfraz

377,238
77
533
578

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

2 Answers2