Page auto-zoom script to fit with no scrollbars

Printable View

07-12-2011, 03:15 AM
bluepen12

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>
07-12-2011, 03:17 AM
bluepen12

Forgot to mention

I forgot to mention that the divWrap should have style="visibility: hidden" to prevent flash of unstyled content at the beginning.
09-01-2011, 05:16 PM
flapy

Hello

It is very interesting idea. Can you tell me how to use it.... Thanks!
09-02-2011, 04:05 AM
bluepen12

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.
09-02-2011, 04:06 AM
bluepen12

I forgot to mention: The script goes in the <head> tag, before referencing JQuery.
09-02-2011, 04:08 AM
bluepen12

And declare the <div> as follows instead of what is written:

<div id="divWrap" style="visibility: hidden">
.
.
.
</div>
09-02-2011, 05:41 AM
flapy

Nice! Thank you very much! :)
09-02-2011, 03:55 PM
DanInMA

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 : '' }); } }
11-10-2011, 07:19 AM
afsender

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!
11-22-2011, 06:16 AM
afsender

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">  </style></head> <body> <div id="divWrap" style="visibility: hidden"> <div class="container"> <div class="content"> <div> <h1>Fit width test</h1> </div> <h1> </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-26-2011, 06:01 PM
afsender

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-29-2011, 11:08 PM
davidmark

Dotnetnuke

Quote:

Originally Posted by bluepen12

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?
02-20-2013, 09:52 AM
cscce

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.
02-21-2013, 08:50 AM
cscce

Question withdrawn

Quote:

Originally Posted by cscce

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.
04-19-2013, 03:00 PM
marechavala

Han enybody been able to get this script to work in IE9 or10??

Thanks for such great piece of code!