I'm unable to get the height of a page in javascript when the page is larger than the screen.
I thought this would get me the right height:
$(document).height();
but that only gets the height of the screen, same as:
$('body').height();
same as:
document.offsetHeight;
For some reason all these examples only return the height of the screen. Can somebody help?
Using jQuery (which you did specify), $(document).height() will return exactly what you're asking for.
To clarify the usage of the height() method:
$('.someElement').height(); // returns the calculated pixel height of the element(s)
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
I suspect, that if $(document).height() is not working for you, something is wrong. You may be:
Calling it too early. Like, before the DOM is ready
Have some uncleared floats that are not causing some block level elements to expand to their real height. Thus messing up height calculations.
Have something critical absolutely positioned. Absolutely positioned elements do not contribute towards height calculations of their parent elements.
If you're cool with using jQuery, what about getting the body or html height? like:
var winHeight = $('body').height();
I was looking for this and landed up here. Without Jquery, you can get this with plain JS also. Below works:
console.log(document.body.clientHeight,document.body.scrollHeight,document.body.offsetHeight)
Do note the below link to clarify which to use:
Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
I think you need to add window.pageYOffset (the amount the page has been scrolled, in pixels).
http://www.quirksmode.org/dom/w3c_cssom.html
Not sure about JQuery. But this link, might help you to understand various properties and how they behave in different modes in different browsers.
http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html
Related
Im trying to get pagesection to fill the browserheight. I´ve tried to apply a 100 height to all elements, but it´s not working. It works good if I set a heigh: 100vh, but It´s not the way I want to take, so I wonder what Im doing wrong?
Site: Svenssonsbild.se/Konsthandel Second and third menu are anchorlinks to the spagesections.
Setting height:100% means 100% of the height of the parent element so you need to specify the height of the parent for it to work.
If you want to set your element to 100% of the height of the browser, you need to make sure all the parent elements up to the <body> tag have a percent height.
Setting the element's CSS height to 100vh is the intended way to do exactly what you're trying to do. 100vh specifies that the element should always be the full height of the viewport, so unless you've got some other requirement that you haven't described, that's what you should be doing -- you'll need to explain why "that's not the way I want to take" if there's more to your question.
Depending on your content it might be a good idea to set the min-height property instead of the height property since the content might need more space than the available viewport size offers. Or you can just evaluate the section's height and compare it to the viewport height. Using jQuery the following might work:
$('section').each(function(){
var height = ($(this).height() > $(window).height()) ? $(this).height() : $(window).height();
$(this).css('height', height + 'px');
});
You might need to adjust the selector to fit your needs.
Please look at this code
http://jsfiddle.net/rkumarnirmal/VG47Z/3/
There is nothing wrong there. So now check this one
http://jsfiddle.net/rkumarnirmal/4GrsD/6/
You can find that the $(document).height() value is differing in the second jsfiddle and the red box is placing down beyond the area. Why is it so?
I want to place the red box at the bottom most inside the document area and I don't want to use this
bottom: 0px;
Could anyone guide me?
Thanks!
at a q glance, it looks like the problem is because you are mixing
.css("height");
with 'computed height
.height();
use .css("height") to get the doc height as well as setting the final position.
update as comment: apologies ( less haste )
$("body").css("height");
returns the height value only if one is set in css or a recent programs set it.
try
$("body").height()
instead of $(document).height();
document is larger than body
Your question : How can I use .css("height") for getting doc height?
$(document).height();
if you got an object with margins you can use
$(object).outerHeight();
It will take all his height
I tried to get the window viewport width. when i use document.documentElement.clientHeight(or)window.innerWidth i can get exactly what i need. If i logged In at minimize mode,then if i maximize the window the viewport width will not be resized.I got the viewport width when it is minimized. how can i slove it?
I also tried to use document.body.clientHeight.But here also i got problem.The viewport size is larger than my viewport,because of statusbar.Then i subtract the statusbar size,then i got the viewport size.If i have anotherbar in my window again i got the same problem.
Exactly what i need is how can get the end user viewport size?Please help me?
Thanks in advance
from the jQuery docs:
http://api.jquery.com/height/
http://api.jquery.com/width/
$(window).width(); // returns width of browser viewport
$(window).height(); // returns height of browser viewport
Try:
$myviewport.getHeight();
$myviewport.getWidth();
Where myviewport is the viewport OBJECT. You can also use:
Ext.getCmp('myviewport').getHeight();
Ext.getCmp('myviewport').getWidth();
Where 'myviewport' is the ID of the viewport object.
Use
.getHeight(true);
.getWidth(true);
To get the height/width minus padding, margins, borders etc.
As a consequence of the proliferation of different browsers' ideas about this, it's a surprisingly tricky thing to get right. David Mark (author of My Library) is particularly strong in this area and has written an article on the subject: http://www.cinsoft.net/viewport.asp
I wonder if there is any way to get div height in pixels, although its height set earlier to 100% height.
This is required as div content is dynamic so div height has different values based on content itself.
[Edit]
Div by default is hidden.
I need to get div height in pixels for later manipulation (smooth scrolling will be done for div)?
Is there any way to do this?
Since you tagged jQuery, use
$("#myElement").height();
http://api.jquery.com/height/
For Plain Ol' Javascript, you can use element.clientHeight or element.offsetHeight, depending on which one suits your needs.
Since the div is hidden, you will have to .show() it before calling .height(), and you can hide it again straight away:
var $myEl = $('#myElement').show();
var height = $myEl.height();
$myEl.hide();
theDiv.clientHeight
You can use height()
$("#divInQuestion").height();
You could use the .height() function:
$('#divid').height()
Well on slow browsers the show/hide method MIGHT cause the box to flicker (though the computer have to be really slow). So if you want to avoid this, give the div a opacity: 0 - and perhaps even a position: absolute, so it doesnt push the content. So to extend the code from before:
var $myEl = $('#myElement').css({"opacity": "0", "position": "absolute"}).show();
var height = $myEl.height();
$myEl.hide().css({"opacity": "", "position": ""});
But again. This might be overkill.
I need to be able to store the current height and width of a div at any point in time.
Currently I am using div.style.height/width which works fine when the styling is applied inline.
The problem is that this returns for example 600px and not 600.
Is there a better way to do this? If not, whats the best way to get just the number 600?
My updated code looks like this:
var div = document.getElementById('container');
div.scrollLeft = contentdim.cx*scalar - parseInt(div.style.width)/2;
div.scrollTop = contentdim.cy*scalar - parseInt(div.style.height)/2;
Which works fine in FF. For some reason scrollTop is messing up in Chrome though..
Note: This is a function which is called onscroll for the div.
try div.offsetHeight || div.clientHeight
parseInt(div.style.height) is more generic than div.style.height.replace("px","")
However div.style.offsetHeight might be better because it does not rely on style being explicitly set (but you have to render the div before you can read the value)
div.style.height.replace("px","")
With jQuery, a bit more elegant, you can do it as well: http://api.jquery.com/height/
$("div").height()
//returns just the integer
To summarize the above:
document.getElementById('yourElement').style.height
CSS height if it has been set in a stylesheet. Will not include padding, margin, etc. If it is not set, you may wind up with values like auto.
document.getElementById('yourElement').offsetHeight
Height of the HTMLElement as rendered in the browser, including padding, scrollbars etc. (The total offset this Element's height consumes). Note that this often can be equivalent to clientHeight but that is not guaranteed.
Here is how offsetHeight is defined on Mozilla Developer Center. Note that there are a few differences with clientHeight, namely clientHeight does not include rendered scrollbars; offsetHeight will generally give you the maximum value.
Use jQuery:
height()
width()