Asked  7 Months ago    Answers:  5   Viewed   39 times

We are using jQuery thickbox to dynamically display an iframe when someone clicks on a picture. In this iframe, we are using galleria a javascript library to display multiple pictures.

The problem seems to be that $(document).ready in the iframe seems to be fired too soon and the iframe content isn't even loaded yet, so galleria code is not applied properly on the DOM elements. $(document).ready seems to use the iframe parent ready state to decide if the iframe is ready.

If we extract the function called by document ready in a separate function and call it after a timeout of 100 ms. It works, but we can't take the chance in production with a slow computer.

$(document).ready(function() { setTimeout(ApplyGalleria, 100); });

My question: which jQuery event should we bind to to be able to execute our code when the dynamic iframe is ready and not just it's a parent?



I answered a similar question (see Javascript callback when IFRAME is finished loading?). You can obtain control over the iframe load event with the following code:

function callIframe(url, callback) {
    $(document.body).append('<IFRAME id="myId" ...>');
    $('iframe#myId').attr('src', url);

    $('iframe#myId').load(function() {

In dealing with iframes I found good enough to use load event instead of document ready event.

Tuesday, June 1, 2021
answered 7 Months ago

you mentioned that you used a jQuery plugin, i don't know if you have tried jQuery waypoints plugin, you can do it using this plugin easily by passing an offset option to the plugin as follows:

// by default your element will be hidden
// call waypoint plugin
$('div').waypoint(function(event, direction) {
    // do your fade in here
}, {
   offset: function() {
       // The bottom of the element is in view
       return $.waypoints('viewportHeight') - $(this).outerHeight();

offset : Determines how far the top of the element must be from the top of the browser window to trigger a waypoint. It can be a number, which is taken as a number of pixels, a string representing a percentage of the viewport height, or a function that will return a number of pixels.

so on the previous example, your div won't fade in unless it's in the middle of the page.

Monday, July 19, 2021
answered 5 Months ago

Seems somewhat similiar to the question here:

jQuery .ready in a dynamically inserted iframe

This way the Iframe element exists in the Dom with the append. Only when you set the Url will it load, by which point you've attached the load function you wish to tag on the end. So for your code

$('#someButton').live('click', function () {

    $('body').append($('<iframe id="myIframe" width="100%"></iframe>'));

    $('#myIframe').load(function () {
        alert('iframe loaded');

Thursday, August 12, 2021
answered 4 Months ago

Quoting John Winkelman's post:

This is a Known Issue for Webkit browsers (Chrome, Safari). Sometimes, when updating an inline element or style, the browser does not redraw/repaint the screen until a block-level change happens in the DOM. This bug most often occurs when there is a lot going on in the page [...]

  • Fix 1:

    document.getElementById('myElement').style.webkitTransform = 'scale(1)';
  • Fix 2 in case the element isn't repainted when scrolling the page:

    document.addEventListener("scroll", function(event) {
        var style = document.getElementById("name").style;
        style.webkitTransform = style.webkitTransform ? "" : "scale(1)";

    This case was recently fixed in Chrome/Chromium.

Monday, August 16, 2021
answered 4 Months ago

Had a little time at hand and tried a jQuery less variant. Doesn't seem to leak anymore according to SIEve.

function pos(obj) {
    var curleft = 0;
    var curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    obj = null;
    return {left:curleft, top:curtop};

function loadPage(url) {
    var y = document.getElementById('container');
    var x = document.getElementById('applicationFrame');
    var p = pos(y);
    if (x.src) {
        var tmp = y.cloneNode(false);
        var tmpIF = x.cloneNode(false);
        tmpIF.src = url;
        tmp.appendChild(tmpIF); = 'absolute'; = 'hidden';["z-index"] = 20; =; = p.left; = "delete"; = "deleteApplicationFrame";
        tmpIF = null; tmp = null;
    setTimeout("document.getElementById('applicationFrame').style.visibility = 'visible'; var i = document.getElementById('deleteApplicationFrame'); i = i.contentDocument || i.contentWindow.document; i.documentElement.parentNode.removeChild(i.documentElement); i=null; i=document.getElementById('delete'); i.parentNode.removeChild(i); i=null;", 500);
    y = null; x = null; p = null;

<div id="container">
    <iframe id="applicationFrame" application="yes" trusted="yes" frameborder="0" src="main.php"/>

Very hard to tell what could possibly be going on without knowing the whole application. Especially IE6 is a with memory leaking.

A few reading links

Understanding and Solving Internet Explorer Leak Patterns

Fixing Leaks

Memory Leakage in Internet Explorer - revisited

Just a thought, AFAIK the behavior when setting src to a different value isn't really specified in the W3C HTML DOM specification or is it (link anyone?)?

I suggest that you set an initial src="main.php" value on the iframe instead of using loadPage('main.php'); and set a name for the iframe.

Ideally your menu items are <a> tags then you could test using <a href="notmain.php" target="nameOfYourIFrame">FooBar</a> instead of the javascript based solution

Friday, September 17, 2021
answered 3 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :