Détecter la résolution de l'écran pour modifier les class des éléments
Bonjour,
J'utilise bootstrap pour la conception d'un site web, voici le code
Code:
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
| <body style="background-color:gray">
<div class="row">
<div class="col-lg-12" style="color:white;text-align:center;background-color:black;">Minercraft-Horizon
</div>
</div>
<div class="row">
<div class="col-lg-12">
<img src="class/fonction/image/img_chania.jpg" style="margin-bottom:0%">
</div>
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-lg-3" style="color:white;background-color:black;text-align:center">Accueil
</div>
<div class="col-lg-3" style="color:white;background-color:black;text-align:center">Contact
</div>
<div class="col-lg-3" style="color:white;background-color:black;text-align:center">Inscription
</div>
<div class="col-lg-3" style="color:white;background-color:black;text-align:center">Connexion
</div>
</div>
</div>
<div class="col-lg-2">
</div>
</div>
</div>
</body> |
Comme vous le savez la classe "col-lg-*" détermine la résolution de l'écran, il en existe 3 autres:
col-lg-* >= 1200px
col-md-* >= 992px
col-sm-* >= 768px
col-xs-* < 768px
Ainsi j'aimerai adapter le site par rapport à l'écran de l'utilisateur.
Comme on va pas demander à l'utilisateur de nous donner le nombre de pixel sur son écran, il faudra détecter l'écran de l'utilisateur. Et tout cela demande du JavaScript. Je suis débutant dans le JavaScript (j'ai lu le cours sur le JS et à peine).
J'ai regardé sur le forum et sur d'autre forum je vadrouille à la recherche du précieux (je parle du code ^^)
Dans un premier temps j'aimerai détecter la résolution de l'utilisateur.
Une fois qu'on a détecter la résolution de l'utilisateur, il faut remplacer toutes les class comportant col-lg-* et les remplacer selon la résolution de l'utilisateur.
si l'écran de l'utilisateur est inférieur à 768px alors on remplace toutes les class comportant le nom col-lg-* par col-xs-*
si l'écran est supérieur ou égal 768px alors on remplace toutes les class comportant le nom col-lg-* par col-sm-*
si l'écran est supérieur ou égal 992px alors on remplace toutes les class comportant le nom col-lg-* par col-md-*
si l'écran est supérieur ou égal 1200px alors on touche a rien.
J'ai commencé par faire ça:
Code:
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
| var hautscreen = screen.height;
//si l'écran est inférieur à 768px
if (hautscreen < 768){
for (var i = 1; i <= 12; i++){
var div[i] = querySelectorAll("div").getElementsByClassName("col-lg-[i]"); //on sélectionne toutes les balises <div> qui comporte la class "col-lg-[i]"
div[i].classList.remove("col-lg-[i]"); //on supprime toutes les class comportant "col-lg-[i]
div[i].classList.add("col-xs-[i]"); // on remplace toutes les class par col-xs-[i]
}
}
else if (hautscreen >= 768){
for (var i = 1; i <= 12; i++){
var div[i] = querySelectorAll("div").getElementsByClassName("col-lg-[i]");
div[i].classList.remove("col-lg-[i]");
div[i].classList.add("col-sm-[i]");
}
}
else if (hautscreen >= 992){
for (var i = 1; i <= 12; i++){
var div[i] = querySelectorAll("div").getElementsByClassName("col-lg-[i]");
div[i].classList.remove("col-lg-[i]");
div[i].classList.add("col-md-[i]");
}
}
else if (hautscreen >= 1200){
} |
Mais j'ai pas l'impression que ça fonctionne :/
Pourriez vous m'aider, et m'indiquer sur les erreurs que j'ai pu commettre.
Cordialement
Guillaume
