cheap gaming pcs Posted February 3, 2012 Share Posted February 3, 2012 Hi Everyone Can i get help testing this scipt its 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. 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> minW is the minimum width for your homepage to look good. divWrap is a DIV with which you should wrap your entire homepage. The script goes in the <head> tag, before referencing JQuery. <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> 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. Put a DIV around the entire content of the page, like this: <body ...> <div id="divWrap" style="visibility: hidden"> . . Your page body here . </div> As far as i can tell its working be good to see if it works for everyone Will update again soon Many Thanks Gary Link to comment Share on other sites More sharing options...
tdr170 Posted February 5, 2012 Share Posted February 5, 2012 The problem with this script is that Prestashop is only 980 wide and will fit every monitor out there. Well with the exeption of some old monitor that will only handle 800x600 and if you have one of those I have to ask do you know what year it is. A more useful script would be one that stretches the page to fit all monitors in my case 1680. Link to comment Share on other sites More sharing options...
Recommended Posts