17 April 2012

Dynamically adjusting JQuery UI dialog box position in IFRAME depending on scrolling the main browser window

In a perfect world there would be no IFRAMEs and all intercommunication would rely on web services and similar technologies. But unfortunately there's still a need sometimes to integate an external page using an IFRAME. The problem I have encountered lately is about showing a simple dialog window within an IFRAME with window being centered relative to the main (parent) window, not an IFRAME. 

As IFRAME has no idea about scrolling the main window, just putting a value 'center won't do any good for us (unless the IFRAME is small enough and will fit the main window in all circumstances). In essence the task is to set coordinates of the dialog window inside an IFRAME adjusted on the scrolling position. This adjustment is formed of scroll position and additional fixed parameter, for example, half of main browser window height (so that the top left corner of the window is set right in the middle of the window. To have the window exactly in the middle we might also need to add half of the whole dialog window height, but that usually is not a problem (because this is fixed and known number). 

All actions are performed inside an IFRAME and we need to access the parent window to obtain the number of pixels scrolled in the main window and here's the catch: we cannot do it unless both main (parent) window and an IFRAME share the same host, protocol and port number. This limitation is set for a reason - to prevent potentially unsafe access by third-party's javascript code. 

To get the scroll position we need the following JQuery statement: 

$(window.parent.document).scrollTop()

and to get the height of the main parent window:

window.parent.window.innerHeight

It's also better to take into account older browsers that might not support innerHeight property, so there's a helper function that will return the height depending on the browser capabilities. 

    function GetHeight() {
        var Height;
        if (typeof window.parent.window.innerHeight != 'undefined') {
            Height = window.parent.window.innerHeight;
        }
        else if (typeof window.parent.document.documentElement != 'undefined'
 && typeof window.parent.document.documentElement.clientHeight !=
 'undefined' && window.parent.document.documentElement.clientHeight != 0) {
        Height = window.parent.document.documentElement.clientHeight;
        }
        else {
            Height = window.parent.document.getElementsByTagName('body')[0].clientHeight;
        }
        return Height;
    }

Finally this is how we use these pieces of data in defining the JQuery UI dialog box: 

    $(document).ready(function () {
        $(".link").click(function () {           
            $("#dialog-confirm").dialog({
                resizable: false,
                height: 200,
                width: 730,
                modal: true,
                position: [200, $(window.parent.document).scrollTop() + GetHeight() / 2]
}); }); });

200 - is just an arbitrary number, the X coordinate that usually is easy to determine. It's either the half of client window width or something else. Anyway, it's usually vertical scrolling that presents a problem; horizontal scrolling is a no-no anyway and should be eliminated. 

As for the link it might be something like: 

<a href="#" class="link" id="mylink" style="position:relative; top:2800px; margin-left:200px;">test</a>


1 comment for “IFrame and JQuery UI Dialog window inside: how to show it centered?”

  1. Vinodkumar Saravana
    Posted 20 ноября 2012 г. at 14:15:47

    Wow thanks man...this is really helpful to me....

Post a comment


RECENT BLOG ENTRIES
30 November 2013
Bigcommerce template editing
How to change content in BigCommerce.com templates: guide for a complete newbie.
Read full story
09 October 2013
What if Fancybox does not work at all
If Fancybox library does not work, this might be due to the conflicts with other JS libraries and not the syntax error.
Read full story
14 October 2012
Fancybox with ASP.NET form on Umbraco
Using ASP.NET form on Fancybox popup to make login window
Read full story

Blog archive

The author of this web-site supports WWF . Please do your part in saving our planet!

Alex’s expertise in developing and maintaining web applications has been invaluable to the College – J. Wittersheim, Director of Information Management and Funding, Bury College