We Keep Coding

Why do we set textarea height to '0px' before setting it equal to its scrollHeight in order to auto size the textarea?

I am using the code from https://stackoverflow.com/a/24676492/4997994 and modifying it for my question (mainly replacing element.style.height = "5px" with element.style.height = "0px"). My question is why do we even need to reset the textarea height before setting its height with its scrollHeight ?
function auto_grow(element) {
element.style.height = "0px"; // why do we even need this line ?
element.style.height = (element.scrollHeight)+"px";
}
<textarea oninput="auto_grow(this)"></textarea>
It does give weird behavior with this line element.style.height = "0px" commented out as can be seen by running the code snippet below but what is causing this ? Does the scrollHeight attribute compute its value in a different way when the textarea height is not reset in the oninput handler ?
function auto_grow(element) {
console.log(`Before- ${element.scrollHeight}`);
// element.style.height = "0px";
element.style.height = (element.scrollHeight)+"px";
console.log(`After- ${element.scrollHeight}`);
}
<textarea
oninput="auto_grow(this)"></textarea>

There's a couple of things going on. The textarea starts with an initial content height, a padding of 2px (on all sides, but specifically for this case, top and bottom) and a box-sizing of content-box.
The next thing to understand is how the scrollheight of an element is calculated. It's from the top edge of the scrolling area to the bottom edge. The top edge is the top edge of its padding box. The bottom edge is defined as
The bottom-most edge of the element’s bottom padding edge and the bottom margin edge of all of the element’s descendants' boxes, excluding [not relevant in this case].
The text content generates descendant boxes, so this means that when you measure the scrollHeight of the textarea, that's the height of top padding plus the maximum of the existing set content height + bottom padding and the text height.
By setting the content height to 0px first, it's reducing that scrollHeight to the height of top padding plus the maximum of the bottom padding and the text height, which for all practical purposes is always going to be the height of the text.
So the final content height set will always be set to the height of the contained text plus the top padding.

Check to see if an iframe has scrollbars visible?

I was wondering if anyone knows how to check to see if the content in an iframe is overflowing and the scrollbars are visible?
Thanks

in general you should compare the delta of the element's scrollHeight/scrollWidth and offsetHeight/offsetWidth.
if positive then 'we got a winner'.
but.. when looking for scrollbars in an iframe, things get a little bit trickier:
var frm=document.getElementById("frm");
var iIsVrScrollBar = frm.contentWindow.document.documentElement.scrollHeight>frm.contentWindow.document.documentElement.offsetHeight ? 1 : 0;
var iIsHrScrollBar = frm.contentWindow.document.documentElement.scrollWidth>frm.contentWindow.document.documentElement.offsetWidth ? 1 : 0;

You want to check if the element's scrollHeight is greater than the clientHeight, or if the element's scrollWidth is greater than the clientWidth. This can be done with those properties directly, or by using helper methods provided by jQuery.
MDN: element.scrollHeight
If the element's content generated a vertical scrollbar, the
scrollHeight value is equal to the minimum clientHeight the element
would require in order to fit all the content in the viewpoint without
using a vertical scrollbar. When an element's content does not
generate a vertical scrollbar, then its scrollHeight property is equal
to its clientHeight property. This can mean either the content is too
short to require a scrollbar or that the the element has CSS style
overflow value of visible (non-scrollable).

I had to modify the code to get it to work.
1) the IFRAME & contents are on the same website/folder structure
2) the procedure is instigated by setting "sizewindow" to TRUE
3) it snippet is part of a timer function set at anout 0.5 seconds
4) tested on IE11, FF34 & 35, Chrome 31 & 40, & Opera 12.6
5) active code sizes the window to just larger than content,
see http://www.users.waitrose.com/~cresby/map2.htm
if (sizewindow){
if(iIsVrScrollBar==1) {
frm.style.height = (frm.contentWindow.document.body.offsetHeight+20);
iIsVrScrollBar = (frm.scrollWidth!=frm.contentWindow.document.documentElement.scrollWidth) ? 1 : 0;
if(iIsVrScrollBar==0) sizewindow=false;
}else{
frm.style.height = (frm.contentWindow.document.body.offsetHeight-10);
iIsVrScrollBar = (frm.scrollWidth!=frm.contentWindow.document.documentElement.scrollWidth) ? 1 : 0;
if(iIsVrScrollBar==1) {frm.style.height = (frm.contentWindow.document.body.offsetHeight+10);}
}
}

iframe dynamic height resizing

Hi I currently have 2 pages (index.html and iframe_contents.html). Both are on the same domain.
I am currently trying to get the iframe to dynamically resize based on the contents size.
I was using this to assist me http://benalman.com/code/projects/jquery-resize/examples/resize/ and it works if the iframe_contents body tag gets larger or smaller on Firefox and IE 7/8/9 but for webkit it only can grow and can never shrink
I've narrowed it down to the body tag in iframe_contents.html not shrinking when content height changes but only in the iframe. When iframe_contents.html is not in a iframe if I shrink / enlarge elements the bodies overall height changes.
Is this a webkit specific issue?

After reading lots of answers here they all had the same issue with not resizing smaller when needed. I think most people are just doing a one-off resizing after the frame loads, so maybe don't care. I need to resize again anytime the window size changes. So for me, if they made the window narrow the iframe would get very tall, then when they make the window larger it should get shorter again. This wasn't happening on some browsers because the scrollHeight, clientHeight, jquery height() and any other height I could find with DOM inspectors (FireBug/Chrome Dev Tools) did not report the body or html height as being shorter after the iframe was made wider. Like the body had min-height 100% set or something.
For me the solution was to make the iframe 0 height, then check the scrollHeight, then set to that value. To avoid the scrollbar on my page jumping around, I set the height of the parent (that contains the iframe) to the iframe height to keep the total page size fixed while doing this.
I wish I had a cleaner sample, but here is the code I have:
$(element).parent().height($(element).height());
$(element).height(0);
$(element).height($(element).contents().height());
$(element).parent().height("");
element is my iframe.
The iframe has width: 100% style set and is inside a div with default styles (block).
Code is jquery, and sets the div height to the iframe height, then sets iframe to 0 height, then sets iframe to the contents height. If I remove the line that sets the iframe to 0 height, the iframe will get larger when needed, but never smaller.

This may not help you much but here is a function we have in what would be your iframe_contents.html page. It will attempt to resize the iframe in which it is loaded in a sort of self-resizing, cross-browserish, pure-JavaScript kind of way:
function makeMeFit() {
if (top.location == document.location) return; // if we're not in an iframe then don't do anything
if (!window.opera && !document.mimeType && document.all && document.getElementById) {
parent.document.getElementById('youriframeid').style.height = (this.document.body.offsetHeight + 30) + "px";
} else if (document.getElementById) {
parent.document.getElementById('youriframeid').style.height = (this.document.body.scrollHeight + 30) + "px"
}
}
You could put calls to it in a resize() event or following an event that changes the height of your page. The feature-testing in that method should separate out WebKit browsers and pick the correct height property.

Problem resizing div in Chrome

EDIT: What happens can be seen in this page when the height resolution is lower than the entire page (eg.: 1024x768): http://www.depositosalto.com.br/pagamentos.php
I trying to resize a div with the content of page with javascript to always the page fit in the whole screen when it is smaller.
I'm using the following javascript and it works in other navigators(Firefox, Opera). In Chrome it resizes the div too, but unlike the others, it don't pushs the footer div which is just below the content div.
Is there any way around it in chrome?
function defineContentHeight(height){
var screenHeight = window.innerHeight;
if (screenHeight > (height + 220)){
height = screenHeight - 220;
document.getElementById("content").style.height = height + "px";
}
else{
document.getElementById("content").style.height = height + "px";
}
}

The content inside the "conteudo" div is floating, so the height isn't calculated; you can do one of two things:
Add the "overflow:auto" style to the "conteudo" div, which is generally safe, or
Add a div with a style of "clear:both" to the very bottom of the "conteudo" div
For what it's worth, I'm not seeing your bug in Chrome 11, but my guess is that one of those might fix it.

How do I easily find the distance between a point on the page and the bottom of the browser window using JavaScript?

A view in my web app has a table which may be extremely long, so I wrapped it in a div with overflow: auto; max-height: 400px; so users can scroll through it while keeping the other controls on the page visible.
I want to use a bit of JavaScript to dynamically adjust the max-height CSS property so the div stretches to the bottom of the browser window. How can I determine this value? jQuery solutions are fine.
The table doesn't start at the top of the page, so I can't just set the height to 100%.

Something like this would work I think:
var topOfDiv = $('#divID').offset().top;
var bottomOfVisibleWindow = $(window).height();
$('#divID').css('max-height', bottomOfVisibleWindow - topOfDiv - 100);

I had a very similar problem, except in my case I had a dynamic pop-up element (a jQuery UI Multiselect widget), to which I wanted to apply a max-height so that it never went below the bottom of the page. Using offset().top on the target element wasn't enough, because that returns the x coordinate relative to the document, and not the vertical scroll-position of the page.
So if the user scrolls down the page, the offset().top won't provide an accurate description of where they are relative to the bottom of the window - you'll need to determine the scroll position of the page.
var scrollPosition = $('body').scrollTop();
var elementOffset = $('#element').offset().top;
var elementDistance = (elementOffset - scrollPosition);
var windowHeight = $(window).height();
$('#element').css({'max-height': windowHeight - elementDistance});

window.innerHeight gives you the visible height of the entire window. I did something almost identical recently so I'm pretty sure that's what you need. :) Let me know, though.
EDIT: You'll still need the Y-value of the overflowed div which you can get by document.getElementById("some_div_id").offsetHeight, seeing that .style.top won't give you a result unless it has been specifically set to a point via CSS. .offsetHeight should give you the correct 'top' value.
Then it's just a matter of setting the size of the table to the window height, minus the 'top' value of the div, minus whatever arbitrary wiggle room you want for other content.

something like max-height: 100%, but not to forget the html and body height 100%.