How to get document height and width in pure javascript i.e without using jquery.
I know about $(document).height() and $(document).width(), but I want to do this in javascript.
I meant page's height and width.
var height = document.body.clientHeight;
var width = document.body.clientWidth;
Check: this article for better explanation.
Even the last example given on http://www.howtocreate.co.uk/tutorials/javascript/browserwindow is not working on Quirks mode. Easier to find than I thought, this seems to be the solution(extracted from latest jquery code):
Math.max(
document.documentElement["clientWidth"],
document.body["scrollWidth"],
document.documentElement["scrollWidth"],
document.body["offsetWidth"],
document.documentElement["offsetWidth"]
);
just replace Width for "Height" to get Height.
This is a cross-browser solution:
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
You should use getBoundingClientRect as it usually works cross browser and gives you sub-pixel precision on the bounds rectangle.
elem.getBoundingClientRect()
Get document size without jQuery
document.documentElement.clientWidth
document.documentElement.clientHeight
And use this if you need Screen size
screen.width
screen.height
You can try also:
document.body.offsetHeight
document.body.offsetWidth
This should work for all browsers/devices:
function getActualWidth()
{
var actualWidth = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth ||
document.body.offsetWidth;
return actualWidth;
}
If you want to get the full width of the page, including overflow, use document.body.scrollWidth.
window is the whole browser's application window. document is the webpage shown that is actually loaded.
window.innerWidth and window.innerHeight will take scrollbars into account which may not be what you want.
document.documentElement is the full webpage without the top scrollbar. document.documentElement.clientWidth returns document width size without y scrollbar.
document.documentElement.clientHeight returns document height size without x scrollbar.
How to find out the document width and height very easily?
in HTML
<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>
in javascript
var c=document.querySelector('#hidden_placer');
var r=c.getBoundingClientRect();
r.right=document width
r.bottom=document height`
You may update this on every window resize event, if needed.
Related
Is there a way to get the width and height of the page viewport NOT the contents of a page without setting the body width and height to 100%?
The answers I've found require the html and body elements to be set to 100% width and 100% height.
I already have content on the page that sometimes extends beyond the viewport size. I can't switch the body to 100% and then check the values and then revert back.
In my opinion there should be a property that is simply:
document.body.viewportWidth;
document.body.viewportHeight;
That update on window resize and exclude the chrome.
There are related questions here:
HTML5 Canvas 100% Width Height of Viewport?
Update:
I've been using this:
var availableWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var availableHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
It might be that the viewport values are correct but the element itself is growing or shrinking.
I can't find the document.documentElement.clientWidth or document.documentElement.clientHeight in the documentElement docs though.
Update 2:
It looks like it might be an error on my part. I noticed in the logs that occasionally the element has no computed width or height possibly because it hasn't been added to the page yet.
var elementWidth = parseFloat(getComputedStyle(element, "style").width);
var elementHeight = parseFloat(getComputedStyle(element, "style").height);
I think the code I'm already using above is correct.
Update 3:
I found this page on getting the viewport size.
I may not understand your question correctly, but if you're looking for the height and width of the browser window, you could use window.innerHeight and window.innerWidth.
Here is some more information on the window height and width that could be useful.
Does window.innerWidth and window.innerHeight work for you?
Does this help?
document.documentElement.clientWidth
document.documentElement.clientHeight
Is there an easy way to check whether the user scaled the page (using pinch on mobile devices)?
Thought verge.js would help, but I don't know what I can compare viewportH with.
You can compare the screen.width to the window.innerWidth. If the value is anything other than 1, the viewport has been zoomed.
viewportScale = screen.width / window.innerWidth;
alert(viewportScale);
References:
https://developer.mozilla.org/en-US/docs/Web/API/Window.screen
https://developer.mozilla.org/en-US/docs/Web/API/window.innerWidth
(
document.documentElement.clientWidth
/ window.innerWidth
)
>
1
Only for mobile devices, though!
i used screen.width to get the width of the browser. it worked fine with iphone safari but didn't work in android phone(it showed 800 width for android browser).
Is there any compatible way to get the screen width. I dont want to use UserAgent to check if its mobile browser. would like to use a javascript for that and logic should include screen width.
It's know issue - see here
When page first loads the screen.width and screen.height are wrong.
Try a timeout like this:
setTimeout(CheckResolution, 300);
Where CheckResolution is your function.
You may try this url for detect screen size and apply a CSS style
or
<script type="text/javascript">
function getWidth()
{
xWidth = null;
if(window.screen != null)
xWidth = window.screen.availWidth;
if(window.innerWidth != null)
xWidth = window.innerWidth;
if(document.body != null)
xWidth = document.body.clientWidth;
return xWidth;
}
function getHeight() {
xHeight = null;
if(window.screen != null)
xHeight = window.screen.availHeight;
if(window.innerHeight != null)
xHeight = window.innerHeight;
if(document.body != null)
xHeight = document.body.clientHeight;
return xHeight;
}
</script>
screen.height shows the height of the screen
screen.width shows the width of the screen
screen.availHeight shows height but removes the interface height like taskbar, and browser menu etc.
screen.availWidth same as above,instead gives available width
For those interested in getting the width values of the browser, I tested several options:
I am using bootstrap 3 and the ONLY solution matching the bootstrap 3 breakpoints with both IE and Chrome was :
window.innerWidth
Here are the results with 1200px window with:
Chrome
$( window ).width(): 1183
$( document ).width():1183
screen.width: 1536
$( window ).innerWidth():1183
$( document ).innerWidth():1183
window.innerWidth: 1200
$( document ).outerWidth():1183
window.outerWidth: 1216
document.documentElement.clientWidth: 1183
Internet Explorer 10
$( window ).width(): 1200
$( document ).width():1200
screen.width: 1536
$( window ).innerWidth():1200
$( document ).innerWidth():1200
window.innerWidth: 1200
$( document ).outerWidth():1200
window.outerWidth: 1214
document.documentElement.clientWidth: 1200
Just read these two URLs. It should help you get what you need.
http://www.quirksmode.org/blog/archives/2010/08/combining_media.html
http://www.quirksmode.org/mobile/tableViewport.html
FYI, the Android probably is 800px wide. See this article among others:
Understanding Samsung Galaxy Tab screen density
Edit: Oh, I think the other guy was righter than me that pointed to the Android bug.
I find that using window.outerWidth gives the correct value. Tested this using BrowserStack android emulators.
Depending on which mode of IE8 i'm in (quirks or standard) i get different values for the height and width. I've tried standard javascript and jquery but both return different results.
In Quirks
$('body').width = 1239
$('body').height = 184
document.body.clientWidth = 1231
document.body.clientHeight = 176
In standards
$('body').width = 1260
$('body').height = 182
document.body.clientWidth = 1254
document.body.clientHeight = 176
Any ideas how to get a value unchanged by the mode of IE8.
Thanks in adv.
Perhaps the issue is due to the scrollbars being included in the width and height regardless of whether or not they are there. I don't have IE (on a mac) so can't verify.
However, I can tell you what does work as in my project jQuery Lightbox I have no such issue. We use the following code in it:
// Make the overlay the size of the body
var $body = $(this.ie6 ? document.body : document); // using document in ie6 causes a crash
$('#lightbox-overlay').css({
width: $body.width(),
height: $body.height()
});
// ... some code ...
// Get the window dimensions
var $window = $(window);
var wWidth = $window.width();
var wHeight = $window.height();
And the overlay displays correctly. I would trust jQuery's result of the width and height compared to that of the native result, as jQuery should naturally be taking into account any quirks with the browser.
It is important to note that the lightbox script above tends to prefer $(document) over $(document.body) for some reason - I can't remember sorry :O - so perhaps this solves the issue as well?
Just a quickshot. Try to give your body #page:
function getPageHeight() {
var pageHeight = document.getElementById('page').offsetHeight;
var pageWidth = document.getElementById('page').offsetWidth;
alert(pageHeight);
alert(pageWidth);
}
Try this:
var viewport = {
width : $(window).width(),
height : $(window).height()
};
var width = viewport.width;
var height = viewport.height;
My problem is I need to get the position of the viewport relative to the extent of the entire document. I am only concerned with Firefox.
My issue is that everything I have read says that:
viewport height is window.innerHeight
scroll position is window.pageYOffset
document total height is document.height
So, I would expect that if I scrolled to the bottom of a page that
window.innerHeight + window.pageYOffset == document.height
But it doesn't! Can someone please explain to me why this is?
When scrolling all the way to the bottom, this thould return true
window.innerHeight + window.pageYOffset == document.documentElement.scrollHeight
Document.height can be misleading because it is sometimes set to 100% in the CSS, which messes it up.