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.

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

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

Choix de r�solution d'image background

JavaScript

Vue hybride

Discussions similaires

Partager

Partager