Banner aanpassen op scherm afmetingen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Bart Mestrom

Bart Mestrom

08/08/2009 15:47:00
Quote Anchor link
Ik zoek een script die de breedte checkt van het beeldscherm.

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.
 
PHP hulp

PHP hulp

28/03/2024 17:44:38
 
Douwe

Douwe

08/08/2009 15:49:00
Quote Anchor link
Daar heb je de Javascript variable window.innerWidth voor.
 
Bart Mestrom

Bart Mestrom

08/08/2009 15:51:00
Quote Anchor link
Maar hoe zou ik dan de dichtbij liggende banner moeten zoeken?
 
Joren de Wit

Joren de Wit

08/08/2009 16:31:00
Quote Anchor link
In Javascript met een if/elseif/else statement aan de slag gaan om zo de juiste banner te bepalen?
 
Bart Mestrom

Bart Mestrom

08/08/2009 16:35:00
Quote Anchor link
Zal ik dan voor elke afmeting een aparte elseif statement moeten aanmaken?

Kan het niet sneller?
 
Harmen

Harmen

08/08/2009 16:58:00
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);


Snap je em?
 
Bart Mestrom

Bart Mestrom

08/08/2009 17:01:00
Quote Anchor link
Volgens mij klopt je script niet.

In elk geval krijg ik 0 in de alert te staan.
 
Harmen

Harmen

08/08/2009 17:05:00
Quote Anchor link
Klopt, in Internet Explorer werkt dat niet, dat innerWidth.

Edit:

Zie post hieronder met link.
Gewijzigd op 01/01/1970 01:00:00 door Harmen
 
Bart Mestrom

Bart Mestrom

08/08/2009 17:06:00
Quote Anchor link
Is het niet mogelijk om zo'n script uit te voeren in PHP?
 
Joren de Wit

Joren de Wit

08/08/2009 17:07:00
Quote Anchor link
Laat me raden, internet explorer? Ik weet niet hoe het met IE7 en 8 zit, maar oudere versies kennen in ieder geval de window.innerWidth property niet. Gebruik in dat geval document.offsetWidth.

Zie ook dit artikel.
 
Bart Mestrom

Bart Mestrom

08/08/2009 17:12:00
Quote Anchor link
Ik gebruik inderdaad IE7.

Maar is document.body.offsetWidth niet in elk browser te gebruiken?
 
Bart Mestrom

Bart Mestrom

08/08/2009 17:21:00
Quote Anchor link
Ik heb eens wat liggen puzzelen met de link van Blanche en het scriptje van Harmen.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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
 
Bart Mestrom

Bart Mestrom

08/08/2009 19:25:00
Quote Anchor link
Maar het scriptje werkt niet. Hij geeft geen alert en schrijft geen Window width.

Wat heb ik fout gedaan?
 
Bart Mestrom

Bart Mestrom

12/08/2009 21:39:00
Quote Anchor link
Niemand een oplossing?
 
Jan Koehoorn

Jan Koehoorn

12/08/2009 21:49:00
Quote Anchor link
Probeer deze eens:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>
 
Bart Mestrom

Bart Mestrom

12/08/2009 21:52:00
Quote Anchor link
Het werkt.

Maar hoe kan ik het script samenvoegen met deze? Zodat de banners juist weergeven worden?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
 
Jan Koehoorn

Jan Koehoorn

12/08/2009 21:59:00
Quote Anchor link
Zoiets:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>
 
Bart Mestrom

Bart Mestrom

12/08/2009 22:01:00
Quote Anchor link
Perfect, bedankt.
Ik ga het script nog een beetje uitwerken.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.