We Keep Coding

page has different height when inside an iframe

I've googled a bit and there were a few leads, but I couldn't get any of those leads to work:
I have a page that has an iframe with the src pointing to an external page (cross domain). When the child/iframed page loads, it posts a message of its height. I put a console.log of the height in the javascript. If I open that page in a separate window (type the iframe's src URL in a separate tab, in other words), the console logs the expected height.
However, when I open the parent page with the iframe, the console logs either 0 or a very incorrect value of 150. I've looked through the css and html, and I don't have any specifications of 150.. Anyone have a clue what's going on here?
Abstracted code:
Parent HTML:
...
<iframe src="example.childpage.com" scrolling="no" frameBorder="0"></iframe>
...
Parent Javascript:
...
$(document).ready(function(){
window.addEventListener('message', function(m){
var messageData = m.data;
if(messageData.type=='document-loaded' &&
messageData.hasOwnProperty('height'){
resize_iframe(messageData.height); //function defined else where
//and works
};
});
...
IFrame Javascript:
...
$(document).ready(function(){
var body = document.body;
var html = document.documentElement;
var maxHeight = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
//Logs height correctly when opened in a separate window but not when
//iframed
console.log("POSTING HEIGHT", maxHeight);
window.parent.postMessage({'type':'document-loaded', 'height': maxHeight},
PARENT_HOST_URL); //PARENT_HOST_URL defined elsewhere
});
...
I realize I have a mixture of jquery and vanilla javascript here; I've done both $(document).height() and the Math.max() shown above to get the height, but both ways still have the same issue.
Much thanks!

ok I finally found a good solution:
$('iframe').load(function() {
this.style.height =
this.contentWindow.document.body.offsetHeight + 'px';
});
Because some browsers (older Safari and Opera) report onload completed before CSS renders you need to set a micro Timeout and blank out and reassign the iframe's src.
$('iframe').load(function() {
setTimeout(iResize, 50);
// Safari and Opera need a kick-start.
var iSource = document.getElementById('your-iframe-id').src;
document.getElementById('your-iframe-id').src = '';
document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
document.getElementById('your-iframe-id').style.height =
document.getElementById('your-iframe-
id').contentWindow.document.body.offsetHeight + 'px';
}

I had a function that looped through not-yet-accessible elements and called $(element).hide() on them -- which sets the style display: none.
Turns out calculating the height of an element is respective of its visibility on the actual page, regardless of it being in an iframe. So the browser couldn't see it, so the height was being miscalculated (still weird it was returning a random 150px value). That explains why it was calculating correctly on a separate page.
Instead of doing hide(), I just set the visibility to hidden and that fixed my issue of getting the incorrect heights.

Refresh height after resizing with js

I have a nice script which let 2 divs have equill height.
but after I resize my browser the height keeps the same while I need it to be responsive and refreshes.
Really have no idea how to do this.
$(document).ready(function() {
var height = Math.max($(".h-txt.left").height(), $(".h-img.right").height());
$(".h-txt.left").height(height);
$(".h-img.right").height(height);
});
Do I need to add a "document on refresh / resize" function?

try this:
$(window).resize(function (e) {
$(".h-txt, .h-img").css("height", "auto");
var height = Math.max($(".h-txt.left").height(), $(".h-img.right").height());
$(".h-txt.left").height(height);
$(".h-img.right").height(height);
});
$(window).trigger("resize");
First we're resetting height to "auto" to make sure we always get height of the higher of the two <div>s later on.
Then - we actually get the height of the bigger one, and force it onto both elements.
Whole cycle repeats each time the window is resized - our function is bound to the "resize" event of the window. ($(window).resize(...);)
Last line is just triggering it on the initial load of the page, so we won't have to actually resize the window to get it launched for the first time.
jsfiddle: http://jsfiddle.net/5z0ett7e/

Just put your code into a function, and call it with '.resize()'
var responsiveSize = function() {
var height = Math.max($(".h-txt.left").height(), $(".h-img.right").height());
$(".h-txt.left").height(height);
$(".h-img.right").height(height);
}
// This will call it on page load
responsiveSize();
// This will call it on window resize
$(window).resize(function(){
responsiveSize();
});

window size jquery bug

While trying to create a single page template with parallax scrolling I found and odd problem. I'm am suspecting that the problem is in either the jQuery portion of maybe even the CSS it self, but I am rather not sure.
My current jQuery code bit reads the window size of the visitors browser and adjusts the height of the slides for each different anchored page. This way I achieved full with backgrounds no matter the window size. But in same time I realized that If I add different CSS components, they will not expand the active anchor background height, but rather will overflow onto the other slide.
Here is the jQuery portion responsible for the slides height
$(function () {
$('.windows').css({
'height': (($(window).height())) + 'px'
});
$(window).resize(function () {
$('.windows').css({
'height': (($(window).height())) + 'px'
});
});
});
And here is the site URL https://docstax.net/esgh/
Go to Plans and resize your browser you will see what I mean by not adjusting the high of slide based on needed high of content inside.
Edit: As suggested by putvande there where way to many $(window) which I was aware of, do to that I updated and minimized the code.

Basically you don't want to manually add a height component to the div if the content is going to be too large for the container. Here's what I think would work:
$(window).bind("load", function()
{
var windowHeight = $(window).height();
$('.windows').each(function(index) {
if ($(this).height() < windowHeight) {
$(this).height(windowHeight);
}
});
$(window).resize(function() {
var windowHeight = $(window).height();
$('.windows').each(function(index) {
if ($(this).height() < windowHeight) {
$(this).height(windowHeight);
}
});
});
});

You can try like this one:
<script type="text/javascript">
$(function(){
var height = window.innerHeight;
$('.windows') .css({'height': height+'px'});
$(window).resize(function() {
var reheight = window.innerHeight;
$('.windows') .css({'height': reheight+'px'});
});
});
</script>

I tried your page, I'm failing to see a problem :
The sections are resized as they should. Content is display as it should considering the styles applied.
When a section is smaller than its content, the content starts bleeding out on other pages. Perfectly normal. You could set overflow: hidden; on your .windows to prevent that from happening and/or use media queries to resize the content.
Here is a lighter function by the way, just edited your code :
$(function() {
$(window).resize(function() {
$('.windows').css({ 'height': $(window).height() });
}).resize();
});
No need to write the code twice : setting the resize handler and triggering it manually should do.
Write it once, so when you need to change it, you'll change it only once.
You could also reset de scrollTop in your resize handler to keep focus on the same portion of the page.

jQuery is only loading on resize and I want it to load on both resize and page load

I have two sections next to each other, the first with a flexible width image and the second with a series of elements. I want the second to adjust it's height to match the height of the image in the first. I managed to get some javascript working that looks at the height of the image and adjusts the height of second section. However, it only works on resize and I'm unable to get it to work on load as well. For an example, see my fiddle. You'll notice the height matching doesn't kick in until resize.
$(document).ready(function(){
function matchHeight() {
var newHeight = $("#slider").height();
$("#ctas").height(newHeight);
}
jQuery.event.add(window,"resize",matchHeight);
});
http://jsfiddle.net/sGNcc/2/

Just call "matchHeight" in your "ready" handler:
jQuery.event.add(window,"resize",matchHeight);
matchHeight();
Also that's kind-of a weird way to establish an event handler:
$(window).resize(matchHeight);

Call the matchHeight function onload:
$(document).ready(function(){
matchHeight();
});
function matchHeight() {
var newHeight = $("#slider").height();
$("#ctas").height(newHeight);
}

jquery expanding and resizing problem

Im using this jquery to try and control how wide and high a div opens depending on the screen resolution this is the code im using but it doesn't seem to be having any effect apart from cropping my image. I say it doesnt seem to work becuase it leaves a big space and when I look at firebug it tells me the box has expanded to the 600px x 488px when im viewing in the lower resolution.
Im not sure if the images are pushing the div out the that size because the pictures are exactly 600px x 488px but I need them to be the same file just smaller for dynamic PHP gallery updating in the future, how can I fix this code and how can I easily resize the images depending on the resolution?
$(document).ready(function(){
if ((screen.width>=1440) && (screen.height>=764)) {
$("#slideshow_box")
.animate({"height": "600px"}, 500)
.animate({"width": "488px"}, 500);
}
else {
$("#slideshow_box")
.animate({"height": "400px"}, 500)
.animate({"width": "288px"}, 500);
}
});

DEMO
As you can se HERE even if you resize your screen the calculated width is actually = your brand new ;) screen - size!
To get the actual 'screen' (window!) size in your browser you can use
$(window).width(); and $(window).height();
$(document).ready(function(){
var winW = $(window).width();
var winH = $(window).height();
alert("Window width is: "+winW+"px, window height is: "+winH+'px');
if ((winW>=1440) && (winH>=764)) {
$("#slideshow_box")
.animate({"height": "600px"}, 500)
.animate({"width": "488px"}, 500);
} else {
$("#slideshow_box")
.animate({"height": "400px"}, 500)
.animate({"width": "288px"}, 500);
}
});
HERE you can see it in action, just resize the frame.
$(window).resize(function() {
$('#size').html(
' Window width: '+$(window).width()+
'<br> Window height: '+$(window).height()
);
});

Hum, can't figure out your problem...seems to work for me, see http://jsfiddle.net/EtEzN/2/
For sure, your snippet resizes DIV layer only, so you have to resize containing images too!
EDIT: Fiddle is updated, so script regards browsers document height instead of screen height (remember: screen resolution <> browser resolution <> document resolution)

The images are indeed pushing out your div. If you want to change image size, then you can't just adjust the size of the containing div, you have to change the size of the img itself.
I'm assuming that the image is intended to be the same size as the div that contains it. Thus, your code should only require a slight modification:
$(document).ready(function(){
if ((screen.width>=1440) && (screen.height>=764)) {
// Since the image is already the same size as the div,
// don't change the image
$("#slideshow_box")
.animate({"height": "600px"}, 500)
.animate({"width": "488px"}, 500);
}
else {
// Resize the image along with the div
$("#slideshow_box, #slideshow_box img")
.animate({"height": "400px"}, 500)
.animate({"width": "288px"}, 500);
}
});
Also, the screen properties signify the resolution of the client's display screen, not the actual size of the browser window. Since you're using jQuery, you can use $(window).width() and $(window).height(), or if you're ever using plain JS, the window.innerWidth and window.innerHeight properties (for Firefox), or document.body.clientWidth for IE, although browser compatibility is annoying for this, so I'd probably stick with jQuery or another library.