javascript-layer-centreren
Gesponsorde koppelingen
PHP script bestanden
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!-- 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>
<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>