ZoomIn/ZoomOut with positing of the controls

Question

hi, i am using zoomin property of JavaScript to zoom page background image and all its controls(i.e text boxes). but while zooming the position of the controls got disturbed. any body can help me to fix this issue

Thnaks

Answer 1

First off, there is no "zoomin property of JavaScript", so there's your first problem ;-) There is however an Internet-Explorer-only (ie. Microsoft garbage) CSS property called "zoom", which you can read more about here: http://reference.sitepoint.com/css/zoom

As you'll read at that site "The content surrounding an element that has zoom applied will reflow to account for the resizing that will occur when zoom is set to a value other than normal.". In other words, the fact that "the position of the controls got disturbed" is actually expected; there is no way to "zoom" (via that CSS property at least) without disrupting the rest of your layout.

The one thing that might work is if you were to set "position:absolute" on all of the stuff you plan to "zoom in" on. Doing this will require you to rework your layout, but in theory it should allow you to change those elements (either via normal means like their height and width properties, or via strange stuff like zoom) and not have them affect the layout of anything else (as absolutely positioned elements are not supposed to affect the layout of anything else on the page).

Hope that helps.