Develop Reference

Source page doesn't resize with iframe height changes

I'm using a simple JavaScript code to resize an iframe based on the content being loaded (it's all in domain). However i'm getting the situation where; when the iframe resizes for a page with a lot of content that requires scrolling on the source page but then when you go to a page with much less content, the source page remains at the same height so has a lot of horrible empty scrollable space below the content and i can't seem to stop this happening.
Is there additional code to make sure the source page resizes with the iframe?
JavaScript
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';
}

You have a couple of options.
Use offsetHeight instead of scrollHeight.
Reduce the height down to 1px at the start of you resize function, so it can 'grow' to the new smaller size.
Both options have downsides. Option one won't include any margin on your body, so best to set it to 8px and then add 16px to the height. Option two creates a little flicker.

Bootstrap responsive inside iFrame

We have a site built with Angular/bootstrap.
This site should be configured inside of an Iframe of another domain.
my doubt is Should i write a resize script to properly scroll inside iFrame or since my app is designed using Bootstrap will it auomatically behave responsive according to parent domain iFrame size.

Bootstrap will take care of the responsiveness itself, but the only condition is, you follow the row and column structure properly.

It depends whether you want the iframe to be a fixed height and have a vertical scrollbar or if you want the iframe to have a height that changes dynamically with your embedded page.
If it's the former you don't need to do anything, Bootstrap has the widths covered.
If you want the iframe height to change depending on the height of your embedded page (which will change with the responsive design), you need JS to resize the iframe.
For example
var iframeResize = function() {
var iFrameID = document.getElementById('myIframe');
if(iFrameID) {
iFrameID.height = iFrameID.contentWindow.document.body.offsetHeight + "px";
}
}
$(function() {
$(window).resize(iframeResize);
});

Document height determined incorrectly - can't see all the content

I am building a wordpress template, and I use a little Javascript to make the 'content' element fill the page from top to bottom. The goal is to cover the background image, so the 'content' doesn't look cut above the edge on larger screens. The code is:
$(document).ready(function() {
var h = Math.max($(window).height()+50, $("#content").height());
$("#content").height(h);
});
$(window).resize(function() {
var h = Math.max($(window).height()+50, $("#content").height());
$("#content").height(h);
});
My layout is: fixed sidebar on the left, then content with auto-width and two floated columns inside. It generally works, however on pages where I have a nivo-slider in one of the columns, the document height is determined incorrectly. When the screen size is small, the other column lands underneath (#media statement) and I can't scroll the screen to see that column.
See example page here: http://figtreephotodesign.com/kidsandfamilies/about/ - and set your browser window below 860px-wide to see the problem.
On another page: http://figtreephotodesign.com/kidsandfamilies/contact/ - it works (there is no nivo-slider).
Is it the nivo-slider's css messing up?

Dynamic Height & Fixed Elements inside iFrame

I'm trying to set the height of a 'panel', so it fills the full width & height of the device. Previously this was okay, but now the site is running through an iFrame, the height is MASSIVE.
I'm using this code:
var windowHeight = $(window).height();
$('.panel-adjust').height(windowHeight);
Because it's inside the iFrame, it seems it's generating a big height due to the iFrame (Possibly the height of ALL the panels)
How can I fix this so it gets the actual viewport height, not the height of the iFrame? Bearing in mind this needs to be dynamic. The iFrame is on another site so I don't have much flexability over it.
I'm also trying to position an element to the bottom of the viewport / window. Normally doing this works:
position:fixed;
bottom: 0;
left: 0;
But now it's inside an iFrame, the fixed element is at the very bottom of the website (Not the window)
Any ideas?

Getting the height & width of the viewport on the Parent page (with the iFrame) then passing it to the iFrame and collecting it worked for me. Like #passionateCoder stated.

100% height div but if content bigger adjust accordingly

My website is to be a one page website, with 5 DIV's acting as panels (with a classname as .panel) that fit to stretch the full height and width of the browser window. My below code does this already and works a treat however, I have content that can be larger than the height of .panel/browser window. At the moment this content gets hidden. I.e. The .panel DIV is literally the height of the window and nothing else. I need it to expand if the content within it is larger than the height of the browser window.
How do I edit this code below to do add this functionality? Maybe add a classname to this adjusted DIV so that I can style it accordingly?
// In my plugins.js file
function fitElements(){
var height=$(window).height();
var width=$(window).width();
$('.panel').css('height',height);
$('.panel').css('width',width)
};
// At the bottom of my HTML file (to call the function)
jQuery(document).ready(function($) {
fitElements();
});
// My current code also adjusts on browser resize - so would need this answer to do the same
$(window).resize(fitElements);

Change the section
$('.panel').css('height',height);
to
if (height > $('.panel').height) {
$('.panel').css('height',height);
}
for the re-size function add
$('.panel').css('height','auto');
in to the beginning of the function