www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Page auto-zoom script to fit with no scrollbars

  1. #1
    Join Date
    Jul 2011
    Posts
    5

    Page auto-zoom script to fit with no scrollbars

    To everybody who's interested,
    here is a nice cross-browser script which will zoom the page in case it is
    designed for a minimum resolution. The script will zoom the page to fit the width of the window so that the user does not have to scroll the page to the right or to the left.

    minW is the minimum width for your homepage to look good.
    divWrap is a DIV with which you should wrap your entire homepage.

    This script will also work when the window is resized.

    <script type="text/javascript">
    var minW = 1200;

    $(function () {
    CheckSizeZoom()
    $('#divWrap').css('visibility', 'visible');
    });
    $(window).resize(CheckSizeZoom)

    function CheckSizeZoom() {
    if ($(window).width() < minW) {
    var zoomLev = $(window).width() / minW;

    if (typeof (document.body.style.zoom) != "undefined") {
    $(document.body).css('zoom', zoomLev);
    }
    else {
    // Mozilla doesn't support zoom, use -moz-transform to scale and compensate for lost width
    $('#divWrap').css('-moz-transform', "scale(" + zoomLev + ")");
    $('#divWrap').width($(window).width() / zoomLev + 10);
    $('#divWrap').css('position', 'relative');
    $('#divWrap').css('left', (($(window).width() - minW - 16) / 2) + "px");
    $('#divWrap').css('top', "-19px");
    $('#divWrap').css('position', 'relative');
    }
    }
    else {
    $(document.body).css('zoom', '');
    $('#divWrap').css('position', '');
    $('#divWrap').css('left', "");
    $('#divWrap').css('top', "");
    $('#divWrap').css('-moz-transform', "");
    $('#divWrap').width("");
    }
    }
    </script>

  2. #2
    Join Date
    Jul 2011
    Posts
    5

    Forgot to mention

    I forgot to mention that the divWrap should have style="visibility: hidden" to prevent flash of unstyled content at the beginning.

  3. #3
    Join Date
    Sep 2011
    Posts
    2

    Hello

    It is very interesting idea. Can you tell me how to use it.... Thanks!

  4. #4
    Join Date
    Jul 2011
    Posts
    5

    How to use the script

    Copy this script to your webpage. You can also copy it without the <script></script> tags to a seperate file and use <script src="zoom.js"></script> (for this to work, save it as zoom.js).

    Make sure you also reference JQuery before the script:

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    Put a DIV around the entire content of the page, like this:

    <body ...>
    <div id="divWrap">
    .
    .
    Your page body here
    .
    </div>
    </body>

    In the script I gave, adjust minW in the beginning (first line of code in the example sets it to 1200 pixels) to be the minimum width for the page to look fine, less than that it will look warped or deformed.

    Now you have a nice script that will zoom the page whatever browser size and screen resolution is presented, preserving the page layout and design.

    If you would like every page of the portal to use it, then (in ASP.NET) put it in your master page, wrapping the <div> around the <asp:ContentPlaceHolder> tags in the body. Or (In DotNetNuke) add it to your skin, wrapping the <div> around the entire HTML (or ASCX) of the skin including all panes. Of course you can also add it in PHP using includes or whatever other method you use to create a consistent look to the site.

  5. #5
    Join Date
    Jul 2011
    Posts
    5
    I forgot to mention: The script goes in the <head> tag, before referencing JQuery.

  6. #6
    Join Date
    Jul 2011
    Posts
    5
    And declare the <div> as follows instead of what is written:

    <div id="divWrap" style="visibility: hidden">
    .
    .
    .
    </div>

  7. #7
    Join Date
    Sep 2011
    Posts
    2
    Nice! Thank you very much!

  8. #8
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    slightly optimized ( you dont have to do all those .css() seperately)

    Code:
    var minW = 1200;
    
    $(function () {
    CheckSizeZoom();
    $('#divWrap').css('visibility', 'visible');
    });
    $(window).resize(CheckSizeZoom);
    
    function CheckSizeZoom() {
    if ($(window).width() < minW) {
    var zoomLev = $(window).width() / minW;
    
    if (typeof (document.body.style.zoom) != "undefined") {
    $(document.body).css('zoom', zoomLev);
    }
    else {
    // Mozilla doesn't support zoom, use -moz-transform to scale and compensate for lost width
    $('#divWrap').css({
    	"-moz-transform" : 'scale(" + zoomLev + ")',
    	width : $(window).width() / zoomLev + 10,
    	position : 'relative',
    	left : (($(window).width() - minW - 16) / 2) + "px",
    	top : "-19px"
    });
    }
    }
    else {
    $(document.body).css({
    	zoom : '',
    	position : '',
    	left: "",
    	top: "",
    	"-moz-transform" : "",
    	width : ''	
    });
    }
    }

  9. #9
    Join Date
    Nov 2011
    Posts
    3

    This is just what I've been looking for!

    For a while I've wanted to be able to automatically fit the width of a website to the browser window, just as in a pdf, on a smartphone and in the Chrome plugin Zoomy (https://chrome.google.com/webstore/d...mdgfkjimojblie).

    But unfortunately I have very little code knowledge and can't make the script work :/ I have set up a test page here: http://fitwidthtest.comeze.com/ and hope you can tell me what i've done wrong. The content simply remain invisible, which I guess indicates that the script is not loaded. Here it is again, without the script: http://fitwidthtest.comeze.com/without_javascript.html.

    Thanks in advance!

  10. #10
    Join Date
    Nov 2011
    Posts
    3
    Okay, now I've figured out how to get the script to work, and have adjusted it so that the page width is scaled up, if it is smaller than the browser window's width. It works perfectly (except for a horizontal scrollbar) in Chrome and Safari, while there are some problems in Firefox and Internet Explorer.

    In Firefox, the page height does not seem to be adjusted, and if the browser width is made narrower than the page, it will no longer rescale.

    And in IE divs with fixed position does not scale, and their text is scrolling.

    I hope that someone can help!

    http://fitwidthtest.comeze.com/

    HTML Code:
    <!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"><head>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
    var minW = 530;
    
    $(function () {
    CheckSizeZoom()
    $('#divWrap').css('visibility', 'visible');
    });
    $(window).resize(CheckSizeZoom)
    
    function CheckSizeZoom() {
    if ($(window).width() > minW) {
    var zoomLev = $(window).width() / minW;
    
    if (typeof (document.body.style.zoom) != "undefined") {
    $(document.body).css('zoom', zoomLev);
    $(document.body).width($(window).width() / zoomLev);
    $(document.body).css('position', 'relative');
    }
    else {
    // Mozilla doesn't support zoom, use -moz-transform to scale and compensate for lost width
    $('#divWrap').css('-moz-transform', "scale(" + zoomLev + ")");
    $('#divWrap').width($(window).width() / zoomLev + 10);
    $('#divWrap').css('position', 'relative');
    $('#divWrap').css('left', (($(window).width() - minW - 16) / 2) + "px");
    $('#divWrap').css('top', "-19px");
    $('#divWrap').css('position', 'relative');
    }
    }
    else {
    $(document.body).css('zoom', '');
    $('#divWrap').css('position', '');
    $('#divWrap').css('left', "");
    $('#divWrap').css('top', "");
    $('#divWrap').css('-moz-transform', "");
    $('#divWrap').width("");
    }
    }
    </script>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Fit width test</title>
    <style type="text/css">
    <!--
    body {
        font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
        background: #42413C;
        margin: 0;
        padding: 0;
        color: #000;
        background-color: #CCC;
    }
    
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
        padding: 0;
        margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {
        /* [disabled]margin-top: 0; */     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
        padding-right: 15px;
        padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    }
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
        border: none;
    }
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
        color: #42413C;
        text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    }
    a:visited {
        color: #6E6C64;
        text-decoration: underline;
    }
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
        text-decoration: none;
    }
    
    /* ~~ this fixed width container surrounds all other elements ~~ */
    .container {
        width: 530px;
        background: #FFF;
        margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
    }
    
    /* ~~ This is the layout information. ~~ 
    
    1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    
    */
    .content {
    
        padding: 10px 0;
    }
    
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
        float: left;
        margin-right: 8px;
    }
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    #divWrap .container .content div {
        color: #FFF;
        background-color: #999;
        position: fixed;
        width: 100%;
        top: -15px;
    }
    -->
    </style></head>
    
    <body>
    
    <div id="divWrap" style="visibility: hidden">
    
    <div class="container">
      <div class="content">
        <div>
          <h1>Fit width test</h1>
        </div>
        <h1>&nbsp;</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a turpis metus. Maecenas ultrices neque et lectus rhoncus eu aliquam nisi sodales. Vivamus pulvinar eleifend posuere. Maecenas pulvinar sollicitudin elit eget egestas. Donec id diam tellus. Maecenas eu odio lectus. Nulla facilisi. Aliquam ligula arcu, congue in consectetur vel, fermentum eu orci.</p>
        <p><img src="billeder/fit_width_test.png" alt="" width="500" height="500" /></p>
      </div>
    </div>
    </div>
    </body>
    </html>

  11. #11
    Join Date
    Nov 2011
    Posts
    3

    Questions withdrawn

    Since I've had no luck getting help in this good forum, I've now tried to ask here, instead: http://stackoverflow.com/questions/8...n-all-browsers

    So please consider my questions here as out of date, and follow the new thread if you're interested.

    Thanks a lot for sharing the clever script, bluepen12!

  12. #12
    Join Date
    Dec 2011
    Location
    Iligan City
    Posts
    1

    Smile Dotnetnuke

    Quote Originally Posted by bluepen12 View Post
    Copy this script to your webpage. You can also copy it without the <script></script> tags to a seperate file and use <script src="zoom.js"></script> (for this to work, save it as zoom.js).

    Make sure you also reference JQuery before the script:

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    Put a DIV around the entire content of the page, like this:

    <body ...>
    <div id="divWrap">
    .
    .
    Your page body here
    .
    </div>
    </body>

    In the script I gave, adjust minW in the beginning (first line of code in the example sets it to 1200 pixels) to be the minimum width for the page to look fine, less than that it will look warped or deformed.

    Now you have a nice script that will zoom the page whatever browser size and screen resolution is presented, preserving the page layout and design.

    If you would like every page of the portal to use it, then (in ASP.NET) put it in your master page, wrapping the <div> around the <asp:ContentPlaceHolder> tags in the body. Or (In DotNetNuke) add it to your skin, wrapping the <div> around the entire HTML (or ASCX) of the skin including all panes. Of course you can also add it in PHP using includes or whatever other method you use to create a consistent look to the site.
    Hello buddy, So this opinion is Necessary needs? because i want to apply this steps or guide. thanks buddy


    Do you need a Dotnetnuke module?

  13. #13
    Join Date
    Feb 2013
    Posts
    2
    Many thanks to bluepen12 and DanInMA. This script works as advertised. What I'm in need of is a way to zoom out on a slideshow that is part of our beta website. The script as written affects everything except the slideshow. The guy who created it is no longer here and I was asked to see what I can do with the site. I've been able to fix everything except the slideshow (the slides get chopped off on everything less than 1920x1200 while the rest of the page looks fine.

  14. #14
    Join Date
    Feb 2013
    Posts
    2

    Question withdrawn

    Quote Originally Posted by cscce View Post
    Many thanks to bluepen12 and DanInMA. This script works as advertised. What I'm in need of is a way to zoom out on a slideshow that is part of our beta website. The script as written affects everything except the slideshow. The guy who created it is no longer here and I was asked to see what I can do with the site. I've been able to fix everything except the slideshow (the slides get chopped off on everything less than 1920x1200 while the rest of the page looks fine.
    My mistake. The script DOES work on the slideshow. Question withdrawn.

  15. #15
    Join Date
    Apr 2013
    Posts
    1
    Han enybody been able to get this script to work in IE9 or10??

    Thanks for such great piece of code!

Thread Information

Users Browsing this Thread

There are currently 4 users browsing this thread. (0 members and 4 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles