Solved

.zoom vs. absolute

Posted on 2011-03-21
4
1,216 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
This was a hard question, because Internet Explorer does not seem to have any "perfect" answer.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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 …

743 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

14 Experts available now in Live!

Get 1:1 Help Now