Wednesday, June 11, 2008
Posted on Wednesday, June 11, 2008 10:47:32 AM (Mountain Daylight Time, UTC-06:00)  Comments [1] | 
Categories: Dojo

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...

initial-pos

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.

after-resize

 

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";
        }

Wednesday, June 11, 2008 12:51:05 PM (Mountain Daylight Time, UTC-06:00)
How did you add the VerticalRule programmatically to your slider? I haven't been able to find any good documentation.
Max
Comments are closed.