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
Related
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.
I am trying to adjust my div height based on browser window height. but i am getting same height when page/body being load and after resize the browser window.
function setDivHeight() {
var bodyheight = $(document).height();
document.getElementById('divName').style.height = (bodyheight - 180) + "px";
}
function pageLoad() {
setDivHeight();
}
window.onresize = setDivHeight();
// Returns height of browser viewport
// Use this
$( window ).height();
// Returns height of HTML document
$( document ).height();
Example from: http://api.jquery.com/height/
for height you can use
$( window ).height();
you want body height
$("body").height();
When you use jQuery, use it to the fullest. Mixing it with plain JS would only increase the number of lines of code. Your code may be re-written as the following.
function setDivHeight() {
//height of HTML document
var documentHeight = $(document).height();
//height of browser viewport
var viewportHeight = $(window).height();
$('#divName').height(documentHeight - 180); // OR viewportHeight - 180 as appropriate
}
// = onload and onresize
$(window).on("load resize", setDivHeight);
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.
I want to resize images that are bigger than the window, but I keep getting 0 width and height when I try to get the image size. I read somewhere that it could be because images aren't necessarily loaded at (document).ready so image functions should go under (window).load, but it's no use. I'm a real newbie when it comes to jquery and javascript so I could be doing something wrong.
This is how my javascript file looks:
//<!--
$(document).ready(function(){
...
});
$(window).load(function () {
$(".lightbox img").each(function() {
var width = $(this).width();
var max_width = $(window).width()-30;
var height = $(this).height();
var max_height = $(window).height()-30;
if(width > max_width || height > max_height) {
if(height > width) {
height = max_height;
width = Math.ceil(width / height * max_height);
} else {
width = max_width;
height = Math.ceil(height / width * max_width);
}
}
$(this).attr("width",width);
$(this).attr("height",height);
});
});
//-->
Thanks in advance.
Take a look at this project that provides a callback when images have loaded.
Another reason you could be getting no dimensions is an invisible element (parent or self).
Try $(this).css("width") instead of attr
When the window loads, the images haven't necessarily loaded yet. JavaScript can't get an image's dimensions until is has completely loaded, and until then, you get a computed value of zero.
Bearing this in mind, a repeating loop might help. (Warning: haven't tested)
var width = 0;
while (!width) {
width = $(this).width();
}
Watch out for infinite loops, though.
At my website, I try to accomplish (with javascript) that the footer height changes if the page height is larger then a specific value (907 pixels, the body height). It also needs to change if the page height changes (so if the viewer changes his client height).
I use jQuery to get the page height, but I need it's continuously checked, and not only when the page loads.
This is the snippet I use:
$(document).ready(function(){
var windowheight = $(window).height();
if(windowheight >= "907") {
var extrafooterheight = windowheight - 907;
$('#footer').height(40 + extrafooterheight);
$('body').height(907 + extrafooterheight);
}
});
Thanks for your help.
I suggest attaching to the resize event of the window using jQuery:
$(document).ready(function(){
$(window).resize(function() {
var windowheight = $(window).height();
if(windowheight >= "907") {
var extrafooterheight = windowheight - 907;
$('#footer').height(40 + extrafooterheight);
$('body').height(907 + extrafooterheight);
}
});
});
Take a look at the jQuery resize() docs.