Question

I’ve written a small lightbox plugin for jQuery (yes, there are several ready made packages — unfortunately, the designer in my co. does not like any of them).

I have one small problem — I am using .load() to load dynamic flash content into the lightbox div. I am appending the div to the DOM, presetting visibility to hidden, and using .outerHeight(true) and .outerWidth(true) to get the dimensions. In internet explorer, I am getting a height of 61px (margin + 1px).

Assumption: contentContainer is already appended to the body dom frag

var remote = $(document.createElement("div"));
remote.css( "margin", "30px" );     
var loadURL = $(this).attr( 'href' );

if( typeof( isImage ) == "undefined" || !isImage ){
    console.log( "Loading " + loadURL );
    contentContainer.append( remote );
    remote.load( loadURL, function(){                   
        contentContainer.css( "left", (currWindow.width/2) - (contentContainer.outerWidth(true)/2) )
            .css( "top", document.body.scrollTop + (currWindow.height/2) - (contentContainer.outerHeight(true)/2) );
        overlay.css( "visibility", "visible" );
        contentContainer.css( "visibility", "visible" );
    });
}

A basic div with explicitly set height and width is what is being loaded into remote.

Any suggestions? I think its something stupid about when I’m trying to calculate the height and width. It worked with a basic image though…

Josh

Answer 1

Try surrounding the contents of the callback in a window.setTimeout with 0 milliseconds. This will wait for the current call stack to unwind before executing. In my experience, this fixes some IE issues with callback timing when the callback executes after the browser event fires, but before IE redraws the window.