Develop Reference

Adjust Iframe height dynamically and set scroll if content height change on client side event (Text Expand/Collapse using +/- buttons)

I have been searching around for a solution to set scroll of iframe sourcing same domain page using javascript. I just want to have scroll on the iframe only if the content's height is greater that the window height. Came across solutions using setInterval. In IE i dont get a proper scrollheight for a page that has some content hidden. The works fine in chrome and mozila although. Also it looks like i have to set anyways max-hright of the iframe to get this code working on chrome and IE when the use click on +/- in the iframe page. I dont have controll over the source page for iframe. Also there are events where in the content height of the iframe changes at client side like expand/collapse thing. Any suggestions as to why it is happening or any other options to implement.
Iframe container (div)
border: groove;border-width: thin;display:none;position:fixed;z-index:998;width:800px;background-color: white;right: 83px;top:22px;
Iframe style
top: 20px;margin:0;padding:0
Javascript function that gets called based on interval to set iframe height to that content height
function AdjustIframeHeightOnLoad() {
var screenHeight = $(window).height();
var iframeContentHeight;
var iframeContentwidth;
iframeContentHeight = document.getElementById("iframe_ObjectLink").contentWindow.document.body.scrollHeight;
iframeContentwidth = document.getElementById("iframe_ObjectLink").contentWindow.document.body.scrollWidth;
if (iframeContentHeight > (screenHeight - 47)) {
document.getElementById("objectionMenuContentContainer_div").style.height = (screenHeight - 27) + "px";
document.getElementById("iframe_ObjectLink").height = (screenHeight - 47);
document.getElementById("iframe_ObjectLink").contentWindow.document.documentElement.style.overflowY = "scroll";
}
else {
document.getElementById("objectionMenuContentContainer_div").style.height = iframeContentHeight + "px";
document.getElementById("iframe_ObjectLink").height = (iframeContentHeight - 25);
document.getElementById("iframe_ObjectLink").contentWindow.document.documentElement.style.overflowY = "hidden";
}
if (iframeContentwidth > 883)
document.getElementById("iframe_ObjectLink").contentWindow.document.documentElement.style.overflowX = "scroll";
else
document.getElementById("iframe_ObjectLink").contentWindow.document.documentElement.style.overflowX = "hidden";
}

Iframe auto Re-size when content of iframe change

my Iframe (that is on other domain) use Ajax inside and data height change when you select dropdown values.
Visit for my Iframe demo [here](http://jsfiddle.net/pq7twrh2/5/)
in my Iframe when i select all dropdown then show data and then height increase.
i want when content or height increase my frame height auto increase.
how this possible?

try adding this to your iframe source:
$(document).ready(function(){
$('#engineType').change(function(){
$('#iframe1', window.parent.document).height($('#VehicleDetails').height() + 227);
});
});
Make sure that you follow the Same-Origin Policy

One of the few ways would be to get the iframe content (which is your site's content) and get the height of the body and set the iframe's height. Except if you get this error: The frame requesting access has a protocol of "file", the frame being accessed has a protocol of "http". Protocols must match, you are getting a cross-domain problem, and you won't be able to fix that. It is impossible for your site to access the loaded iframe's site at all.
But if you manage to do that, it would be like this:
jQuery(function($){
var lastHeight = 0, curHeight = 0, $frame = $('iframe');
setInterval(function(){
console.log($frame.get());
curHeight = $frame.contents().find('body').height();
if ( curHeight != lastHeight ) {
$frame.css('height', (lastHeight = curHeight) + 'px' );
}
},500);
});
This will check the height of the body of your iframe's site every half a second and set the iframe's height if it has been changed: http://jsfiddle.net/pq7twrh2/7/

IE9 ignoring scrolling and overflow attributes

My page is loaded into iframe, and I need to adapt the size of that iframe using javascript. I try the following:
iframe.style.overflow = 'hidden'
iframe.scrolling = 'no'
var content = iframe.contentWindow.document.getElementById('content')
var height = content.offsetHeight + 10
iframe.style.height = height + 'px'
console.log(content.offsetWidth)
var width = content.offsetWidth + 10
iframe.style.width = width + 'px'
On FireFox it works as supposed to, but IE9 ignores both scrolling and overflow attributes. The browser mode is set to IE9-Standards.
How to get rid of that scroll in iframe under IE9?

Looks like the iframe is loaded, when you're doing this. You can set:
iframe.contentWindow.document.body.style.overflow = 'hidden';
If there's a literal iframe tag on the page, you can set scrolling attribute to "no", but when setting this attribute value with JS after iframe element has been created to a page, doesn't work. If you're creating the iframe dynamically, you can set setAttribute('scrolling', 'no') before appending it into a document.

Dynamically define iframe height based on window size (NOT CONTENT)

I have found threads such as How to dynamically resize iFrame in Firefox? which talk about sizing an iframe based on the remote content; however, I have not found a way (in Firefox) to set the height of the iframe based on the window size.
Other browsers are able to use .body.scrollHeight but it appears that Firefox can't use that. See... http://jsfiddle.net/gjrowe/X63KR/
To see the iframe in action with the auto-sizing, view this page... http://jsfiddle.net/gjrowe/y2WCP/
It works in browsers such as Chrome but not Firefox

Here is what I did to have a cross-browser fix...
I added this javascript function...
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
I then changed...
var content_height=document.body.scrollHeight-100;
to...
var content_height=getDocHeight()-100;
You can see it in action at http://jsfiddle.net/y2WCP/9/

i don't know if you want to use jQuery, but with jQuery i think i fixed your problem..
// Header is 50px and footer is 50px; therefore, 100px is of screen height is used
// Define content_height and consider the 100px which has already been used
var content_height=document.body.scrollHeight-100;
//alert(content_height);
content_height = $(window).height() -110;
//alert(content_height);
// Set iframe height
document.getElementById('pdf_frame').style.height=content_height+"px";
// Reset iframe height after window resize
$(function(){
$(window).resize(function(){
content_height = $(window).height()-110;
//var content_height=document.body.scrollHeight-100;
document.getElementById('pdf_frame').style.height=content_height+"px";
});
});
jsFiddle link

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.