Develop Reference

How to find the height of the entire webpage?

I am working on a solution capturing screen-shots of websites. I am using the default example mentioned at slimerjs.org to get the job done.
Screen-shots are great with this tool, but I need to take full height screen-shots of websites. When capturing screens of websites like http://www.yellowpages.com, I can get full length screens without having to mention any height parameter.
But when I try this url: http://votingbecause.usatoday.com/
I only get screenshot of the set resolution (default: 1920x1080), I can't get full length images.
Since I am using slimerjs, I can manipulate the dom by using jQuery. I need to find complete website height so that I can take screenshot of that resolution
I tried
document.height()
document.body.scrollheight
screen.height
$(document).height()
(and many other which i found)
But all of these only gave the height of the viewport (website in view)
Question is, how to find the full scrollable height of the website?

To be more general and find the height of any page you could just find the highest DOM Node on current page with a simple recursion:
;(function() {
var pageHeight = 0;
function findHighestNode(nodesList) {
for (var i = nodesList.length - 1; i >= 0; i--) {
if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
pageHeight = Math.max(elHeight, pageHeight);
}
if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
}
}
findHighestNode(document.documentElement.childNodes);
// The entire page height is found
console.log('Page height is', pageHeight);
})();
You can test it on your sample site(http://votingbecause.usatoday.com/) with pasting this script to a DevTools Console.
Enjoy!
P.S. Supports iframe content.

The contents in the site are in the following div
<div class="site-wrapper flex column">
use this code to get it's height
document.querySelector(".site-wrapper").scrollHeight

Updated Answer for 2020:
You can just simply pass this below line to get the Height of the Webpage
Code:
console.log("Page height:",document.body.scrollHeight);

try windows.innerHeight to get browser viewport size
i think that is what you are loking for

$("body").height();
is what you need

$(window).height();
retrieve current window height..

Here is what I found that worked.
document.body.scrollHeight
was giving me a value of 0.
What worked was
document.documentElement.scrollHeight
https://minimul.com/getting-a-zero-with-document-body-scrollheight.html

How do I create a div the size of the page?

Note that I'm not asking how to make a div the size of the "window" or "viewport" for which there are plenty of existing questions.
I have a web page of some height and width, and I'd like to add an empty, top-level div (i.e., not one containing the rest of the page) with a size exactly equal to the page's height and width. In practice, I also want it to be at least the size of the viewport.
I know I can do a one-time calculation of the height and width in JavaScript:
var height = Math.max(document.body.scrollHeight,
document.documentElement.clientHeight);
var width = Math.max(document.body.scrollWidth,
document.documentElement.clientWidth);
But this value can change based on images loading, or AJAX, or whatever other dynamic stuff is going on in the page. I'd like some way of locking the size of the div at the full page size so it resizes dynamically and on-demand.
I have tried something like the following:
function resetFakeBg() {
// Need to reset the fake background to notice if the page shrank.
fakeBg.style.height = 0;
fakeBg.style.width = 0;
// Get the full page size.
var pageHeight = Math.max(document.body.scrollHeight,
document.documentElement.clientHeight);
var pageWidth = Math.max(document.body.scrollWidth,
document.documentElement.clientWidth);
// Reset the fake background to the full page size.
fakeBg.style.height = pageHeight + 'px';
fakeBg.style.width = pageWidth + 'px';
}
// Create the fake background element.
fakeBg = setFakeBgStyle(document.createElement('div'));
document.body.appendChild(fakeBg);
// Keep resizing the fake background every second.
size_checker_interval = setInterval(resetFakeBg, 1000);
Limitations
This is for a Chrome extension, and I'd like to limit my modification of the page to adding this single div. This means that adding CSS to modify the height and width of the html and/or body tags is undesirable because it might have side-effects on the way the rest of the page is rendered.
In addition, I do not want to wrap the existing page in the div because that has the potential to break some websites. Imagine, for example, a site styled with the CSS selector body > div. I'd like my extension to break as few websites as possible.
WHY OH WHY WOULD I NEED TO DO THIS?
Because some people like to hold their answers hostage until they're satisfied that I have a Really Good Reason™ for wanting to do this:
This is for an accessibility-focused Chrome extension that applies a CSS filter across an entire page. Recent versions of Chrome (>= 45) do not apply CSS filters to backgrounds specified on the <html> or <body> tag. As a result, I have chosen to work around this limitation by copying the page's background onto a div with a very negative z-index value, so that it can be affected by the page-wide CSS filter. For this strategy to work, the div needs to exactly imitate the way the page background would appear to a user—by being the exact size of the document (and no larger) and at least filling the viewport.

setInterval() is your best friend in cases like this where you want the .height() and .width() of an element to be asynchronously specified all the time to something that can be dynamicly altered by user input and DOM tree changes. It is what I dub as a "page sniffer", and arguably, works better than $(document).ready if you are working in multiple languages (PHP, XML, JavaScript).
Working Example

You should get away with setting the width and height in the window resize function, you might wanna add it in a load function as well, when all data/images are loaded.

just add width=100%
e.g;-
Hello World

I think you must do it like this:
...
<body>
<script>
function height()
{var height = Math.max(document.body.scrollHeight,
document.documentElement.clientHeight);}
function width()
{var width = Math.max(document.body.scrollWidth,
document.documentElement.clientWidth);}
</script>
<div height="height()" width="width()">
</div>
</body>
...

How to run vbscript code at certain browser width

I'm turning a clients website into a responsive site and they have lots of vbscript in the content of their home page. At mobile widths they've stripped out a lot of content which means there's lots of code that's being executed but not displayed thanks to display:none
Is there a way to run vbscript code when you hit a minimum width of 768px?
I thought about using javascript to get the screen width and store it as a cookie and use vbscript to get the cookie to obtain the screen width:
<SCRIPT LANGUAGE="javascript">
var width = screen.width;
document.cookie = 'YourDomain=ScreenWidthB='+width;
</SCRIPT>
<%Dim ScreenWidth%>
<%ScreenWidth=request.cookies("YourDomain")("ScreenWidthB")%>
but I feel there may be a better solution out there. Also the code above gives me the width of my monitor I believe, not the width of the browser

This isn't something you would do with any server side language.
You can either use Bootstrap Grid System for this, which has a built-in grid system to handle responsive sizing.
or you can simply use CSS to define your styles for elements with-in a certain viewport size, using the CSS #media tag:
Your CSS would look like this example:
div {width:100px;}
#media (min-width:768px) {
div { width: 50px; }
}
What this does is makes all div's at 100px width, but when the browser is 768px or larger it changes the div sizing to 50px, as defined with-in the #media tag.
Therefore, you can use VBScript to generate the CSS script in the page, without having to write any javascript code. But Bootstrap may be your best bet to help build a responsive design easily/seamlessly. You may want to check it out.
EDIT: Since OP has clarified not to even load the content
You can make a cookie in javascript, and read it in your VBScript to check the viewport.
You can use jQuery for this:
$(window).resize(function(e){
var w = $(this).width();
if(w>768) document.cookie = "viewport=768;";
else document.cookie = "viewport=;";
});
This will bind an event listener on any time the user resizes the window, to check it's size, and if above 768px, it will write the cookie or empty if not.
Then check for the viewport cookie using Request.Cookies("viewport")
Or better yet since you're concerned about performance, you can use Ajax to build your page when a certain viewport size is hit.
Again, you can use jQuery for this and bind to the window resize event.
contentloaded = false;
$(window).resize(function(e){
var w = $(this).width();
if(w>768 && !contentloaded) {
$.get(url,function(data){
$("div").html(data);
contentloaded = true;
});
}
});
I would use ajax to do this, since I'd want to show the content without the user having to refresh the screen as you would have to by using the cookie solution.

Truly cross-browser way to get document height?

I have a control contained in an iframe on a page of my ASP.NET web application.
Control changes its vertical size correspondingly to what user selects on it (some elements get in, others get out). So, I have to set the iframe size precisely to get the whole control shown and not to make gap between the iframe and the elements below it.
Somewhere on the web I have found a way to get the document height in a cross-browser way:
function getDocHeight(document) {
return Math.max(
Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
Math.max(document.body.clientHeight, document.documentElement.clientHeight)
);
}
On self.document.body.onload on the control page, hence, I call this function:
function adjustIframeHeight() {
var iframe = window.parent.document.getElementById(window.frameElement.id);
var iframeHeight = getDocHeight(iframe.contentWindow.document);
iframe.style.height = iframeHeight + "px";
}
The problem is it works fine e.g. in Firefox, but in some cases bottom sections of the control are cutoff in Chrome and IE for example.
Is there some truly cross-browser way to get this height, or I am doing something else wrong?
Thank you for the time

I'd use something like jQuery to help out with this (since using height methods seem to vary from browser to browser) and here is some jQuery code that could help out:
$(document).height(); // height of HTML doc

Get Default Height Of Element On Webpage after css height has been applied)

How do I go about getting what the height of an element on a page would be if it ignored the 'height' css property applied to it?
The site I'm working on is http://www.wncba.co.uk/results and the actual script I've got so far is:
jQuery(document).ready(function($) {
document.origContentHeight = $("#auto-resize").outerHeight(true);
refreshContentSize(); //run initially
$(window).resize(function() { //run whenever window size changes
refreshContentSize();
});
});
function refreshContentSize()
{
var startPos = $("#auto-resize").position();
var topHeight = startPos.top;
var footerHeight = $("#footer").outerHeight(true);
var viewportHeight = $(window).height();
var spaceForContent = viewportHeight - footerHeight - topHeight;
if (spaceForContent <= document.origContentHeight)
{
var newHeight = document.origContentHeight;
}
else
{
var newHeight = spaceForContent;
}
$("#auto-resize").css('height', newHeight);
return;
}
[ http://www.wncba.co.uk/results/javascript/fill-page.js ]
What I'm trying to do is get the main page content to stretch to fill the window so that the green lines always flow all the way down the page and the 'Valid HTML5' and 'Designed By' messages are never above the bottom of the window. I don't want the footer to stick to the bottom. I just want it to stay there instead of moving up the page if there's not enough content to fill above to fill it. It also must adapt itself accordingly if the browser window size changes.
The script I've got so far works but there's a small issue that I want to fix with it. At the moment if the content on the page changes dynamically (resulting in the page becoming longer or shorter) the script won't detect this. The variable document.origContentHeight will remain set as the old height.
Is there a way of detecting the height of an element (e.g. #auto-resize in the example) and whether or not it has changed ignoring the height that has been set for it in css? I would then use this to update the variable document.origContentHeight and re-run the script.
Thanks.

I don't think there is a way to detect when an element size changed except using a plugin,
$(element).resize(function() //only works when element = window
but why don't you call refreshContentSize function on page changes dynamically?
Look at this jsFiddle DEMO, you will understand what I mean.
Or you can use Jquery-resize-plugin.

I've got it working. I had to rethink it a bit. The solution is on the live site.
The one think I'd like to change if possible is the
setInterval('refreshContentSize()', 500); // in case content size changes
Is there a way of detecting that the table row has changed size without chacking every 500ms. I tried (#content).resize(function() but couldn't to get it to work.