Scripts
[JavaScript] Layer Centreren
Ik heb verschillende constructies gezien om een layer (DIV, SPAN) te laten centreren, zowel horizontaal als verticaal, op een pagina. Aangezien vele van die constructies ingewikkeld dan wel ontoereikend zijn, heb ik een JavaScript gemaakt die in alle browsers een layer kan centreren, ongeacht de grootte. Het werkt heel simpel: hij haalt de breedte van het scherm en van de layer, trekt die van elkaar af (zodat de ruimte buiten de layer overblijft) en deelt die door twee (zodat je de ruimte aan 1 kant overhoudt). Dit zowel voor verticaal als horizontaal...
javascript-layer-centreren
[code]
<!-- Dit script is gemaakt om layers te centreren. Van het script mag gratis gebruik gemaakt worden. Het zou wel fijn zijn de naam van de auteur, Peter Somhorst, te vermelden -->
<html>
<head>
<script language="javascript">
function getDimension () {
if (self.innerWidth) // Als de browser deze manier van aanroepen hanteerd
{
frameWidth = self.innerWidth; // Haal de frame-width op
frameHeight = self.innerHeight; // Haal de frame-height op
}
else if (document.documentElement && document.documentElement.clientWidth) // Als de browser deze manier van aanroepen hanteerd
{
frameWidth = document.documentElement.clientWidth; // Haal de frame-width op
frameHeight = document.documentElement.clientHeight; // Haal de frame-height op
}
else if (document.body) // Als de browser deze manier van aanroepen hanteerd
{
frameWidth = document.body.clientWidth; // Haal de frame-width op
frameHeight = document.body.clientHeight; // Haal de frame-height op
}
else return;
}
function centerLayer(layer){
getDimension(); // Haal de dimensies van het scherm op
if (document.layers){ // Als de browser deze manier van aanroepen hanteerd
layerHeight = parseInt(stripPX(document.layers[layer].height)); // layer-height ophalen, en meteen de px die erachter staat (je krijgt iets als: 200px), strippen, en parsen als een integer (getal).
layerWidth = parseInt(stripPX(document.layers[layer].width)); // hetzelfde voor de width
spaceTop = (frameHeight - layerHeight)*0.5; // De ruimte die bovenaan moet overblijven is de window-height - de layer-height, en daar de helft van
spaceLeft = (frameWidth - layerWidth)*0.5; // idem voor de width
if (frameHeight <= layerHeight) spaceTop = 0; // Als je frame smaller wordt dan je layer, wordt spaceTop negatief, niet de bedoeling! eventueel kun je hier ook een margin instellen!
if (frameWidth <= layerWidth) spaceLeft = 0; // ...
document.layers[layer].top = spaceTop; // Zet de ruimte die boven de layer gehouden moet worden op spaceTop
document.layers[layer].left = spaceLeft; // ...
// De rest van deze functie is hetzelfde als hierboven, alleen dan voor andere browsers. Spreekt voor zich
} else if (document.all) { // Als de browser deze manier van aanroepen hanteerd
layerHeight = parseInt(stripPX(document.all[layer].style.height)); // etc
layerWidth = parseInt(stripPX(document.all[layer].style.width)); // etc
spaceTop = (frameHeight - layerHeight)*0.5;
spaceLeft = (frameWidth - layerWidth)*0.5;
if (frameHeight <= layerHeight) spaceTop = 0;
if (frameWidth <= layerWidth) spaceLeft = 0;
document.all[layer].style.left = spaceLeft;
document.all[layer].style.top = spaceTop;
} else if (document.getElementById){ // Als de browser deze manier van aanroepen hanteerd
layerHeight = parseInt(stripPX(document.getElementById(layer).style.height));
layerWidth = parseInt(stripPX(document.getElementById(layer).style.width));
spaceTop = (frameHeight - layerHeight)*0.5;
spaceLeft = (frameWidth - layerWidth)*0.5;
if (frameHeight <= layerHeight) spaceTop = 0;
if (frameWidth <= layerWidth) spaceLeft = 0;
document.getElementById(layer).style.left = spaceLeft;
document.getElementById(layer).style.top = spaceTop;
}
}
function stripPX (input) { // layerWidth en layerHeight worden geparst als: 200px. Daar hebben we niets aan!
stripLength = input.length-2; // De string moet de totale lengte -2 voor de px blijven
output = input.substring(0,stripLength); // Behoudt alle tekens behalce de laatste twee
return output; // Terugsturen die zooi
}
</script>
</head>
<!-- onLoad en onResize zorgen ervoor dat zowel bij het laden als bij het resizen van de pagina, de div gecentreerd wordt/blijft! -->
<body onLoad="centerLayer('div1')"
onResize="centerLayer('div1')">
<!-- De ID moet hetzelfde zijn al waarmee je in de body de functies aanroept... (of andersom: die daar staat moet hetzelfde zijn als deze). Spreekt verder voor zich! Let wel op het position:absolute -->
<div style=" width:640px;
border:1px solid black;
position:absolute;
height:480px;"
id="div1">
Gecentreerde div!
</div>
</body>
</html>
[/code]
Reacties
0