views:

35

answers:

1

Hi All

I have a UK map made as a flash/swf movie. This map is embeded in a div tag and floated aright in a 2 column layout with a left column, a header and a footer. I want the map to resize itself when the browser is being resized by the user or I want it to be resized as the left column's height increases and decreases. Basically the map should follow the browser's width/height or the left column height. How do I do that?

Many Thanks

+1  A: 

There are many many different ways to skin every cat, but at the very least you need to make sure your SWF content scales to the container size. If it's a fixed size, all bets are off. The real challenge is getting something in the left column to conform to changes in the right column, especially when using just CSS and DIVs. I'm not sure that's possible without some unnatural and complex gymnastics.

A simpler, more direct, and possible old-school method is to just use a TABLE with a single row and two cells as your column structure. Force the table to fit the page using 100% width and height. Then you're guaranteed that the left column will always be the height of the right column. At that point you just need to make sure the SWF container in the right column uses a % for its height.

Another approach is to use javascript to intercept browser resize events and to resize the SWF container when that happens.

jtalarico
Thanks for your answer. Ok let's forget about the left column. I just want the map movie to resize proportionally with the browser, whether the map is 70%, 50% smaller than the browser. As long as it resizes itself and it doesn't break the layout, that's what I'm looking for. A good example is the yahoo map: http://uk.maps.yahoo.com/. Now resize the browser and you'll see that everything resizes itself and there are no scrollbars at tall.
Shaoz