Choix de résolution d'image background

**sserpentio** · 07/01/2012, 17h16

Bonjour je n'arrive pas à ecrire mon code javascript pour que mon bandeau de ma page html s'adapte à la résolution du client.
ci-dessous un bout de mon code html et le code css concerné:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head>
<script type="text/javascript">
if (screen.width<=800) {
document.getElementById ('en_tete').className = 'res1';
} else if (screen.width>=1024) {
document.getElementById ('en_tete').className = 'res2';
} else if (screen.width>=1200) {
document.getElementById ('en_tete').className = 'res3';
}
</script>
</head>
 
<body>
<div id="en_tete">
 
</div>
  </body>
</html>

le CSS:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
#en_tete
{
   width: 100%;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle3.jpg");
 
}
.res1 /*800*/
{
	width: 100%;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle1.jpg");
 
}
.res2 /*1024*/
{
	width: 100%;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle2.jpg");
 
}
.res3 /*1200*/
{
	width: 100%;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle3.jpg");
 
}

Voila je galère grandement car pour firefox j'ai palié au problème via la fonction "@media screen and (max-device-width: 1024px)" mais mon problème concerne IE8.
Espérant que quelqu'un puisse m'aider, merci par avance.

**Bovino** · 07/01/2012, 17h23

Ouais... j'imagine que tu dois avoir des problèmes pour entrer dans la 3e condition

Ensuite, il se passe quoi si la résolution est entre 800 et 1024 ?

**sserpentio** · 07/01/2012, 17h38

ok entre 800 et 1024 juste à modifier ma première condition, mais enfin de compte je ne comprends pas pourquoi mes "class" dans mon css ne sont pas appelées par les conditions écrites en javascript.

**NoSmoking** · 07/01/2012, 20h22

Bonsoir,
tu utilises l'élément en_tete avant qu'il ne soit DOMesquement construit.

**sserpentio** · 07/01/2012, 20h36

Envoyé par sserpentio

ok entre 800 et 1024 juste à modifier ma première condition, mais enfin de compte je ne comprends pas pourquoi mes "class" dans mon css ne sont pas appelées par les conditions écrites en javascript.

Bon après quelques galères j'ai trouvé ma solution.....

Il fallait simplement mettre mon code javascript juste avant la fin de body pour que la page soit chargée et mes "div" reconnus et non pas entre les balises Head.

donc:
-code html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <body>
<div id="en_tete">
</div>
<script type="text/javascript">
        
                        if (screen.width<=800) {
                        document.getElementById ('en_tete').className = 'res1';
                        } else if (screen.width<=1024) {
                        document.getElementById ('en_tete').className = 'res2';
                        } else {document.getElementById ('en_tete').className = 'res3';
                        }
                                
</script>
 
   </body>
</html>

et le bout de code CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
#en_tete
{
	width: 100%;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle3.jpg");
 
}
#en_tete.res1 /*800*/
{
	width: 800px;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle1.jpg");
 
}
#en_tete.res2 /*1024*/
{
	width: 1024px;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle2.jpg");
 
}
#en_tete.res3 /*1280*/
{
	width: 1280px;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle3.jpg");
 
}

Bon ce n'est probablement pas la meilleure méthode mais ça fonctionne...
J'aurai aimé mettre ce script dans mon fichier.js mais je n'arrive pas à ce que les div soit chargés donc il me renvoit une erreur comme quoi mon "getElementById" est vide...

**NoSmoking** · 15/01/2012, 16h10

Il fallait simplement mettre mon code javascript juste avant la fin de body pour que la page soit chargée et mes "div" reconnus et non pas entre les balises Head.

Envoyé par NoSmoking

Bonsoir,
tu utilises l'élément en_tete avant qu'il ne soit DOMesquement construit.

c'est en fait ce que cela veut dire...

J'aurai aimé mettre ce script dans mon fichier.js mais je n'arrive pas à ce que les div soit chargés donc il me renvoit une erreur comme quoi mon "getElementById" est vide...

appel ta fonction sur le onload de la page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
window.onload = function(){
  if( screen.width <= 800) {
    document.getElementById ('en_tete').className = 'res1';
  }
  else if( screen.width <= 1024) {
    document.getElementById ('en_tete').className = 'res2';
  }
  else {
    document.getElementById ('en_tete').className = 'res1';
  }
}

tout ceci est factorisable.

Choix de résolution d'image background

JavaScript

Discussions similaires

Partager

Partager