Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

.zoom vs. absolute

Posted on 2011-03-21
4
Medium Priority
?
1,241 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 1500 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 1500 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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 embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

885 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