CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3243251
user3243251

Reputation: 47

Find Resolution of the Monitors when using dual monitor in (IE & Chrome)

In my Web application I need to adjust a grid width based on monitor resolution (1024×1024 and 2048×1280).

Here the user uses multiple monitors simultaneously. Whenever user drags from one monitor to another I need to change the grid width to the monitor width.

Code I am using is:

$(document).ready(function () {         
    var Width = screen.availWidth;
    window.onresize = SetScreenSize;
});

function SetScreenSize() {        
    $("#tblContent").css("width", Width + "px");
}

Here the problem is when I drag browser window from primary monitor to secondary monitor, the secondary monitor showing same screen.availWidth (Resolution) of primary monitor.

Upvotes: 3

Views: 720

Answers (1)

Louise Miller
Louise Miller

Reputation: 3199

In your code above, you're only setting the Width variable when the page is loaded - so therefore the width is only set on the first monitor the page is finished loading on. Instead you should query it each time the window is resized. Like this

$(document).ready(function () {

   window.onresize = SetScreenSize;

});
function SetScreenSize() {

    $("#tblContent").css("width", screen.availWidth + "px");

}

It should work

Upvotes: 1

Related Questions