Flex - How do I get the absolute X and Y coordinate including HTML offset?

Question

Hey everyone,

I am calling a JS function through the ExternalInterface using Flex which requires the absolute X and Y coordinates to create a pop-up menu. The Flex application is displayed on the center of an HTML page, therefore there is an HTML X and Y offset to consider.

I have tried using the LocalToGlobal and ContentToGlobal functions, but these are just giving me the X and Y coordinates relative to the Flex application, it is not considering the HTML X and Y offset of having the Flex app in the center of the page or varying different screen resolutions.

Is the best approach to retrieve the HTML X and Y offset using JavaScript? Is there a Flex function I can use that provides the absolute X and Y coordinates based on the HTML page?

Thanks!

Answer 1

If I am understanding you correctly, it sounds like:

• You have a small Flex App in the center of an HTML page
• Upon some event, you want to create an HTML popup (new browser popup window).
• That popup should be centered within the HTML page.

If that's correct, you don't need to use localToGlobal or globalToLocal; you're just looking for the browser viewport bounds. Here is a method I am currently using to place items in relation to the browser bounds (all of this is javascript):

function getBrowserBounds()
{
        var size = [0, 0]; 
        if (typeof window.innerWidth != "undefined") { 
            size = [window.innerWidth, window.innerHeight];
        } 
        else if (typeof document.documentElement != "undefined" && typeof document.documentElement.clientWidth != "undefined" && document.documentElement.clientWidth != 0) {
            size = [document.documentElement.clientWidth, document.documentElement.clientHeight]; 
        }
        else {
            size = [document.getElementsByTagName("body")[0].clientWidth, document.getElementsByTagName("body")[0].clientHeight]; 
        }
        var bounds = null;
        if (navigator.userAgent.indexOf("MSIE") != -1) // Internet Explorer
            bounds = [window.screenLeft, window.screenTop, size[0], size[1]];
        else
            bounds = [window.screenX, window.screenY, size[0], size[1]];
        var width = bounds[0] + (bounds[2]/2);
        var height = bounds[1] + (bounds[3]/2);
        return bounds;
}

That returns the bounds of the browser's viewport. From there, you can create a popup that is centered within the browser, wherever the browser is within the laptop/desktop screen bounds, using this:

function centerPopup(windowHeight, windowWidth, windowName, windowUri)
{
    var bounds = getBrowserBounds();
    var centerWidth = bounds[0] + ((bounds[2] - windowWidth) / 2);
    var centerHeight = bounds[1] + ((bounds[3] - windowHeight) / 2);

    newWindow = window.open(windowUri, windowName, 'resizable=0,width=' + windowWidth + 
        ',height=' + windowHeight + 
        ',left=' + centerWidth + 
        ',top=' + centerHeight);

    newWindow.focus();
    return newWindow.name;
}

Let me know if that works.

Best, Lance

Answer 2

@viatropos Can we get it done without using window.open(). As i am having an application with height 50 at the top of the browser and want a pop up to open in the middle of the browser .and i want a pop up so i dont have a url to be passed too