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

Citation:

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

Citation:

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.

Citation:

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

Citation:

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.

07/01/2012, 17h23	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 787 Points : 35 787	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 ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

07/01/2012, 17h38	#3
sserpentio Invité de passage Inscription : janvier 2012 Messages : 5 Détails du profil Informations personnelles : Localisation : Canada Informations forums : Inscription : janvier 2012 Messages : 5 Points : 1 Points : 1	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.
	00

07/01/2012, 20h22	#4
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonsoir, tu utilises l'élément en_tete avant qu'il ne soit DOMesquement construit.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email