Coding Cookbook/Resizable Window

From Wikibooks, open books for an open world
Jump to: navigation, search

Dynamic HTML solution[edit]

<html><head>
<script>
window.onload   = updateLayout;
window.onresize = updateLayout;
function updateLayout() {
  var vpWidth, vpHeight
  // 1. Bepaal viewport (venster) afmetingen
  if (self.innerHeight) { // all except Explorer
    vpWidth  = self.innerWidth;
    vpHeight = self.innerHeight;
    }
  else if (document.documentElement &&
    document.documentElement.clientHeight) { // IE6 Strict
    vpWidth  = document.documentElement.clientWidth;
    vpHeight = document.documentElement.clientHeight;
    }
  else if (document.body) { // other Explorers
    vpWidth  = document.body.clientWidth;
    vpHeight = document.body.clientHeight;
    }
  // 2. Geef elementen juiste pixel-formaat
  document.getElementById('main'  ).style.height = 
    ((vpHeight < 50) ? 0 : vpHeight - 50) + 'px';
  document.getElementById('footer').style.top    = 
    ((vpHeight < 50) ? 0 : vpHeight - 50) + 'px';
  }
</script><style>
HTML, BODY {height: 100%; width: 100%;}
HTML {overflow: hidden;}
BODY {margin: 0px;}
#main {position: absolute; left: 0px; top: 0px; height: 550px; width: 100%;
  overflow: auto;}
#footer {position: absolute; left: 0px; top: 550px; height: 50px; 
  width: 100%; overflow: hidden;}
</style></head><body>
<div id='main'>Main contents here</div>
<div id='footer'>Footer contents here</div>
</body></html>