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.
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:
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.
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.
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.
<!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> </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>
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:
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
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.
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.
Reply With Quote
Dotnetnuke
Originally Posted by bluepen12
Bookmarks