 PHP interesse |
|
Ik ben bezig met een script te maken die grootte berekent van de pagina en de viewport.
Wat ik denk dat het verschil is tussen de viewport en de pagina is het volgende. Verbeter me als ik fout zit.
Viewport:
De aantal pixels dat je kan zien zonder aan de schuifbalken te komen.
Paginagrootte:
Het aantal pixels dat de hele pagina groot is. Dus ook als je met de scrollbalken naar beneden gaat.
Ik ben aan mijn script bezig en dit wordt op het eerste moment enkel gemaakt voor IE 6, IE 7 en firefox op windows. Firefox op linux en camino op mac.
ik zit nog enkel te testen met IE 6 omdat het hiermee al volledig foutloopt.
eerst mijn html-test pagina.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>TEST THE SHIT!!!</title>
<style>
.trans-layer {
position: absolute;
left: 0px;
top: 0px;
background-color: black;
visibility: hidden;
opacity: 0.50;
filter: alpha(opacity=50);
z-index: 1;
}
</style>
<script type="text/javascript" src="testViewport.js"></script>
</head>
<body>
<div style="width:300px; height:300px; border:1px solid red;" onclick="showLayer();">
ROEL
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>TEST THE SHIT!!!</title> <style> .trans-layer { position: absolute; left: 0px; top: 0px; background-color: black; visibility: hidden; opacity: 0.50; filter: alpha(opacity=50); z-index: 1; } </style> <script type="text/javascript" src="testViewport.js"></script> </head> <body> <div style="width:300px; height:300px; border:1px solid red;" onclick="showLayer();"> ROEL </div> </body> </html>
Ik gebruik het transitional doctype dus de browsers zijn in standard compliant mode.
nu mijn script
function showLayer() {
var isIE = (document.all ? true : false);
var width = 0;
var height = 0;
if(!isIE) {
width = document.documentElement.scrollWidth;
height = document.documentElement.scrollHeight;
} else {
width = document.documentElement.scrollWidth;
//height = document.documentElement.offsetHeight;
//height =document.documentElement.offsetHeight;
//height =document.documentElement.clientHeight;
height = document.documentElement.scrollHeight;
//height = document.body.scrollHeight;
}
var layer = document.createElement("div");
layer.className = 'trans-layer';
document.body.appendChild(layer);
layer.style.width = width+"px";
layer.style.height = height+"px";
layer.style.visibility = 'visible';
}
function showLayer() { var isIE = (document.all ? true : false); var width = 0; var height = 0; if(!isIE) { width = document.documentElement.scrollWidth; height = document.documentElement.scrollHeight; } else { width = document.documentElement.scrollWidth; //height = document.documentElement.offsetHeight; //height =document.documentElement.offsetHeight; //height =document.documentElement.clientHeight; height = document.documentElement.scrollHeight; //height = document.body.scrollHeight; } var layer = document.createElement("div"); layer.className = 'trans-layer'; document.body.appendChild(layer); layer.style.width = width+"px"; layer.style.height = height+"px"; layer.style.visibility = 'visible'; }
Dit script doet het volgende.
Hij berekent de paginagrootte en plaatst er een layer overheen.
Dit werkt goed op firefox maar niet in IE 6.
Kan iemand mij helpen met die werkende te krijgen op IE 6 en IE 7
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
