Dynamic height of iframe - javascript

I am currently working on an existing site that uses iframes(sigh!), these are pretty painful to work with and I'm having problems getting the height of the iframe to scale with the height of the HTML content.
I've tried a few different script snippets that floats around on the interwebs, but none of them have worked for me. I really want to use jQuery to do this, but that's not an option because IT wants to keep the size of the pageload down.
Does anyone know of good way to do this, in a way that works on both FF and IE 6+?

You should just be able to simply set the height and the width parameters - since these are both valid attributes of the iframe dom element.
function resize(width, height) {
var frame = document.getElementById('my_iframe');
frame.width = width;
frame.height = height;
}
Of course, this only applies if you are attempting to resize the iframe from it's parent element (the document with the actual iframe tag). If you are trying to resize the iframe from within the iframe (the document the iframe loads) you will need to call a public function of the parent element to perform the resize.
In iframe:
parent.resize(600, 800);

Related

Force a refresh of masonry grid

I have a script that is creating a grid, and the grid elements are "re-positioned" every time the viewport width is changed. I don't have access to the script, nor did I write it. I think it's a Masonry grid.
I'm dynamically changing the content of the grid, so I need to somehow "refresh" (re-calculate) the grid without refreshing the page. On mobile I did this by changing the "initial-scale" meta tag (then resetting it) to force the grid to update. However the viewport tag is ignored on desktop, so I don't know how to actually make the browser think that page dimensions are changed and force a refresh on the grid.
Any ideas are appreciated, thanks.
Depending on how the script is setup you may be able to simply trigger the resize event causing it to recalculate based on the current size. If the script is actually tracking the size and checking for changes then you will need to find the best way to force the script to perform it's grid recalculation, which means examining the script. It might be as simple as changing the value of the variable where the script is storing the previously recorded viewport width right before you trigger the resize event.
FYI: If the script is loading on your page then you do have access to the script.
window.addEventListener("resize", function(){
// Resize event listener from masonry script
console.log("Masonry grid resized for width "+window.innerWidth);
});
// If using jQuery
$(window).trigger("resize");
// Plain JS version
window.dispatchEvent(new Event('resize'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If the masonry script is good it may have an API feature to do what you need, however I think you'd explore that already.
Alternatively...
Option #1: Modify a parent container
See if you can force a refresh by simply temporarily modifying a parent container. For example, increase container width by 1 pixel for an instant, and return back to the original width.
Option #2: Find the existing listener; find the functions
The existing script probably has a listener + actions for when the viewport changes size (as you describe happening). Inspect the script and find that listener, and see what it's running inside. It'll have some function(s) to calculate and render the grid, and you'd want to call those same functions in your own data-update function.
To find that listener, do a find for "resize", see what comes up.
Here's how a vanilla JS resize listener may look like:
var screenWidth = document.documentElement.clientWidth;
resizeRefresh(screenWidth);
function resizeRefresh(width) {
window.addEventListener("resize", function(){
newWidth = document.documentElement.clientWidth;
if (newWidth != width) {
width = newWidth;
// do stuff
}
}, true);
}

Browser action height won't reset

I am working on an extension that will give you a response based on your text, this works and is good and all, but the height of the browser action won't reset.
To try to fix this, I have attempted to resize the window using window.resizeTo and tried to manually set the height of both 'html' and 'body' using jQuery. Nothing has worked. Is this a bug with Google Chrome or am I doing something wrong? This does not make it work, as it stays at the same size.
As you can see in the pictures, the window starts out perfectly sized and then I enter a question and go back to the window being larger than it was initially.
The popup can't become smaller than its content and/or CSS allows.
Find the element and/or CSS rule that occupies the full height by inspecting the popup (right-click it and choose Inspect popup), point over various elements inside <body> to see them highlighted and their actual height displayed. If all the elements are smaller than the popup it could only mean that you have a CSS rule on <body> or <html> that specifies the minimum height. If possible, remove that rule from the CSS or override it.
The problem in your case was a CSS rule html {min-height: 100%} in one of the 3rd party styles.
Set both height and min-height for body and html, for example like this:
document.body.style.height = '0px';
document.body.style.minHeight = '0px';
document.documentElement.style.height = '0px';
document.documentElement.style.minHeight = '0px';
Or use 'auto' instead of '0px'.

Javascript: Is it safe to refer to the <html> DOM-node?

Working in an environment where only css-selectors are available for retrieving elements I want to obtain the element in the DOM which covers the whole browser-window. Using developer tools I found out that <body> has some margin in my case which makes it unsuitable for my requirements.
I further discovered that the <html> element covers the whole area of the browser-window. Is it safe to use that DOM-node when it is about the document properties? I.e. getting the width/height for example?
Does by any chance <html> correspond to what is referred to as document in javascript?
EDIT: Side note on the setup:
I'm working with interns wrapped WD version and want to coordinate mouse movements relative to the document. I was aiming for using a method like selectByCssSelector to coodinate mouse movements with respect to that selected element. Working with the <html> node here seems to work out so far. I just never touched the <html> node before and never saw anyone else do, that is why I wanted to be assured that it is not bad using that node.
The document object is a DOM HTML object so, yes, it does correspond to the <html> tag, but not in the way you think. It is not like a <body> or <span> tag. It tells the browser that the following code or information is HTML. Just like how <?php tells the server that there is PHP code and <script type="text/javascript"> tells the browser that there is Javascript code. For more information on that, check out this page.
If you don't want to get the width and height of the body, you can use window.innerWidth and window.innerHeight. This should get the height and width of the entire window (excluding any scrollbars or toolboxes).
You can also use documentElement to get the width and height of the entire document.
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
This may be the final answer that you are looking for, but you can also find the width and height of the entire document by using document in jQuery.
var width = $(document).width();
var height = $(document).height();
The html represents all markup and content in the document, but it does not correspond to the document object. Instead, it appears as its property, document.documentElement (though it can be referred to in many other ways, too, e.g. document.children[0]).
As you note, the body element may have a margin, and by default it has a 8px margin on all sides. Thus, instead of it, the html element is the one you should refer to as corresponding to the entire viewport in the browser window, assuming that you let the dimensions of the html element default to that. You can get the dimensions as document.documentElement.clientWidth and document.documentElement.clientHeight.
However, for historical reasons, by CSS definitions, the background of the html element always covers the entire canvas even if the element has been set to smaller dimensions. You can see this if you set both a background and a border on it; the background may extend outside the border. Moreover, the CSS spec also specifies that if no background set for html, the background of body is used instead.

How change Height of iframe dynamicly when different pages loaded in it , by javascript

I want a JavaScript code that change iframe height as well as the iframe's content's height is changed.
I don't want to calculate the height just when the main page has loaded, the iframe content has some elements loaded with Ajax and changes without refreshing the whole page, therefore the height of content changes dynamically without reloading. I want some way to dynamically calculate the height of iframe's contents and change the height attribute of iframe itself.
Is it possible?
The code should look something like this:
function resizeFrame(f) {
f.style.height = f.contentWindow.document.body.scrollHeight + “px”;
}
You can find an example to this URL:
http://www.mattcutts.com/blog/iframe-height-scrollbar-example/

JavaScript - Is it possible to get height from div in separate page?

I'm wondering, is it possible to collect the height of a specific div container from a separate page with JavaScript? I'm using jQuery btw and I'm in need of comparing heights of div containers.
Edit: To clarify a bit more, I load content from a specific div in a separate page using jQuery. This content is faded into a different container with dynamic height. But in the small fraction of time before the content arrives, it shrinks down to it's min-height.
What I've done so far is collecting the height of the container before and after the load. But it only works after I've loaded content once. Because I don't have the height before it's been loaded the first time.
If the relationship between the pages is opener and [popup|child] window, then yes.
If not, you are going to run into a security wall. (unrelated pages should not have access to each other)
So, if the "other" page is a popup window that your page launched, or a child iframe that your page "launched", then yes.
I would use the jQuery .height() method to obtain the height, but how you get the object is up to you (depends on what attribute info you have etc.)
//get from popup
var otherDiv = popupWinRef.document.getElementbyId('id');
//get from iframe
var otherDiv = window.frames[frameIdOrIndex].document.getElementById('id');
alert($(otherDiv).height());
Well, you can't get it until AFTER it's loaded via jQuery. Then you need to make sure you're not having a conflict between two divs with the same ID.
From your comments it sounds like you are using ajax to load content from another page, you'll likely have the load div hidden... So I would position the loading div absolutely out of the viewport but not hidden. then get the height of your desired div but make sure you access it using the loading div and your desired div... something like this:
#divToLoadContent { position: absolute; left: -99999em; top: 0; } /* don't hide this div */
Script
var height = $('#divToLoadContent #myDesiredDiv').height();

Categories