Just a quick note that if you’ve ever run into trouble keeping things positioned correctly in your browser app, take a look at dojo.coords. (ok, the doc is limited, but poke around with FireBug, and it’s pretty easy to see what it does)
Basically this allows you to get the top, left, width, height, x and y for any element on your page. I was having issues with my Dojo slider control’s positioning when added into the Virtual Earth control via map.AddControl. Basically the control loads just fine initially…
But when the browser window is re-sized, the control remains absolutely positioned on the page, rather than relative to the container (the VE control), as can be seen below.
Setting the CSS postition:relative, does not work at all, so the solution was to write a little code that would respond to the browser re-size event, and re-position the control. Hooking to the resize event is very easy with dojo.connect…
dojo.connect(window, ‘onresize’, positionZoomSlider);
Getting the correct position values in order to calculate the correct position was also easy when using dojo.coords… here’s the function that positions my slider.
function positionZoomSlider() {
//This is needed because the dojo slider seems to always be absolutely positioned.
//so we attach this to the browser re-size so when things move around, the slider
//is repositioned correctly.
var control = $get(‘verticalZoomContainer’);
control.style.top = dojo.coords(dojo.byId(‘contentContainer’)).t + 30 + “px”;
control.style.left = dojo.coords(dojo.byId(‘contentContainer’)).l + 20 + “px”;
}
