Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Apr 19th, 2012  |  syntax: None  |  size: 4.57 KB  |  hits: 8  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html lang="en" xml:lang="en">
  4. <head>
  5.         <meta charset="utf-8" />
  6.         <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  7.         <title>Dynamic Scaling Example</title>
  8.         <style>
  9.                 body { padding: 0; margin: 0; overflow: hidden;
  10.                         background-color: #999; position: absolute; zoom: 1;}
  11.                 #zoomWrap { width: 800px; height: 600px; min-width: 800px;
  12.                         min-height: 600px; background-color: #fff; padding: 0px;
  13.                         margin: 0px; position: relative; border: 0px}
  14.                 #contents { position: absolute; width:100%; height: 100%; top: 0px;
  15.                         left: 0px; right: 0px;}
  16.                 #zoomWrap {  
  17.                         -moz-transform-origin: 0px 0px;
  18.                         -o-transform-origin: 0 0;
  19.                         -webkit-transform-origin: 0px 0px;
  20.                         -moz-transform: scale(1);
  21.                         -o-transform: scale(1);
  22.                         -webkit-transform: scale(1);
  23.                         -webkit-transform-style:preserve-3d;
  24.                         transform: scale(1);
  25.                 }
  26.         </style>
  27.         <script type="text/javascript" src="js/EventHelpers.js"></script>
  28.         <script type="text/javascript" src="js/cssQuery-p.js"></script>
  29.         <script type="text/javascript" src="js/jcoglan.com/sylvester.js"></script>
  30.         <script type="text/javascript" src="js/cssSandpaper.js"></script>
  31.         <script>
  32.                 var ie = false;
  33.         </script>
  34.         <!--[if IE]>
  35.                 <script> ie = true; </script>
  36.                 <link href="css/ie.css" rel="stylesheet" type="text/css">
  37.         <![endif]-->
  38.         <script>
  39.                 var contentWidth = 800;
  40.                 var contentHeight = 600;
  41.                 var pageWidth = 0;
  42.                 var pageHeight = 0;
  43.                 var addEvent = function(elem, type, eventHandle) {
  44.                     if (elem == null || elem == undefined) return;
  45.                     if ( elem.addEventListener ) {
  46.                         elem.addEventListener( type, eventHandle, false );
  47.                     } else if ( elem.attachEvent ) {
  48.                         elem.attachEvent( "on" + type, eventHandle );
  49.                     }
  50.                 };
  51.                 addEvent(window, "resize", scaleContent);
  52.                 addEvent(window, "load", scaleContent);
  53.                
  54.                 function scaleContent() {
  55.                         getPageWidthHeight();
  56.                         var zoomX = (pageWidth * 1.0) /contentWidth;
  57.                         var zoomY = (pageHeight * 1.0) / contentHeight;
  58.                         var effectiveZoom = 1.0;
  59.                         var zoomWrap = document.getElementById('zoomWrap');
  60.                         var contents = document.getElementById('contents');
  61.                         var scaledContentHeight = contentHeight;
  62.                         var scaledContentWidth = contentWidth;
  63.                         if (zoomX < zoomY) {
  64.                                 effectiveZoom = zoomX;
  65.                                 scaledContentHeight = contentHeight * effectiveZoom;
  66.                                 scaledContentWidth = contentWidth * effectiveZoom;
  67.                                 var yShift = (pageHeight - scaledContentHeight)/2;
  68.                                 zoomWrap.style.top = yShift + "px";
  69.                                 zoomWrap.style.left = 0 + "px";
  70.                         } else if (zoomX > zoomY) {
  71.                                 effectiveZoom = zoomY;
  72.                                 scaledContentHeight = contentHeight * effectiveZoom;
  73.                                 scaledContentWidth = contentWidth * effectiveZoom;
  74.                                 var xShift = (pageWidth - scaledContentWidth)/2;
  75.                                 zoomWrap.style.left = xShift + "px";
  76.                                 zoomWrap.style.top = 0 + "px";
  77.                         } else {
  78.                                 effectiveZoom = zoomY;
  79.                         }
  80.                         if (ie != true) {
  81.                                 cssSandpaper.setTransform(zoomWrap, "scale(" + effectiveZoom + ")");
  82.                                 zoomWrap.width = scaledContentWidth;
  83.                                 zoomWrap.minWidth = scaledContentWidth;
  84.                                 zoomWrap.height = scaledContentHeight;
  85.                                 zoomWrap.minHeight = scaledContentHeight;
  86.                                 contents.width = scaledContentWidth;
  87.                                 contents.height = scaledContentHeight;
  88.                         } else {
  89.                                 zoomWrap.filters.item("DXImageTransform.Microsoft.Matrix").M11 = effectiveZoom;
  90.                                 zoomWrap.filters.item("DXImageTransform.Microsoft.Matrix").M22 = effectiveZoom;
  91.                                 var newCss = 'filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=';
  92.                                 newCss += effectiveZoom + ', M12=0, M21=0, M22=' + effectiveZoom + '); ';
  93.                                 newCss += '-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=' + effectiveZoom + ', M12=0, M21=0, M22=' + effectiveZoom;
  94.                                 newCss += ', SizingMethod=\'auto expand\')"';
  95.                                 zoomWrap.cssText = newCss;
  96.                         }
  97.                 }              
  98.                
  99.                 function getPageWidthHeight() {
  100.                          if (typeof window.innerWidth != 'undefined')
  101.                          {
  102.                               pageWidth = window.innerWidth,
  103.                               pageHeight = window.innerHeight
  104.                          }
  105.                          else if (typeof document.documentElement != 'undefined'
  106.                              && typeof document.documentElement.clientWidth !=
  107.                              'undefined' && document.documentElement.clientWidth != 0)
  108.                          {
  109.                                pageWidth = document.documentElement.clientWidth,
  110.                                pageHeight = document.documentElement.clientHeight
  111.                          }
  112.                          else
  113.                          {
  114.                                pageWidth = document.getElementsByTagName('body')[0].clientWidth,
  115.                                pageHeight = document.getElementsByTagName('body')[0].clientHeight
  116.                          }
  117.                 }
  118.                
  119.         </script>
  120. </head>
  121. <body>
  122.         <div id="zoomWrap">
  123.                 <div id="contents">
  124.                         <!-- Your absolute positioned content here -->
  125.                 </div>
  126.         </div>
  127. </body>
  128. </html>
create a new version of this paste RAW Paste Data