get_datalist_materials.php

shows usage of materials list

by veeuze

HTML

<script src="//integrate.materialo.com/v2.0/js/vendor/XMLDisplay.js"></script>
<link rel="stylesheet" href="//integrate.materialo.com/v2.0/css/vendor/XMLDisplay.css">
<div id="spaceWrap">
  <iframe id="viewPort" src="http://demo.materialo.com">
  </iframe>
</div>

CSS

#spaceWrap { 
  width: 800px;
  height: 450px;
  padding: 0; 
  overflow: hidden; 
}

#viewPort { 
  width: 1600px; 
  height: 900px; 
  border: 0px;
  padding: 0;
}

#viewPort {
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  
  transform: scale(0.5);
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
}

JavaScript

var vscale=0.7;
function checkSize()
{
var nwith = $(window).width()-20;
var nheight = $(window).height()-20;
$('#spaceWrap').width(nwith);
$('#spaceWrap').height(nheight);
$('#viewPort').width(nwith/ vscale);
$('#viewPort').height(nheight/ vscale);
}

$('#viewPort').css({"transform": "scale(" + vscale + ")",
  "-webkit-transform": "scale(" + vscale + ")",
  "-moz-transform": "scale(" + vscale + ")",
  "-ms-transform": "scale(" + vscale + ")",
  "-o-transform": "scale(" + vscale + ")"});


window.setInterval(function() {
		checkSize();

	    }, 1000);