Smoerf
Legacy Member
Even schetsen
Document opbouw:
- header
- nav
- content
- footer
Omdat we willen dat de content alle nodige ruimte inneemt heb ik een javascript functie geschreven "alter_style();" die aangeroepen wordt bij "onload" van de body.
De javascript functie berekent hoeveel hoogte de header+nav+footer innemen en hoeveel plaats er nog over blijft binnen het browservenster. Als de content div z'n hoogte niet groter is dan de resterende ruimte in het browservenster past hij de grootte aan.
Nu komt het probleem:
<body onload="alter_style();" onresize="alter_style();">
Die onresize is geen xHTML valid event
En als ik in m'n code zet
window.onresize = alter_style(); lukt het ook niet
De code van index.htm:
Javascript file
De vraag is dus, hoe kan ik m'n functie aanroepen als er een window resize is?
even terzijde de prefix selector werkte niet.
Document opbouw:
- header
- nav
- content
- footer
Omdat we willen dat de content alle nodige ruimte inneemt heb ik een javascript functie geschreven "alter_style();" die aangeroepen wordt bij "onload" van de body.
De javascript functie berekent hoeveel hoogte de header+nav+footer innemen en hoeveel plaats er nog over blijft binnen het browservenster. Als de content div z'n hoogte niet groter is dan de resterende ruimte in het browservenster past hij de grootte aan.
Nu komt het probleem:
<body onload="alter_style();" onresize="alter_style();">
Die onresize is geen xHTML valid event
En als ik in m'n code zetwindow.onresize = alter_style(); lukt het ook niet
De code van index.htm:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>United Blood - WoW guild</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="css.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body onload="alter_style();">
<div id="lo_header"></div>
<div id="lo_nav">
<ul id="lo_navlist">
<li>HOME</li>
<li>GUILD INFORMATION</li>
<li>GUILD MEMBERS</li>
<li>DOWNLOADS</li>
<li>GALLERY</li>
<li>FORUMS</li>
<li>LINKS</li>
</ul>
</div>
<div id="lo_content">
bla bla
</div>
<div id="lo_footer">
Site © 2006 - tensixtytwo.com
</div>
</body>
</html>Javascript file
Code:
window.onresize = alter_style();
function alter_style(){
var dheader = document.getElementById("lo_header");
var dnav = document.getElementById("lo_nav");
var dcontent = document.getElementById("lo_content");
var dfooter = document.getElementById("lo_footer");
var no_content = 0 + dheader.offsetHeight + dnav.offsetHeight + dfooter.offsetHeight;
var window_height = document.documentElement.clientHeight;
var new_height = window_height - no_content;
if (dcontent.offsetHeight < new_height){
dcontent.style.height = window_height - no_content + "px";
}
}De vraag is dus, hoe kan ik m'n functie aanroepen als er een window resize is?
even terzijde de prefix selector werkte niet.