Develop Reference

Allow click to pass through iFrame to content behind it

The closest thing I can find to what I'm trying to do on SO is this, but sounds like this is not a workable solution anymore and it is not specific to iFrames anyway:
Click through a DIV to underlying elements
Basically I have a DIV that gets added to a page that contains an iFrame. The iFrame contents can be minimized so they don't always take up all the space of the iFrame. The iFrame is transparent so that you can still see the web page behind it. I need to be able to click on the elements in the web page behind it, but have had no luck so far.
They have a roughly 400x400 iFrame but when the contents in it are minimized, you can still click on the web page behind it. I tried doing something similar but can't get it to work.
Even in the transparent regions I cannot click on the page behind it. I also tried using pointer-events:none as mentioned in other posts but this does not help. It only disables the elements in the iFrame but has no affect on being able to click through it.
Do anyone know how to achieve this? A way to have a larger iFrame, where the contents in it can be minimized and you can still click on what's behind the iFrame?
UPDATE:
It would appear that this is not possible when using frames.

Have you tried pointer-events: none?
http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

Strategy 1: iFrame Resizer
If you're able to get scripts into both the host page and the page contained within the iFrame, you can use Bradshaw's iFrame Resizer JS.
It will dynamically resize your iFrame to fit its content. Works cross-domain.
The use cases for it include:
You are authoring both the host page, and the iFrame page.
You are authoring either the host page or the iFrame page, and are collaborating with the author of the other page.
I can't tell if your use case meets either of those criteria.
Strategy 2: Overlapping iFrames
Using JQuery, you can toggle the visibility of 2 (or n) iFrames which overlap completely or partially. You can load each iFrame with the same content, or different content. When any iFrame is invisible, you can click through it to the content behind it, whether that's another iFrame, or anything else.
In your application, you would be sizing the 2 iFrames differently: iFrame1="full size", iFrame2="minimized."
In my application (below), the 2 iFrames mostly overlap and have the same content, but I was padding them differently and shifting their position slightly, depending on whether something else on the page was present or absent. I'm also resizing both iFrames dynamically to fit their content using iFrame Resizer (above), but that might not be required for your application.
I recommend using different border colors for your iFrames (below), while you fiddle with their position and size.
I only learned JS like, 5 mins ago, so, my apologies if I've misunderstood your question.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
// This is the Bradshaw resizer script. Required iff you need dynamic resizing.
<script src="[https://MyiFramehost.com/web/embed/js/inline.js]"/></script>
<div id="padded" style="width:100%" >
<iframe id="oos_inline" style="border:solid;border-color:green;width:100%;position:relative;padding:65px 0px 0px 0px;top:-65px;"></iframe>
</div>
<div id="normal"style="width:100%;" >
<iframe id="oos_inline_padded" style="border:solid;border-color:blue;width:100%;position:relative;padding:0px 0px 0px 0px;"></iframe>
</div>
<script>
var iframe_padded = document.getElementById("oos_inline_padded");
var iframe = document.getElementById("oos_inline");
if(document.getElementById("home-page")!=null){
iframe.src = "https://the_embedded_site.com";
$(iframe).show();
$(iframe_padded).hide();
} else {
iframe_padded.src = "https://the_embedded_site.com";
$(iframe).hide();
$(iframe_padded).show();
}
// This starts dynamic resizing. Required iff you need dynamic resizing.
iFrameResize({log:true})
</script>

I think you missed:
myDiv.style.opacity = "0";
myDiv.style.filter = "alpha(opacity=0)"; /* For IE8 and earlier */
BTW, use a CSS class instead of applying CSS via JS. Let me know how it goes.

jQuery/Javascript seems to stop working?

I'm still learning jQuery (1.6 min) and Javascript, but have been quite pleased with what I have been able to achieve, so far, but this problem has me fooled - i've been looking at it for four hours!
I have the following link on a page contained within a (for which the id value is 'NorthWest'):-
<figure><img src="http://localhost:8888/98394.jpg" alt="" border="0"></figure>
which when clicked on, correctly loads content in to a makes the visible. It does not reload the page, simply makes the DIV visible on top of the current content. The Javascript for doing this uses standard jQuery Fancybox.
All works fine, the DIV can be shown and hidden several times, loading different information on each occasion. Now there is a IMG button which allows the user to reload the 'NorthWest' DIV with the latest content - when clicked it executes this code:
$(".RefreshThumb").find("a").click(function(){
$(".RefreshLoader").show();
$("#NorthWest").load("/refreshdata");
setTimeout(RefreshHide,1000);
});
The setTimeout line refers to a small graphic (refreshloader) which is momentarily displayed to advise the user that a refresh of the data is taking place.
Now, take out the $("#NorthWest").load etc.. line and all works fine. Add that line back in, and the popUpSimple link works fine until the IMG button is clicked to refresh the NorthWest DIV, after which the popUpSimple content is loaded as a new page and no longer overlaid - before clicking that the popup overlay works fine no matter how many times you click it.
EDIT: I should point out that after clicking on the IMG button to reload the NorthWest DIV it does so successfully, its only when you then click the popUpSimple link that things go wrong!
What have I done wrong? I'm using Safari and a look at the Web Inspector window after the page has been reloaded rather than loaded into the DIV shows:
<script type="text/javascript">
$(document).ready(function() {
With a message saying Reference Error: Can't find variable $.
Can anyone point me in the right direction .... please!

It sounds like an eventlistener issue, Try using .on('click',function(){} instead of .click(function(){}

Maybe the jquery '$' is being overridden by another JS framework.
Just replace your '$' with 'jQuery' without the single quotes of course.
You may even try using http://api.jquery.com/jQuery.noConflict/
you can add this right after you load the jQuery library for example:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>

Rails help getting javascript loading faster from bottom

I am have that problem, that I got some javascript that shows a flexibg image. It only works if it on the bottom of the page. just before
The problem is that the javascript gets loaded as the last. And I can see the flexi bg image just streching wish is not nice.
My code:
<%= javascript_include_tag 'flexibg.js' %>
</body>
What can I do so that the flexi bg javascript get loaded as the first or faster?
EDIT:
I have moved the javascript at the top of my body tag and it still works. But it is slow as hell.

Ok, to understand your problem you need a basic understanding of how a page loads. The short (not 100% accurate, but good enough) explanation is that the browser goes line by line, starting with the top line of the page. As it hits each script tag, it loads it (and does NOT move on to the rest of the lines until it is done, which is why it is considered best practice to put your script tags at the bottom).
As soon as the browser has (in its opinion) enough to be worth rendering, it starts rendering what it has. Very likely this is what is causing your problem: the browser is initially loading the image, with the wrong dimensions, and only when the JS gets loaded/run do the correct dimensions get set.
To solve this problem, what you have to do is hide the entire page initially, and then show it once the page has been loaded. Basically you want to do something to the effect of:
<script src="yourFile.js"/> <!-- This could go at the end -->
<body id="theBody" style="display:none"> <!-- rest of document --></body>
<script>document.getElementById("theBody").style.display = "";</script>
This way, the browser will hit the BODY tag, and subsequent content, but it won't render any of it because of the display:none style. Then, when the browser gets down to the end, it will hit the script tag that removes the display:none style, showing the page.
That's just a quick example, and some details might be off (I don't think script tags are allowed after the body tag, for instance), but hopefully you get the idea. If not, comment and I'll try to explain further.

Running JavaScript function before page load (setting background of appropriate size)

I've got an image background which content I want to be always visible, no matter what is the user's resolution. Therefore, I want to be able to determine what is the resolution and set appropriate background image file before page loads, on the very beginning. Is it possible somehow?

The earliest point at which you can run a Javascript function with access to the DOM (without waiting for page load) is by placing a <script> tag right after the opening <body> tag.
Scripts inside the <head> will run before this occurs, but there won't be access to the elements on the page.
Try this code
<body>
<script type="text/javascript">
alert("Some elements shouldn't even be visible when this shows");
</script>
... rest of the page
</body>
See this example with some Gangsta Lipsum text.

Check this article on getting screen resolution in Javascript: http://andylangton.co.uk/articles/javascript/browser-screen-resolution/
Script tags execute inline if you don't do anything special to defer them (and deferring script execution is not supported on all browsers). This means a script tag nested just inside the body tag will be executed before the rest of the body loads. You could have your script detect the screen resolution and set the background image for the body right there.

Using a JavaScript framework like MooTools you can utilize the DomReady event instead of onLoad (which waits for all image elements to load) you can fire an event when the page has loaded.
Alternatively with CSS you can position absolute top left and width:100% to win the day. :O

I realize you're specifically asking about JavaScript, but there's a pretty decent technique for doing this with CSS (and optionally a little JavaScript) described at the CSS Tricks site.

Dynamically Resizing an Iframe

I can see that this question has been asked several times, but none of the proposed solutions seem to work for the site I am building, so I am reopening the thread. I am attempting to size an iframe based on the height of it's content. Both the page that contains the iframe and it's source page exist on the same domain.
I have tried the proposed solutions in each of the following threads:
Resize iframe height according to content height in it
Resizing an iframe based on content
I believe that the solutions above are not working because of when the reference to body.clientHeight is made, the browser has not actually determined the height of the document.
Here is the code I am using:
var ifmBlue = document.getElementById("ifmBlue");
ifmBlue.onload = resizeIframe;
function resizeIframe()
{
var ifmBlue = document.getElementById("ifmBluePill");
var ifmDiv = ifmBlue.contentDocument.getElementById("main");
var height = ifmDiv.clientHeight;
ifmBlue.style.height = (ifmBlue.contentDocument.body.scrollHeight || ifmBlue.contentDocument.body.offsetHeight || ifmBlue.contentDocument.body.parentNode.clientHeight || height || 500) + 5 + 'px';
}
If I debug the script using fire debug, the client height of the iframe.contentDocument's main div is 0. Additionally, body.offsetHieght, & body.scrollHeight are 0. However, after the script is finished running, if I inspect the DOM of the HTML iframe element (using fire debug) I can see that the body's clientHeight is 456 and the inner div's clientHeight is 742. This leads me to believe that these values are not yet set when iframe.onload is fired. So, per one of the threads above, I moved the code into the body.onload event handler of the iframe's source page. This solution also did not work.
Any help you can provide is much appreciated.
Thanks,
CJ

DynamicDrive has such a script, which I think does what you're asking for.
There's also a newer version now.
2011 update:
I would strongly recommend using AJAX over something like this, especially considering that a dynamically resizing iframe only works across the same domain.
Even so, it's a bit iffy, so if you absolutely must use AJAX over standard page loading, you really, really should use things like history.pushState (and have standard page loading as a fallback for browsers that don't support it). There's a jQuery plugin which handles this stuff for you, written by a GitHubber, called pjax, which they use only for repo navigation.

you moved the handler? maybe you should move the function to the inner frame as well, so that when you grab height values you reference the body directly rather than frame object... then call a parent.set height function
another trick, call function after settimeout of 10 msecs
i remember I had that problem once but I used IE's getBoundingClientRect() to get height of content, check mozilla developer center for something similar, this is just a hint, i did not research it
on another note, what is ifmBluePill? is it the iframe? or a div inside of it? why do you reference "contentDocument" of a div?

By the way, DynamicDrive improved their script to always resize even if the iframe contents change: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm
From their page:
This is version II of the original
Iframe SSI script, which like the
original script lets you seamlessly
display external content on your page
via an IFRAME. It does this by
dynamically resizing the IFRAME to be
the height of the page contained
within it, eliminating any possible
IFRAME scrollbars from appearing while
snugly showing the entire external
content. Think of it as SSI (server
side includes) emulated using DHTML!
This script works in both IE5+ and
NS6+, and for other browsers, supports
the option to either completely hide
the iframe in question or display it
using its default height.
Now, this script differs from the
original in that you can load
additional documents* into the IFRAME
even after the page has loaded, and
the IFRAME will dynamically adjust its
height to fit the new document. So use
this script if you need to not only
display external content via the
IFRAME tag, but intend to change this
content after the page has loaded.