Friday, 8. August 2008
displaying popup around mouse on some event clicked in the container without being clipped off by the screen

There might be the cases when you want to show a popup around your mouse on events such as mouseDown, dropDrop, mouseClick. The problem one can face while doing that is the popup can get clipped off at the edge of the screen if you simply position the popup based on the coordinates of the mouse without any extra measures. Have a look at the following code:

PopUp.mxml

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    width="300" height="50"
    styleName="customPopUp"
    showCloseButton="true"
    close="handleClose(event)"
    headerHeight="4"
    >

    <mx:Text width="100%" height="100%" text="This is a test popup"/>

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            import mx.events.CloseEvent;

            private function handleClose(evt:CloseEvent):void {
                PopUpManager.removePopUp(this);

            }
        ]]>
    </mx:Script>
</mx:TitleWindow>
main.mxml
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" click="showDetail(event)">
    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;

            private const POPUP_OFFSET:int = 10;

            private function showDetail(evt:MouseEvent):void {
            	
                var popup:PopUp = PopUp(PopUpManager.createPopUp(this, PopUp,false));
				
		var tempX:Number = evt.currentTarget.mouseX + POPUP_OFFSET;
		var tempY:Number = evt.currentTarget.mouseY;
				
				
                popup.x = tempX;
                popup.y = tempY;
            }
        ]]>
    </mx:Script>
</mx:Application>

Demo showing the problem:





What you can notice here is whenever you click at the edge of the screen especially on the right side, the title window gets clipped off. Its because i simply get the mouse coordinates and place the popup at that coordinates with some offset in the x direction. To adjust the coordinates of the popup such that it will appear in the screen no matter where you click the mouse, you have to keep into consideration the application screen width and height. How? Have a look at the code snipped below:

var applicationWidth:Number = application.width;
var applicationHeight:Number = application.height;
				
var popupWidth:Number = popup.width;
var popupHeight:Number = popup.height;
				
if((tempX + popupWidth) > applicationWidth){
     tempX = tempX - POPUP_OFFSET - popupWidth;
}
				
if((tempY + popupHeight) > applicationHeight){
	tempY = tempY - popupHeight;
}
Here i have added coordinates of mouse on which click occurs with the width and height of the popup and see they are greater than the width and height of the application screen which i can get from the expressions application.width and application.height. If any or both of them are greater, then i adjust the position of the popup such that it will all be in the screen. Suppose x coordinate of mouse on which click occur together with the width of the popup as well as offset value is greater than width of the application screen, then it means your popup will gonna clipped off on the right side of the screen. So what i did was i moved the x positon of the screen left by the width of the popup plus the offset from the x coordinate of the mouse where click occured.

Well, you can adjust the code to localize the popup within any container of your screen taking into account the width and height of the container along with the widht and height of the popup as well as the coordinates.

Demo :





... comment