Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1245
  • Last Modified:

.zoom vs. absolute

I use HTML tables (set to ".style.position:absolute") to act as pop-up message boxes, etc., that display on top of the regular window contents.  This worked fine until I started using "document.body.style.zoom = ..." to resize the page to fit any window.  For some reason, tables set set to "position:absolute" refuse to zoom, and related measurements (from ".clientHeight", "getScrollXY()", etc.) seem strangely incorrect.

Even directly using .zoom on specific elements gives strange results.  But, if I manually use the external zoom control located in the lower-right corner of Internet Explorer, everything (including items set to "aboslute") zoom together correctly.

So, is there a way for Javascript to zoom like the external control, where every size, perportion, and location remain correct even while using "absolute"?
0
RandyTommy
Asked:
RandyTommy
  • 2
  • 2
2 Solutions
 
mreuringCommented:
Using 'zoom' manually through javascript is (in my opinion) very bad form! It's proprietary to internet explorer and more of a hack rather than a solution to anything. Hence your problems with the table not 'zooming' along while it's positioned absolute.

Although I haven't a clue why anybody would still want to write their own zoom-function these days, the most reliable way to do something similar to zoom was to use 'em' as a measurement of your dimensions instead of 'px'.
The essential trick is to define everything in em, width, height and font-sizes. Along with a single line of css to 'level' the playing field:
body * { font-size: 100%; }

Now the fun part is that if you do it right, all you need to do is change the font-size of the body element and everything will grow/shrink along with the change! Lot's of fun and works in any browser after netscape 4 :)
0
 
RandyTommyAuthor Commented:
Thanks mreuring.

The purpose is to get my page to auto-fit the window view area, changing when the window size is changed.

Everything you said above works!  Even HTML tables set to "position:absolute" work correctly.

But I have not found a way to resize the window from javascript.  The below function does not do anything in IE8.

        function Button1_onclick()
        {
            document.body.style.fontsize = '50%';
        }
0
 
mreuringCommented:
Fortunately when you measure the width of the available window and know the width in em's of the content, you can easily determine the correct font-size: available width(in pixels)/content width(in em's) = font-size (in pixels)

Hmmm, resizing the window itsself unfortunately always has to be done in pixels and using the window.resizeTo(width, height) method. (http://msdn.microsoft.com/en-us/library/ms536723%28v=vs.85%29.aspx)

I should warn you that resizing a user window is rather 'rude' and often won't make you any friends :)
0
 
RandyTommyAuthor Commented:
This was a hard question, because Internet Explorer does not seem to have any "perfect" answer.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now