The layout is header, side menu, content area. Side menu constant width, content area resizes with browser.
Virtual Earth page fills the content area. I add a mouse click event and set the X,Y of the modal popup to the x,y where the user clicked in the map. The modal popup appears exactly where it should, but if you click on the "drag" label, it jumps to the right and down. My guess is because its within the master_content div which has position:absolute.
I've stepped through the code, so here's an example of the symtom. In the startDragDrop, mousePosition is (717, 286). Then the drag visual is FORCED to absolute positioning (I don't know why it backs up originalPosition). The startingPoint is set to the mousePosition, (717, 286). scrollOffset is 0, but because abolute positioning was forced, this gets executed:
dragVisual.startingPoint =
this.subtractPoints(dragVisual.startingPoint, $common.getLocation(dragVisual));
Now startingPoint is (49, 25). I step into the drag function where it subtracts the startingPoint from the mousePosition, leaving position = (668, 261). Then it sets the position ala:
$common.setLocation(this._activeDragVisual, position);
And the modal popup jumps.
Pasted below is the relevant sections of my code. You'll notive an empty <div style="position:fixed;top:0px;left:0px"></div>. If you wrap the popup panel with this div, then the jump on drag doesn't occur, but the popup doesn't appear in the right position on right click! There's probably ways of getting around it by tracking positions manually, but I'm fairly new to asp.net/ajax/javascript/web dev in general so I prefer simple solutions. Any help is much appreciated.
MasterPage.master (relevant portions):
<body id="MasterBody">
<form id="MasterForm" runat="server">
<asp:ScriptManager runat="server" ID="MasterScriptManager" />
<div id="master_body">
<div id="master_header">
</div>
<div id="master_menu">
</div>
<div id="master_content"><asp:ContentPlaceHolder id="phContent" runat="server" />
</div>
</div></form>
</
body>
VirtualEarth.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager sm = (ScriptManager)Master.FindControl("MasterScriptManager");ScriptReference sf = new ScriptReference("http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6");
sm.Scripts.Add(sf);
}
VirtualEarth.aspx
<
asp:Content ID="Content3" ContentPlaceHolderID="phContent" Runat="Server">
<div id="map" style="position:absolute;width:100%;height:100%;"></div>
<script type="text/javascript">var map = null;var defaultLatLong = null;
function showPopup(event)
{
if(event.rightMouseButton)
{
var x = event.mapX;var y = event.mapY;
var pixel = new VEPixel(x, y);
var latlong = map.PixelToLatLong(pixel);var popupLabel = $get('PopupLabel');
popupLabel.innerText =
"(" + latlong.Latitude.toFixed(3) + ", " + latlong.Longitude.toFixed(3) + ")";
var popupBehavior = $find('PopupBehavior');
popupBehavior.set_X(event.mapX);
popupBehavior.set_Y(event.mapY);
popupBehavior.show();
}
}
function hidePopup(event)
{
var popupBehavior = $find('PopupBehavior');
popupBehavior.hide();
}
function LoadMap()
{
defaultLatLong = new VELatLong(43.4639, -80.5222);map = new VEMap('map');
map.LoadMap(defaultLatLong, 10, VEMapStyle.Road);
// The onclick event to call the callPopUp functionmap.AttachEvent("onclick", showPopup);
}
Sys.Application.add_load(LoadMap);
</script>
<asp:Panel ID="PopupPanel" runat="server" CssClass="popup" style="display:none;">
<asp:Panel ID="PopupDragHandle" runat="server" Style="cursor:move;">
ModalPopup (click me to drag)
</asp:Panel>
<span id="PopupLabel" style="text-align:center;"></span>
<hr />
<asp:Button ID="OkButton" runat="server" Text="Ok" />
</asp:Panel>
<asp:Button runat="server" ID="hiddenControlForPopup" style="display:none"/><act:ModalPopupExtender ID="Popup" runat="server" OkControlID="OkButton"
TargetControlID="hiddenControlForPopup" BehaviorID="PopupBehavior"
PopupControlID="PopupPanel" BackgroundCssClass="popup_background"PopupDragHandleControlID="PopupDragHandle" RepositionMode="None">
</act:ModalPopupExtender>
<div style="position: fixed; top:0px; left:0px;">
</div>
<script type="text/javascript">
// The following snippet works around a problem where FloatingBehavior
// doesn't allow drops outside the "content area" of the page - where "content
// area" is a little unusual for our sample web pages due to their use of CSS
// for layout.function setBodyHeightToContentHeight() {document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) + "px";
}
setBodyHeightToContentHeight();
$addHandler(window, "resize", setBodyHeightToContentHeight);
</script>
</
asp:Content>
StyleSheet.css
*
{ margin: 0; padding: 0; border: none; }
html
{ overflow: hidden; }
body
{
overflow: hidden;
width: 100%;height: 100%;
background-color: #EEEEEE;
}
/* Master Page Layout */
#master_body
{
}
#master_header
{
border: solid 1px;
position: absolute;top: 0px;
left: 0px; width: 100%;
height: 80px;overflow: hidden;
}
#master_menu
{
border: solid 1px;
position: absolute;top: 100px;
left: 20px;bottom: 20px;
width: 200px;overflow: auto;
}
#master_content
{
border: solid 1px;
position: absolute;top: 100px;
left: 240px;right: 20px;
bottom: 20px;overflow: auto;
color: #666666;
}
.menu_header
{
width: 100%;
height: 25px;background-color: #F5F5F5;
font-weight: bold;
}
.menu_content
{
background-color: #E8E8E8;
}
/*Modal Popup*/
.popup_background {
background-color:Gray;filter:alpha(opacity=50);
opacity:0.5;
}
.popup
{
background-color: #ffffdd;
border-width: 3px;border-style: solid;
border-color: Gray;padding: 3px;
width: 250px;
}