Solved

.zoom vs. absolute

Posted on 2011-03-21
4
1,218 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

776 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