[dbox] problem in dbox resizing

[Steve Lime]

Myunghwa: I played around a bit with this today (sorry for the delay)
and seem to
have it working. Check out (with Firefox):

 
http://maps.dnr.state.mn.us/tools/dbox-dev/example/example_autosize.html

There's an error in my table layout with IE but in theory this should
work there
too but needs more testing. What I did was to update the dbox sync
method
to detect resizing of the underlying anchor element. If the anchor
changes then
dbox will automatically adjust. So the strategy is to manipulate the
size of the
anchor image or div. In this test I tried to use percentages for table
cell sizes
to do that, a poor mans equivalent to your adjustMapsize function.

Coincidentally the reason you were having trouble with your code is you
were
likely just missing one additional call to xClip on the dBox container
object. In 
any event I essentially moved all those "x..." calls into dBox itself.

Steve


>>> myunghwa Hwang <mhwang4 at uiuc.edu> 1/22/2007 2:11 PM >>>
Thank you very much! I'll wait for your next response!

from Myunghwa

On Jan 22, 2007, at 12:26 PM, Steve Lime wrote:

> Hi there: This is something I've been meaning to address. Let me  
> take a
> look with your code and
> try and work up a simple test case on the DNR website. Might take a 

> few
> days though, I have an
> offsite meeting (unfourtunately)...
>
> Steve
>
>>>> myunghwa Hwang <mhwang4 at UIUC.EDU> 1/19/2007 5:45:00 PM >>>
> Hello, list!
>
> I'm trying to make dbox resizable.
> For that, I assigned ids to several components which should have
> fixed sizes,
> then I added a function for recalculating and assigning the dbox
size:
>
>    function adjustMapsize() {
>    	// test just width adjustment
>    	var leftcol_table = document.getElementById("leftcol_table");
>    	var tools_table = document.getElementById("tools_table");
>    	var move_button = document.getElementById("move_button");
>    	var scale_table = document.getElementById("scale_table");
>    	var coords_div = document.getElementById("coords_div");
>    	var measure_div = document.getElementById("measure_div");
>    	var measure_toggle = document.getElementById("measure_toggle");
>    	
>    	var new_width = document.body.offsetWidth -
> (leftcol_table.offsetWidth + tools_table.offsetWidth +
> move_button.offsetWidth*2);
>    	var new_height = document.body.offsetHeight -
> (scale_table.offsetHeight + move_button.offsetHeight*3 +
> coords_div.offsetHeight + measure_div.offsetHeight +
			
>
> measure_toggle.offsetHeight + document.getElementById
> ("ms_url").offsetHeight);
>    	var anchor = document.getElementById("main");
>    	main.width = anchor.width = new_width;
>    	main.height = anchor.height = new_height;
>    	main.anchor = xGetElementById("main");
>    	ms.width = new_width;
>    	ms.height = new_height;
>    }
>
> Then, I added this function to onload and onresize event of window:
>
>    window.onresize = function() {
>
>    	// resize map image
>    	adjustMapsize();
>    	xResizeTo(main.container, main.width, main.height);
>    	main.sync();
>    	xResizeTo(main.image, main.width, main.height);
>    	xMoveTo(main.image, 0, 0);
>    	xShow(main.image);
>    	xResizeTo(main.canvas, main.width, main.height);
>    	xMoveTo(main.canvas, 0, 0);
>      xClip(main.canvas, 0, main.width, main.height, 0);
>      xShow(main.canvas);
>    	ms.draw();
>    	
>      reference.sync();
>      container.sync();
>    }
>
>    window.onload = function() {
>    	
>    	// resize map image
>    	adjustMapsize();
>
>      main.initialize();
>      reference.initialize();
>      container.initialize();
>
>      domouseclick('zoomin');
>
>      // legend setup
>      var legend_xml = get_content(config.dlegend_xml_executable + "?
> map=" + config.mapfile + "&server=" + config.dlegend_server);
>      legend.initialize("legend_container", legend_xml);
>      legend.setHandler(DLEGEND_CLICK, ms.setLayer);
> 	
> 	ms.setLayer('ortho', true);
> 	legend.changeNodeStatus('ortho', true);
>      ms.draw();		
>    }
>
> My problem is that this solution works when I try to reduce the size
> of window,
> but whenever I tried to increase the window size
> the size of something on the top of dbox (which consists of
> container, image, canvas, and something else) does not change,
> so I get white extra space on the right and bottom side of dbox.
> How can I solve this problem?
> Maybe someone already asked this problem, if so please let me know
> which post I should check.
> I hope my explanation of the problem will be understood well.
>
> from Myunghwa Hwang