Develop Reference

iFrame height detection returns incorrect heights

I have an iframe with elements in it and I'm trying to resize the iframe to match its content. When I inspect the iframe, I can see the body has a height of 577px, but when I access the height in Javascript, I receive 250px.
Here is the code I'm using to get the height of the iframe:
function getHeight(el) {
const {clientHeight, outerHeight, innerHeight, offsetHeight} = el;
return clientHeight || outerHeight || innerHeight || offsetHeight;
}
// called on iframe's onload event
function onIframeLoad() {
var iFrame = document.getElementById('advertFrame');
if(iFrame) {
var heightContainer = iFrame.contentWindow.document.body;
var height = getHeight(heightContainer) + 'px';
iFrame.height = height;
iFrame.style.height = height;
}
}

You have to wait for the content of iframe to be loaded and then get its height. Jquery has a built in "ready" function to check if the iframe content are loaded. Please note that the "ready" refers to the load of source html code not the complete content of images and media. So you have to set initial height for images and other content those have changes in their height after complete loading.
$(document).ready(function(){
$('#advertFrame').ready(function() {
this.style.height =
this.contentWindow.document.body.offsetHeight + 'px';
});
})
check the following example for a iframe load test: http://jsfiddle.net/ZrFzF/

Div height relative to another div on window resize

My function below, loads correctly on initial load and sets the div height to match the height of the video. However when I resize the window the element #top-content looses its height.
jQuery(window).resize(function () {
var vidHeight = jQuery('video').height();
jQuery('#top-content').css({
'height': vidHeight + 'px'
});
var vidPicHeight = jQuery('.video-element').height();
jQuery('#top-content').css({
'height': vidPicHeight + 'px'
});
console.log(vidHeight);
}).trigger('resize');
I have a console log running and it the variable vidHeightis changing as the window resizes, it is just not updating the style.

Try this
var vidHeight = jQuery('video').height();
jQuery('#top-content').css('height', vidHeight);

setting min-height via jquery

This is the code I'm trying to use in order to set the height of a background div to always cover at least the background of the maindiv + the footer I have set up.
var bgheight = $('.maindiv').css("height");
$('#background').css('min-height', bgheight+'75px');
For some reason the code won't even apply to the #background div and I'm starting to run out of ideas.
When I do something like this
var bgheight = $('.maindiv').height();
$('#background').css({'min-height':beheight+'75px'});
The style is applied but the min-height is gigantic, like almost 50000px tall.
Any ideas?

You are making a string concatenation, not a sum.
Try this:
var bgheight = $('.maindiv').height();
$('#background').css({'min-height': (beheight + 75) + 'px'});
To ensure you are not concatenating strings, you can set Number() function.
var bgheight = Number($('.maindiv').height());
$('#background').css({'min-height': (beheight + 75) + 'px'});
OR (two parameters instead of object)
$('#background').css('min-height', (beheight + 75) + 'px');

Get constant browser height and width

I was wondering how I could constantly get the current browser's height and width. Right now, I am using jQuery and have something like this:
var height = window.innerHeight;
var width = window.innerWidth;
This does initially work as it gets the screen when the page is loaded up. However, when the user changes the screen width/height manually, I can't seem to get the current dimensions and the page starts faulting with errors. How should I be checking the dimensions at all times? I've tried googling the answer but I can't seem to find anything applicable, though I'm sure many others have had the same issue (I don't think I'm searching up the right keywords!). Please let me know what I can do!! Thanks!

Use a window.onresize function as well as a window.onload handler to update the width and height variables.
(Resizeable Demo)
var width,height;
window.onresize = window.onload = function() {
width = this.innerWidth;
height = this.innerHeight;
document.body.innerHTML = width + 'x' + height; // For demo purposes
}
Using jQuery objects it would look like this.
(Resizeable Demo)
var width,height;
$(window).on('load resize', function() {
width = this.innerWidth; // `this` points to the DOM object, not the jQuery object
height = this.innerHeight;
document.body.innerHTML = width + 'x' + height; // For demo purposes
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Try this:
$(window).on("resize",function(){
console.log($(this).height() + " " + $(this).width());
});
fiddle

Try this
var width = window.outerWidth;
var height = window.outerHeight;
To resize the current window, use
window.resizeTo(width, height);
You can trigger the resize function using:
$( window ).resize(function() {
//....
});
Hope it helps you

You can use this to detect a change in screen size:
$(window).resize(function() {
height = window.innerHeight;
width = window.innerWidth;
//other code you wish to run on screen size change;
});
This assumes that height and width were declared in a scope that the function has access to. Otherwise make sure to place var before each variable.

Small issue with Sliding DIV code Javascript

Having a slight issue with some code I've written for a simple sliding div on a clients site.
The code should find the height of the div (as the length differs per page), and then set the div to a height of 100px. The issue at the moment is that the full length of the div is visible for half a second before javascript resizes it. Can anyone help me modify my code so that the div's full length is not visible to the user without clicking more info?
Here is the JS:
function heightGet(){
var moreinfoHeight = document.getElementById("moreinfo").clientHeight;
var moreinfo = document.getElementById("moreinfo");
moreinfo.style.height = moreinfoHeight + "px";
moreinfo.style.visibility = "visible";
document.getElementById("moreinfo_button").href="javascript:heightMore(" + moreinfoHeight + ");";
document.getElementById("moreinfo_button").innerHTML="More Info";
heightLess(moreinfoHeight);
}
function heightMore(val){
var moreinfo = document.getElementById("moreinfo");
document.getElementById("moreinfo_button").href="javascript:heightLess(" + val + ");";
document.getElementById("moreinfo_button").innerHTML="Less Info";
moreinfo.style.height = val + "px";
alert(div.height);
/*setTimeout( function() {
// here add the code (or call a function) to be executed after pause
moreinfo.style.height = "100%";
}, 500 );*/
}
function heightLess(val){
var moreinfo = document.getElementById("moreinfo");
document.getElementById("moreinfo_button").href="javascript:heightMore(" + val + ");";
document.getElementById("moreinfo_button").innerHTML="More Info";
moreinfo.style.height = "100px";
}
heightGet is triggered on page load, heightMore is triggered on a button press for more info, and the opposite for heightLess

If I was you, I would add class with {height: 100px} or style to the container "moreinfo", and remove it in the heightMore function and add in the heightLess function. you don't have to search real height of the container if I understood you right.
function heightGet(){
document.getElementById("moreinfo_button").href="javascript:heightMore(" + moreinfoHeight + ");";
document.getElementById("moreinfo_button").innerHTML="More Info";
}
function heightMore(val){
var moreinfo = document.getElementById("moreinfo");
moreinfo.className = '';
}
function heightLess(val){
var moreinfo = document.getElementById("moreinfo");
moreinfo.className = 'shortview';
}
and here is css part
.shortview{
height: 100px;
}
hope it helps