Develop Reference

Get constant browser height and width

I was wondering how I could constantly get the current browser's height and width. Right now, I am using jQuery and have something like this:
var height = window.innerHeight;
var width = window.innerWidth;
This does initially work as it gets the screen when the page is loaded up. However, when the user changes the screen width/height manually, I can't seem to get the current dimensions and the page starts faulting with errors. How should I be checking the dimensions at all times? I've tried googling the answer but I can't seem to find anything applicable, though I'm sure many others have had the same issue (I don't think I'm searching up the right keywords!). Please let me know what I can do!! Thanks!

Use a window.onresize function as well as a window.onload handler to update the width and height variables.
(Resizeable Demo)
var width,height;
window.onresize = window.onload = function() {
width = this.innerWidth;
height = this.innerHeight;
document.body.innerHTML = width + 'x' + height; // For demo purposes
}
Using jQuery objects it would look like this.
(Resizeable Demo)
var width,height;
$(window).on('load resize', function() {
width = this.innerWidth; // `this` points to the DOM object, not the jQuery object
height = this.innerHeight;
document.body.innerHTML = width + 'x' + height; // For demo purposes
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Try this:
$(window).on("resize",function(){
console.log($(this).height() + " " + $(this).width());
});
fiddle

Try this
var width = window.outerWidth;
var height = window.outerHeight;
To resize the current window, use
window.resizeTo(width, height);
You can trigger the resize function using:
$( window ).resize(function() {
//....
});
Hope it helps you

You can use this to detect a change in screen size:
$(window).resize(function() {
height = window.innerHeight;
width = window.innerWidth;
//other code you wish to run on screen size change;
});
This assumes that height and width were declared in a scope that the function has access to. Otherwise make sure to place var before each variable.

how to get html content width not window's width

I want to retrieve the html content width. Suppose when we resize the window to smaller size then scrollbar comes, so I want to get the width of the entire html content content that is visible and also the content the that is not visible due to the vertical scrollbar.

You can use window.outerWidth and window.innerWidth.

You may try this:-
var width = document.getElementById('foo').offsetWidth;
Try this code:
window.moveTo(0,0);
window.resizeTo(screen.width,screen.height);
var navButtonsEtcHeight = screen.height - window.innerHeight;
var navButtonsEtcWidth = screen.width - window.innerWidth;

Here's a Fiddle
<div></div>
$(function() {
var dWth = $(document).innerWidth(),
dHgt = $(document).innerHeight();
$('div').append('<h2>'+dWth+'px X '+dHgt+'px</h2>');
$(window).resize(function() {
var dWth = $(document).innerWidth(),
dHgt = $(document).innerHeight();
$('div').html('<h2>'+dWth+'px X '+dHgt+'px</h2>');
});
});
$(window).width(); // Returns width of browser viewport
$(document).width(); // Returns width of HTML document

You want the Element.clientWidth property. It gives the content width of the element.
Here's the documentation: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

Height of div when totally expanded

I got a div which has a height limit. Now I would like to know how high the div would be if there was no height limit set.
How can I get that?
Daniel

If your are using Jquery then for example your div id is test then you can get the height $('#test').height();.

Try code
$(document).ready(function(){
alert($("div").height());
});
demo: http://jsfiddle.net/zCVMz/

The trick is to:
get the element .height()
set the CSS height to auto
store that height into a variable
reset to old height
$(function(){
var $test = $('#test'); // cache element
var orgH = $test.height(); // get LIMITED height
$test.css({height:"auto"}); // go to non-limited height
var couldBeH = $test.height(); // store that one
$test.css({height: orgH}); // reset org height
alert("Could be "+ couldBeH);
});

Using javascript:
var $div = $('div');
var height = $div.height();
$div.css('height','auto');
var newHeight = $div.height();
$div.css('height',height);
alert('original height:' + height) ;
alert('new height:' + newHeight) ;
SEE FIDDLE

var mydivheight = document.getElementById('myDiv').clientHeight;
var mydivheight = document.getElementById('myDiv').offsetHeight;
var mydivheight = document.getElementById('myDiv').scrollHeight;
clientHeight- Includes the height and vertical padding.
offsetHeight- Includes the height, vertical padding, and vertical borders.
scrollHeight- Includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.

jQuery width() and height() return 0 for img element

So I am creating a new image element once I get response from AJAX call with image metadata like this:
var loadedImageContainter = $('<div class="loaded-image-container"></div>');
var image = $('<img src="' + file.url + '" alt="">');
loadedImageContainter.append(image);
$('.loading-image').replaceWith(loadedImageContainter);
var width = image.width();
var height = image.height();
console.log(width);
console.log(height);
But width() and height() functions are returning 0 although image has 30 x 30 px size and it appears correctly on the page. I need to get its dimensions in order to absolutely position the image.

You need to wait until the image has loaded to have access to the width and height data.
var $img = $('<img>');
$img.on('load', function(){
console.log($(this).width());
});
$img.attr('src', file.url);
Or with plain JS:
var img = document.createElement('img');
img.onload = function(){
console.log(this.width);
}
img.src = file.url;
Also, you don't need to insert the image into the DOM before you read the width and height values, so you could leave your .loading-image replacement until after you calculate all of the correct positions.

That is because your image isn't loaded when you check width
Try using load event this way
$('img').on('load',function(){
// check width
});

You can also use the alternate API $.load method:
$('<img src="' + file.url + '" alt="">').load( function(){ <your function implementation> });

As #ahren said earlier the reason is that image not loaded when you tring to get it's sizes.
If you want to fix this without jQuery you can use vanilla JS addEventListener method:
document.getElementsByTagName('img')[0].addEventListener('load', function() {
// ...
var width = image.width();
var height = image.height();
console.log(width);
console.log(height);
// ...
});

For me it only works with "appendTo"
$('<img src="myImage.jpeg">').load(function(){
$w = $(this).width();
$h = $(this).height();
$(this).remove()
}).appendTo("body")

Try this:
$('.loading-image').replaceWith(loadedImageContainter);
$('.loading-image').load(function(){
var width = image.width();
var height = image.height();
console.log(width);
console.log(height);
});

If you put it inside the AJAX call, that will work too, this is for json method
$.post("URL",{someVar:someVar},function(data){
var totalImgs = $('body').find('img').length;
var image = $('<img src="' + data.file[0].url + '" alt="" id="IMG_'+ totalImgs +'">');
loadedImageContainter.append(image);
$('.loading-image').replaceWith(loadedImageContainter);
var width = $('#IMG_'+totalImgs).width();
var height = $('#IMG_'+totalImgs).height();
},'json');

jQuery calculate img's real height / width values which coming from server

I am in a situation that; need to calculate image's original width and heigth values when one of them defined 0 on css. I can't change CSS with jQuery, need to solve like this:
Here is example link.
CSS:
img { width:0px; }​
jQuery:
var imgHeight = $('img').height();
alert(imgHeight);//which returning 0 ofcourse
I hope this is possible with less code, thanks,

Try this:
var img = $("img")[0];
alert( img.naturalWidth + "x" + img.naturalHeight );
http://jsfiddle.net/mjaA3/50/

You could clone the element to a new hidden DOM node (I assume you want to hide it here). Then remove the CSS, then measure the dimensions.

var img = $('img'),
imgHeight = img.css("width","auto").height();
img.css("width","0");
alert(imgHeight);
Here is a fiddle. All we do is temporarily set the height to it's automatic value (which is the image's 100% width), grab the height, and reset the image to width:0;.
EDIT: Since you can't manipulate CSS directly, you can change the class:
var img = $('img'),
imgHeight = img.addClass("auto").height();
img.removeClass("auto");
alert(imgHeight);​
And the CSS:
img {width:0;}
img.auto {width:auto;}​