Ik ben wat aan het proberen met het automatisch resizen van een website aan de hand van de breedte van het venster.
CSS:
<style type="text/css">
#container {
width: 200px; margin: 0 auto 0; height: 300px; background: #F00;
}
</style>Javascript:
<script type="text/javascript">
function getWidth()
{
if(typeof window.innerWidth != 'undefined')
return window.innerWidth
else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0)
return document.documentElement.clientWidth
else
return document.getElementsByTagName('body')[0].clientWidth
}
function resizeHandler(width)
{
if(width<1050)
document.getElementById('container').style.width = '600px';
else if(width<1025)
document.getElementById('container').style.width = '1024px';
else if(width<1209)
document.getElementById('container').style.width = '300px';
else if(width>1209)
document.getElementById('container').style.width = '100px';
}
</script>
Body:
<body>
<div id="container">
<a href="#" onmouseover="resizeHandler(getWidth());">reset website resolutie</a>
<script type="text/javascript">
resizeHandler(getWidth());
</script>
<p>test de viewport resolutie van de pagina</p>
</div>
</body>Het lukt dus al aardig alleen zodra je de website hebt geopent dan voert hij de code uit (de javascript). Ook doet hij dit zodra je met je muis over de tekst van 'reset website resolutie' (bijvoorbeeld als je je venster kleiner/groter hebt gemaakt), alleen doe je dit nog een keer dan doet de code het niet meer.
Heeft iemand een oplossing of wellicht een andere suggestie om de website breedte automatisch aan te passen (ik ben geen grote ster in javascript!)
Alvast bedankt mensen!
