Dialog Widget, iframes and IE
I am currently doing some pre-development work on a site for a family member. One of the things I want to do on the site is to display a dialog containing an iframe with search results from Whereis.com so that directions can be printed for people wanting to find the business.
I want this in a modal dialog so that users do not get moved away from the site.
Loading the iframe into the dialog is not a problem, although the way IE (6, 7 and 8) handle that during the document load is another issue (to do with script errors generated from the remote site - out of my control). I have got around the script error problem by inserting the iframe html into the element to be targetted by the dialog after a button click and immediately before the dialog is instantiated.
In FF, Opera, Chrome and Safari the dialog with contained iframe works as I expected (centered in the viewport).
The code to do this is:
- $("#ypbutton").click(function(){
var $ypr = $("#ypresults");
$ypr.html('<iframe frameborder="0" src="http://www.whereis.com/qld/keperra/1028-samford-rd" id="ypiframe" name="ypiframe" width="1000" height="500"></iframe>');
$ypr.dialog({autoOpen:true,title:'Whereis Map',height:550,modal:true, width:1100, position:'center'});
return false;
In IE (6,7, & 8) the iframe loads in the dialog but then the viewport scrolls down until the bottom of the dialog title is positioned at the top of the viewport.
The repositioning of the viewport has something to do with the iframe - if I use some simple text in the dialog target element then this does not occur.
I have just about torn what is left of my hair out trying to overcome this - without success (either with the hair or the problem).
A live example of this can be seen at http://pns.mjrspot.com/iframetest.php
I'm using jQuery 1.4.2 sourced from Google APIs and a custom download of jQuery UI 1.8RC3 (the customization is theme related).
I'd appreciate any insight into why I'm getting this behavior in IE.
Thanks
Michael