CODEWITHSUNDEEP
javascriptjquerybrowser
user1658756
user1658756

Reputation: 1024

Live Detect Browser Size - jQuery / JavaScript

Is there a jQuery plugin or a way using straight JavaScript to detect browser size.

I'd prefer it is the results were 'live', so if the width or height changes, so would the results.

Upvotes: 20

Views: 63537

Answers (6)

Ritesh Chandora
Ritesh Chandora

Reputation: 8640

use width and height variable anywhere you want... when ever browser size change it will change variable value too..

$(window).resize(function() {
    width = $(this).width());
    height = $(this).height());
});

Upvotes: 2

Milind Thakkar
Milind Thakkar

Reputation: 980

You can try adding even listener on re-size like

window.addEventListener('resize',CheckBrowserSize,false);
function CheckBrowserSize() 
{
    var ResX= document.body.offsetHeight;
    var ResY= document.body.offsetWidth;
}

Upvotes: 0

Matt Coughlin
Matt Coughlin

Reputation: 18906

JavaScript

function jsUpdateSize(){
    // Get the dimensions of the viewport
    var width = window.innerWidth ||
                document.documentElement.clientWidth ||
                document.body.clientWidth;
    var height = window.innerHeight ||
                 document.documentElement.clientHeight ||
                 document.body.clientHeight;

    document.getElementById('jsWidth').innerHTML = width;  // Display the width
    document.getElementById('jsHeight').innerHTML = height;// Display the height
};
window.onload = jsUpdateSize;       // When the page first loads
window.onresize = jsUpdateSize;     // When the browser changes size

jQuery

function jqUpdateSize(){
    // Get the dimensions of the viewport
    var width = $(window).width();
    var height = $(window).height();

    $('#jqWidth').html(width);      // Display the width
    $('#jqHeight').html(height);    // Display the height
};
$(document).ready(jqUpdateSize);    // When the page first loads
$(window).resize(jqUpdateSize);     // When the browser changes size

jsfiddle demo

Edit: Updated the JavaScript code to support IE8 and earlier.

Upvotes: 60

Anoop
Anoop

Reputation: 23208

you can use

function onresize (){
   var h = $(window).height(), w= $(window).width();
   $('#resultboxid').html('height= ' + h + ' width: ' w);
}
 $(window).resize(onresize ); 

 onresize ();// first time;

html:

<span id=resultboxid></span>

Upvotes: 6

Anton
Anton

Reputation: 32581

Do you mean something like this window.innerHeight; window.innerWidth $(window).height(); $(window).width()

Upvotes: 0

Marcus Johansson
Marcus Johansson

Reputation: 2667

This should return the visible area:

document.body.offsetWidth
document.body.offsetHeight

I guess this is always equal to the browser size?

Upvotes: 3

Related Questions