Solved

.zoom vs. absolute

Posted on 2011-03-21
4
1,217 Views
Last Modified: 2013-11-11
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
Comment
Question by:RandyTommy
  • 2
  • 2
4 Comments
 
LVL 17

Accepted Solution

by:
mreuring earned 500 total points
ID: 35191433
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
 

Author Comment

by:RandyTommy
ID: 35194230
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
 
LVL 17

Assisted Solution

by:mreuring
mreuring earned 500 total points
ID: 35194890
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
 

Author Closing Comment

by:RandyTommy
ID: 35310117
This was a hard question, because Internet Explorer does not seem to have any "perfect" answer.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now