Banner aanpassen op scherm afmetingen
Als die de afmeting heeft, dan moet de dichtbij liggende banner, te zien zijn.
Voorbeeldje:
Beeldscherm is 1550 pixels breedt.
Die breedte bestaat niet in de banners, dus selecteert het script de breedte 1600 pixels.
Daar heb je de Javascript variable window.innerWidth voor.
Maar hoe zou ik dan de dichtbij liggende banner moeten zoeken?
In Javascript met een if/elseif/else statement aan de slag gaan om zo de juiste banner te bepalen?
Kan het niet sneller?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
breedtes = Array(800, 1000, 1200, 1400, 1600, 1800);
breedte = window.innerWidth;
afstand = 100000;
bannerbreedte = 0;
for(i=0; i < breedtes.length; i++){
if(Math.abs(breedtes[i] - breedte) < afstand){
afstand = Math.abs(breedtes[i] - breedte);
bannerbreedte = breedtes[i];
}
}
alert(bannerbreedte);
breedte = window.innerWidth;
afstand = 100000;
bannerbreedte = 0;
for(i=0; i < breedtes.length; i++){
if(Math.abs(breedtes[i] - breedte) < afstand){
afstand = Math.abs(breedtes[i] - breedte);
bannerbreedte = breedtes[i];
}
}
alert(bannerbreedte);
Snap je em?
In elk geval krijg ik 0 in de alert te staan.
Is het niet mogelijk om zo'n script uit te voeren in PHP?
Maar is document.body.offsetWidth niet in elk browser te gebruiken?
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
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
<script>
breedtes = Array(800, 1000, 1200, 1400, 1600, 1800);
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
breedte = window.innerWidth-16;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
breedte = document.body.offsetWidth-20;
}
}
for(i=0; i < breedtes.length; i++){
if(Math.abs(breedtes[i] - breedte) < afstand){
afstand = Math.abs(breedtes[i] - breedte);
bannerbreedte = breedtes[i];
}
}
alert(bannerbreedte);
document.write(
"Window width = "+breedte
)
</script>
<hr>
<script>
document.write(navigator.appName + "<br>")
</script>
breedtes = Array(800, 1000, 1200, 1400, 1600, 1800);
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
breedte = window.innerWidth-16;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
breedte = document.body.offsetWidth-20;
}
}
for(i=0; i < breedtes.length; i++){
if(Math.abs(breedtes[i] - breedte) < afstand){
afstand = Math.abs(breedtes[i] - breedte);
bannerbreedte = breedtes[i];
}
}
alert(bannerbreedte);
document.write(
"Window width = "+breedte
)
</script>
<hr>
<script>
document.write(navigator.appName + "<br>")
</script>
Gewijzigd op 01/01/1970 01:00:00 door Bart Mestrom
Wat heb ik fout gedaan?
Niemand een oplossing?
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
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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
window.size = function()
{
var w = 0;
var h = 0;
//IE
if(!window.innerWidth)
{
//strict mode
if(!(document.documentElement.clientWidth == 0))
{
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
//quirks mode
else
{
w = document.body.clientWidth;
h = document.body.clientHeight;
}
}
//w3c
else
{
w = window.innerWidth;
h = window.innerHeight;
}
return {width:w,height:h};
}
</script>
</head>
<body onload="alert ('hoogte: ' + window.size ().height + ', breedte: ' + window.size ().width)">
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
window.size = function()
{
var w = 0;
var h = 0;
//IE
if(!window.innerWidth)
{
//strict mode
if(!(document.documentElement.clientWidth == 0))
{
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
//quirks mode
else
{
w = document.body.clientWidth;
h = document.body.clientHeight;
}
}
//w3c
else
{
w = window.innerWidth;
h = window.innerHeight;
}
return {width:w,height:h};
}
</script>
</head>
<body onload="alert ('hoogte: ' + window.size ().height + ', breedte: ' + window.size ().width)">
</body>
</html>
Maar hoe kan ik het script samenvoegen met deze? Zodat de banners juist weergeven worden?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
breedtes = Array(800, 1000, 1200, 1400, 1600, 1800);
breedte = window.innerWidth;
afstand = 100000;
bannerbreedte = 0;
for(i=0; i < breedtes.length; i++){
if(Math.abs(breedtes[i] - breedte) < afstand){
afstand = Math.abs(breedtes[i] - breedte);
bannerbreedte = breedtes[i];
}
}
alert(bannerbreedte);
breedte = window.innerWidth;
afstand = 100000;
bannerbreedte = 0;
for(i=0; i < breedtes.length; i++){
if(Math.abs(breedtes[i] - breedte) < afstand){
afstand = Math.abs(breedtes[i] - breedte);
bannerbreedte = breedtes[i];
}
}
alert(bannerbreedte);
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
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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = init;
function init () {
breedtes = Array(800, 1000, 1200, 1400, 1600, 1800);
breedte = window.size ().width;
afstand = 100000;
bannerbreedte = 0;
for(i=0; i < breedtes.length; i++){
if(Math.abs(breedtes[i] - breedte) < afstand){
afstand = Math.abs(breedtes[i] - breedte);
bannerbreedte = breedtes[i];
}
}
alert(bannerbreedte);
}
window.size = function()
{
var w = 0;
var h = 0;
//IE
if(!window.innerWidth)
{
//strict mode
if(!(document.documentElement.clientWidth == 0))
{
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
//quirks mode
else
{
w = document.body.clientWidth;
h = document.body.clientHeight;
}
}
//w3c
else
{
w = window.innerWidth;
h = window.innerHeight;
}
return {width:w,height:h};
}
</script>
</head>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = init;
function init () {
breedtes = Array(800, 1000, 1200, 1400, 1600, 1800);
breedte = window.size ().width;
afstand = 100000;
bannerbreedte = 0;
for(i=0; i < breedtes.length; i++){
if(Math.abs(breedtes[i] - breedte) < afstand){
afstand = Math.abs(breedtes[i] - breedte);
bannerbreedte = breedtes[i];
}
}
alert(bannerbreedte);
}
window.size = function()
{
var w = 0;
var h = 0;
//IE
if(!window.innerWidth)
{
//strict mode
if(!(document.documentElement.clientWidth == 0))
{
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
//quirks mode
else
{
w = document.body.clientWidth;
h = document.body.clientHeight;
}
}
//w3c
else
{
w = window.innerWidth;
h = window.innerHeight;
}
return {width:w,height:h};
}
</script>
</head>
<body>
</body>
</html>
Ik ga het script nog een beetje uitwerken.