1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Programatically using zoom vs Setting zoom level

Discussion in 'Internet Explorer' started by Jon Brown, Mar 11, 2010.

  1. Jon Brown

    Jon Brown Flightless Bird

    Using IE 7 & 8, I need to supply buttons on a page to allow the user to zoom
    in or out (I know they could simply user the browser to do this but.........
    it’s a long story!!) Experimenting with ways to achieve this, I am having
    difficulty achieving the same level of functionality when programmatically
    applying a zoom as appears available using the browser menu.
    On the very basic webpage below, if I use ctrl (+/-) to zoom the page, the
    page content is resized correctly and everything if fine; However, if I apply
    a zoom level by setting the .style.zoom property programmatically when
    pressing the "Go" button, the zoom occurs but the contained paragraph is not
    resized meaning that the text is now off the page and, despite setting the
    overflow property to "auto" no scrollbar is present.
    Am I omitting a step somewhere? Any help would be much appreciated!!


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <!-- DW6 -->
    <head>
    <!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>

    <script>
    function zoomIE()
    {
    var content = document.getElementById("content");
    document.body.style.zoom = "1.2";
    document.body.style.overflow = "auto";
    content.style.overflow = "auto";
    }
    </script>
    </head>

    <div id="content">
    <h2 id="pageName">Zoom</h2>
    <input name="goButton" type="button" value="go" onclick="zoomIE();" />
    <h3>Feature Title </h3>
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
    molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum
    condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy.
    Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam
    fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio.
    Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent
    taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et,
    tortor. </p>
    </div>

    </div>
    <br />
    </body>
    </html>
     
  2. PA Bear [MS MVP]

    PA Bear [MS MVP] Flightless Bird

    Developer-specific resources include:

    MSDN IE Development Forum (post such questions here instead)
    http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads

    Tip: When posting in Developer forums, always include a link to your web
    site or test pages in your first post.

    IE Developer Center
    http://msdn.microsoft.com/en-us/ie/default.aspx

    Learn IE8
    http://msdn.microsoft.com/en-us/ie/aa740473.aspx

    HTML and DHTML Overviews and Tutorials
    http://msdn.microsoft.com/en-us/library/ms537623.aspx and

    Cascading Style Sheets (CSS)
    http://msdn2.microsoft.com/en-us/ie/aa740476.aspx

    Expression Web SuperPreview for Internet Explorer (free, stand-alone visual
    debugging tool for IE6, IE7, and IE8)
    http://www.microsoft.com/downloads/...FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677

    Expression Web SuperPreview Release Notes
    http://www.microsoft.com/expression/products/Web_SuperPreviewReleaseNotes.aspx

    Validators:
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/


    Jon Brown wrote:
    > Using IE 7 & 8, I need to supply buttons on a page to allow the user to
    > zoom
    > in or out (I know they could simply user the browser to do this
    > but.........
    > it’s a long story!!) Experimenting with ways to achieve this, I am having
    > difficulty achieving the same level of functionality when programmatically
    > applying a zoom as appears available using the browser menu.
    > On the very basic webpage below, if I use ctrl (+/-) to zoom the page, the
    > page content is resized correctly and everything if fine; However, if I
    > apply a zoom level by setting the .style.zoom property programmatically
    > when
    > pressing the "Go" button, the zoom occurs but the contained paragraph is
    > not
    > resized meaning that the text is now off the page and, despite setting the
    > overflow property to "auto" no scrollbar is present.
    > Am I omitting a step somewhere? Any help would be much appreciated!!

    <SNIP>
     

Share This Page