Live Detect Browser Size - jQuery / JavaScript - 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.

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.

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>

This should return the visible area:
document.body.offsetWidth
document.body.offsetHeight
I guess this is always equal to the browser size?

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

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

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

Related

Get device height in cordova

I am trying to find device's height in Cordova?
pChart.chartHeight = 100;
What can I write instead of 100? 100 should be the device's height.
From window.screen you can obtain its width and height properties, but you should also add the pixel densities since it may change on orientation or among different devices. Try this:
var physicalScreenHeight = window.screen.height * window.devicePixelRatio;
productionChart.chartHeight = physicalScreenHeight;
And have a look here in case you have more doubts.
use .resize()
$( window ).resize(function() {
alert($(window).height() + $(window).width);
});
Try this.
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
alert(w +" - "+h);

Is there a way to get the real viewport size in hardware-pixels without viewport meta tag?

I want to get the viewport width with javascript. But not the common virtual viewport. I need the logical hardware viewport and in my case it's not an option to set the viewport meta tag.
To clearify my issue: I want to get 320 pixels on IPhone 5 (640 hardware pixels with pixel ratio 2) though the virtual viewport is much more than 320 pixels.
Is there a way to do that?
thanks,
Helmut
I've found my Answer in this article: http://menacingcloud.com/?c=viewportScale
.. and breaked it down to the real essential things ..
.. so, this is my result:
// cross browser way to get the common viewport width:
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
// cross browser way to get the orientation:
var isLandscape = document.documentElement.clientWidth > document.documentElement.clientHeight;
// then get the logical screen width if the screen is smaller than the viewport
// otherwise get the viewport width
var screenWidth = screen.width < viewportWidth ?
Math[isLandscape ? 'max' : 'min'](screen.width, screen.height) :
viewportWidth;
// screen width
console.log(screenWidth);
Here is a ready to use function for all of you
function getLogicalDeviceDimensions() {
// cross browser way to get the common viewport width:
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
// cross browser way to get the orientation:
var isLandscape = document.documentElement.clientWidth > document.documentElement.clientHeight;
// then get the logical screen size if the screen is smaller than the viewport
// otherwise get the viewport size
var screenWidth = screen.width < viewportWidth ?
Math[isLandscape ? 'max' : 'min'](screen.width, screen.height) :
viewportWidth;
var screenHeight = screen.height < viewportHeight ?
Math[isLandscape ? 'min' : 'max'](screen.width, screen.height) :
viewportHeight;
return [screenWidth, screenHeight];
}

How to detect browser height, subtract a certain number of pixels, then output the number?

Is this possible? Use of jQuery is also available.
You've said "browser height" both in the question and, when asked to clarify, in the comments on the question.
The answer is: No, it isn't possible to find out the height of the browser window. But then, 99.99999% of the time, you don't care.
You can find out:
The height of the displayed area of the page (the viewport) via $(window).height(); more
The height of the document as a whole (which can be shorter or taller than the viewport) via $(document).height() (same link)
And usually even the height of the user's screen (via window.screen.height)
None of these gives you the height of the browser window, though.
The following code sets the variables winW and winH to the inner width and height of the browser window, and outputs the width and height values. If the user has a very old browser, then winW and winH are set to 630 and 460, respectively.
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
document.writeln('Window width = '+winW);
document.writeln('Window height = '+winH);
taken from here
You can ofcourse substract/add/multiply/whatever you want before printing the values.
You either need:
$(window).height();//viewport
OR
$(document).height();//complete document
OR
window.screen.height;//screen resolution height
It returns an integer value, so you can do calculations on it
alert( $(window).height() - 100 );
height() is what you are looking for..
http://api.jquery.com/height/
var heght= $(window).height(); //this gives you the height of the window
alert(heght - 50);
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
You may also use:
document.body.clientHeight
You should look for height function of Jquery like this
$(window).height() or $(document).height()
and for subtracting pixels just use $(window).height()-5
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
) - mynumber ;
}
If the actual document’s body height is less than the viewport height then it will return the viewport height instead.
And jQuery Method:
$.getDocHeight = function(){
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
alert( $.getDocHeight() - mynumber);

jQuery - How to know if window is resizing in width/height or both?

I have a little problem with window resizing using jQuery's function .resize(). I would like to know which dimension is getting bigger/smaller - width or height. I need this because if I just put two conditions - if width is for 50px bigger than div and if height is for 50px bigger than div,
// (pseudocode)
if width = div.width + 50px
width = something
if height = div.height + 50px
height = something
then is working on just one condition and I can resize only width or height.
How could I know which dimension is changing in size or if both are?
By saving last window size values in variables.
var h = $(window).height(), w = $(window).width();
$(window).resize(function(){
var nh = $(window).height(), nw = $(window).width();
// compare the corresponding variables.
h = nh; w = nw; // update h and w;
});
Save the previous size and compare with it, everytime the size changes.
For ex:
var prevW = -1, prevH = -1;
$(document).ready(function() {
// ... other stuff you might have inside .ready()
prevW = $(window).width();
prevH = $(window).height();
});
$(window).resize(function() {
var widthChanged = false, heightChanged = false;
if($(window).width() != prevW) {
widthChanged = true;
}
if($(window).height() != prevH) {
heightChanged = true;
}
// your stuff
prevW = $(window).width();
prevH = $(window).height();
});
Demo: http://jsfiddle.net/44aNW/

"full-window" slideshow image stretching bug

If you go to the slideshow I am working on here, you can see that the image resizes and moves correctly if you resize the browser window.
...unless you make the browser window's width smaller than a certain amount (i can't tell what defines that amount) and then it stretches the image instead of scaling it. How can I fix this?
Here is my resize code:
winWidth = $(window).width();
winHeight = $(window).height();
ratio = winWidth/winHeight;
if(ratio > imgRatio){
$('#curImg img').css({width:winWidth});
imgWidth = winWidth;
imgHeight = $('#curImg img').height();
$("#curImg img").css({top: (-1*Math.round((imgHeight-winHeight)/2)) + "px"});
$("#curImg").css({height: winHeight + "px"});
}else{
$('#curImg img').css({height:winHeight});
imgHeight = winHeight;
imgWidth = $('#curImg img').width();
$("#curImg img").css({left: (-1*Math.round((imgWidth-winWidth)/2)) + "px"});
$("#curImg").css({width: winWidth + "px"});
}
You could also check out this jQuery plugin:
http://srobbin.com/jquery-plugins/backstretch/
Or CSS tricks which looks at multiple solutions:
http://css-tricks.com/perfect-full-page-background-image/
You should take a look to tha background-size properties, especially at the cover values
Something I wrote that works:
//oWidth - container width
//oHeight - container height
//iWidth = image width
//iHeight = image height
iRatio = iWidth/iHeight;
wRatio = oWidth/oHeight;
if(iRatio<wRatio){
imageWidth = oWidth;
imageHeight = Math.ceil(iHeight*(oWidth/iWidth));
}
else{
imageHeight = oHeight;
imageWidth = Math.ceil(iWidth*(oHeight/iHeight));
}
$('#backgroundResizeImage').css({
'height': imageHeight,
'width': imageWidth
});
Hope this helps!
I rewrote your example a bit to make a self-contained demonstration.
Two notes unrelated to your question.
Make sure to cache any of your jQuery objects. You don't want to fetch items repeatedly, as that comes with an unnecessary performance cost.
My example shows this happening in the resize event for the window - I'm not sure how you had yours set up. For production, it's very important to throttle events bound to things like the window resize event, since they can be fired as fast as a browser can manage, which can lead to bad consequences. See this excellent article by John Resig on a time this bit Twitter in the ass.
The biggest relevant change is that I altered the way it's setting the heights and widths of images depending on how their ratio compares to the window. I think this way is a little clearer, but that's subjective. But it does work!
http://jsfiddle.net/L4k3s/2/
var $window = $(window),
$img = $('img'),
imgRatio = $img.width() / $img.height();
$window.on('resize', function (event) {
var imgWidth = $img.width(),
imgHeight = $img.height(),
winWidth = $window.width(),
winHeight = $window.height(),
ratio = winWidth / winHeight;
// The image is wider than the window
if (ratio < imgRatio) {
$img.width(winWidth);
$img.height(winWidth / imgRatio);
$img.css({
left: 0,
top: (-1 * Math.round((imgHeight - winHeight) / 2)) + "px"
});
// The image is taller than the window
} else {
$img.width(winHeight * imgRatio);
$img.height(winHeight);
$img.css({
left: (-1 * Math.round((imgWidth - winWidth) / 2)) + "px",
top: 0
});
}
});
​

Categories

Resources