Discussion :

[Danyel]

Salut all,
J'ai un probleme que je n'arrive a regler malgres toutes mes tentatives et recherches.
C'est un melange de css et js pour un effet de resize d'une image lors d'un scroll (assez classique)
Tout fonctionne parfaitement sur ordi (et meme sur emulateurs de mobiles) mais pas directement sur mobile avec les navigateurs chrome et samsung.

J'utilise le js pour la gestion de l'effet en css

Code javascript :

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

1
2
document.getElementById("lelogo").classList.remove("lelogo-size");
document.getElementById("lelogo").classList.add("lelogo-size-reduit");

Code :

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
#lelogo {
    width: 175px;
}
.lelogo-size {
    width: 175px !important;
}
.lelogo-size-reduit {
    width: 85px !important;
}
 
@media only screen and (max-width:650px) {
 
#lelogo {
    width: 175px;
}
.lelogo-size {
    width: 175px !important;
}
.lelogo-size-reduit {
    width: 85px !important;
}
 
}

Alors le probleme est que l'effet de resize ne fonctionne pas sur les mobiles alors qu'il fonctionne sur les ordi et que c'est le meme code.
Ou est le probleme ou l'erreur ???
Merci par avance pour votre aide et resolution.

[Archimède]

Ton souci est sans doute au niveau du scroll tactile en js...
Regarde ici peut-être :
https://www.developpez.net/forums/d1...le-javascript/

[Danyel]

Non car le scroll fonctionne bien sur le mobile.
J'ai essaye avec un resize d'un div a partir du js avec la meme methode et ca fonctionne nickel (meme sur mobile !!!)
C'est uniquement pour le resize sur une image (meme sur toutes en fait) avec cette methode et je vois pas pourquoi.
En tous cas, merci Archimède.

[unanonyme]

j'essayerais de supprimer les !important

c'est souvent pratique, ça résulte souvent en un ajout de complexité qui rajoute à la difficulté.

il y a des règles de précédence lors de l'application des règles de style, c'est mieux d'essayer de les respecter que de court circuiter le système.

[Danyel]

j'essayerais de supprimer les !important

Si j'enleve les !important, les classList.xxx du js ne fonctionnent plus du tout.

[Doksuri]

le !important est a proscrire... il n'est util que pour ecraser des proprietes d'une lib par exemple.

il faut que tu revois tes selecteurs : tu as surement un probleme de "poids" de selecteur developer.mozilla.org/en-US/docs/Web/CSS/Specificity#selector_weight_categories (la doc en francais n'affiche pas la section des poids...)

il faut que tu refasses ton css sans !important

[NoSmoking]

Bonjour,
pour commencer, as-tu une meta viewport dans ta page comme :

Code html :

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Je ne comprend pas trop la logique d'avoir

Code :

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

1
2
3
4
5
6
#lelogo {  /* spécificité 1-0-0 */
    width: 175px;
}
.lelogo-size {  /* spécificité 0-1-0 */
    width: 175px !important;
}

... visiblement tu cibles le même élément d'après le JavaScript fourni.

De même

Code :

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

1
2
3
4
5
6
7
8
9
10
11
@media only screen and (max-width:650px) {
  #lelogo {
    width: 175px;
  }
  .lelogo-size {
    width: 175px !important;
  }
  .lelogo-size-reduit {
    width: 85px !important;
  }
}

... est ce à dire que suivant une autre condition, gérée en JavaScript, pour une même dimension de fenêtre tu peux avoir soit la classe .lelego-size ou .lelogo-size-reduit ?

J'ai du mal à visualiser tout cela !

[Danyel]

il faut que tu refasses ton css sans !important

J'aimerai bien, mais mon comme signale un peu plus haut, les

Code javascript :

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

1
2
document.getElementById("lelogo").classList.xxx("lelogo");

ne fonctionnent plus sans.
(xxx = add/remove/...)

[Danyel]

Bonjour,
pour commencer, as-tu une meta viewport dans ta page comme :

Code html :

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Affirmatif

Je ne comprend pas trop la logique d'avoir

Code :

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

1
2
3
4
5
6
#lelogo {  /* spécificité 1-0-0 */
    width: 175px;
}
.lelogo-size {  /* spécificité 0-1-0 */
    width: 175px !important;
}

... visiblement tu cibles le même élément d'après le JavaScript fourni.

Le #logo est pour le chargement de la page (le js n'est pas encore execute car pas encore de scroll)
L'autre est pour le scroll du js.

De même

Code :

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

1
2
3
4
5
6
7
8
9
10
11
@media only screen and (max-width:650px) {
  #lelogo {
    width: 175px;
  }
  .lelogo-size {
    width: 175px !important;
  }
  .lelogo-size-reduit {
    width: 85px !important;
  }
}

... est ce à dire que suivant une autre condition, gérée en JavaScript, pour une même dimension de fenêtre tu peux avoir soit la classe .lelego-size ou .lelogo-size-reduit ?

Affirmatif

J'ai du mal à visualiser tout cela !

Un simple if.

Je crois que je vais faire un jsfiddle avec un simple exemple du probleme.

[Danyel]

Bon, il semblerai bien que les .classList.xxx pour version mobile ne fonctionnent pas.
J'ai decide de tout re-ecrire en utilisant les .style.xxx à la place des .classList.xxx dans le js (c'est plus long, mais pas besoin d' !important et surtout ca fonctionne (enfin de ce que j'ai deja fait))
Merci à tous.

Edit
Tout est ok, mais impossible de faire un resize d'une image, meme avec la nouvelle methode.
Il doit y avoir qq chose qui bloque cela, je ne vois que ca.

[Doksuri]

Bon, il semblerai bien que les .classList.xxx pour version mobile ne fonctionnent pas.

1ere nouvelle... developer.mozilla.org/fr/docs/Web/API/Element/classList

Il doit y avoir qq chose qui bloque cela, je ne vois que ca.

surment quelque chose entre le clavier et la chaise.

J'ai decide de tout re-ecrire en utilisant les .style.xxx à la place des .classList.xxx dans le js

on te donne des conseils que tu ne veux pas appliquer. partant de la, on ne peu plus rien pour toi...

[unanonyme]

bonjour,

quand vous commencez à vous y perdre,
que les évidences deviennent moins certaine sans que l'on puisse expliquer pourquoi,
prenez le temps de créer une mini version du problème.
En travaillant par étape, jusqu'à reproduire précisément le problème rencontré par ailleurs.

Moi j'étais persuadé que c'était un problème de CSS,
vous semblez dire dans votre dernier message que c'est un problème de JS,
en nous sortant des explications très douteuse.

Il y a un problème, mais il y a une difficulté à le localiser.
Il va falloir faire preuve de méthode.

Bonne journée.

[laurentSc]

surment quelque chose entre le clavier et la chaise.

le !important est a proscrire...
il faut que tu refasses ton css sans !important

j'ai déjà lu ça mais je ne sais pas pourquoi...

[Doksuri]

j'ai déjà lu ça mais je ne sais pas pourquoi...

ca ecrase les proprietes sans tenir compte de leurs specificites
ca peut entrainer des comportements non voulus, et c'est complique a maintenir

il vaut mieux utiliser des selecteurs plus specifiques plutot que d'utiliser !important.

par exemple :

Code html :

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

<div id="test" class="test">toto</div>

Code css :

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

1
2
3
4
5
div { color: green; }
.test { color: blue; }
#test { color: red; }
#test.test { color: yellow; }
div#test.test { color: orange; }

ce css generera du texte orange : je l'ai volontairement ecris dans cet ordre car c'est du moins specifique, au plus specifique et chaque ligne plus (+) specifique vient ecraser les precedentes

Code css :

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

1
2
3
4
5
div { color: green !important; }
.test { color: blue; }
#test { color: red; }
#test.test { color: yellow; }
div#test.test { color: orange; }

ce meme code avec le !important sur le selecteur le moins specifique ne sert plus a rien... impossible de venir ecraser la propriete (a moins de venir rajouter des !important partout)
je n'ai pas mis tous les selecteurs possibles juste pour ce div d'exemple (il y en aurai trop)

si on utilise un framework css qui vient styliser un boutton par exemple, on ne veut pas modifier le framework (au risque de tout casser) donc on peu utiliser le !important pour etre sur qu'on ecrasera la propriete
(et encore... avec le bon selecteur, on peut ecraser sans soucis la propriete mise en place par le framework)

[laurentSc]

Pour être sûr de comprendre, avec ton deuxième code CSS (où il y a un !important), ça sera vert ou orange ?

Si on utilise un framework CSS ou un CMS (comme Wordpress), je suppose que la position du code CSS avec !important (avant ou après le code CSS du framework ou du CMS) est important, non ?

[NoSmoking]

Pour être sûr de comprendre, avec ton deuxième code CSS (où il y a un !important), ça sera vert ou orange ?

tes tests ont donnés quoi ?

Si on utilise un framework CSS ou un CMS (comme Wordpress), je suppose que la position du code CSS avec !important (avant ou après le code CSS du framework ou du CMS) est important, non ?

Si deux !important, sur une même propriété, sont rencontrés c'est le dernier « vu » qui sera pris en compte à spécificité du sélecteur équivalente bien sûr.

Mais là on s'éloigne de l'objet de cette discussion même si cela reste lié.


Pour y revenir :

Je crois que je vais faire un jsfiddle avec un simple exemple du probleme.

Je pense effectivement que cela serait le mieux.

En en attendant plus voici un exemple que tu peux tester avec interaction CSS et JS :

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
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Changement classe au scroll</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2161838">
<meta name="category" content="css, js">
<style>
:root {
 --max-width: 60em;
}
html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
main {
  display: block;
  margin: auto;
  max-width: var(--max-width);
}
.for-scroll {
  --bg-color: #EEE8;
  min-height: 150vh;
  background-image: linear-gradient(var(--bg-color), var(--bg-color) 50%, transparent 50%, transparent 100%);
  background-size: 100% 4em;
}
.bg-coloration {
  --bg-color: #DEF8;
}
header {
  display: flex;
  position: fixed;    /*-- [!] pas de sticky si pas de height définie --*/
  top: 0;
  right: 0;
  left: 0;
  align-items: center;
  margin: auto;
  max-width: var(--max-width);
  border: 1px solid #069;
  background-color: #BAD2EF;
}
header h1 {
  margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #069;
}
#logo {               /*-- spécificité 1-0-0 --*/
  width: 256px;
  transition: .5s;
}
#logo.logo-small {    /*-- spécificité 1-1-0 --*/
  width: 128px;
}
@media (max-width:650px) {
  #logo {
    width: 128px;
  }
  #logo.logo-small {
    width: 64px;
  }
}
</style>
</head>
<body>
  <header>
    <img id="logo" src="https://nosmoking.developpez.com/demos/rep-forum/images/droopy-1.png" alt="logo">
    <h1>Titre de la page</h1>
  </header>
  <main class="for-scroll">
  </main>
<script>
document.addEventListener("DOMContentLoaded", () => {
  const elemLogo = document.getElementById("logo");
  const elemMain = document.querySelector("main")
  const minScroll = "200";
  window.addEventListener("scroll", () => {
    // choix action sur la classe CSS
    const action = (window.pageYOffset >= minScroll) ? "add" : "remove";
    elemLogo.classList[action]("logo-small");
    elemMain.classList[action]("bg-coloration");
  });
})
</script>
</body>
</html>

[Danyel]

Merci NoSmoking.

[laurentSc]

tes tests ont donnés quoi ?

j'avais commencé à écrire un test mais interrompu ; comme ce soir, pas le temps, on verra demain...

[Danyel]

j'avais commencé à écrire un test mais interrompu ; comme ce soir, pas le temps, on verra demain...

Le code de NoSmoking fonctionne parfaitement et je suis en train de l'etudier et comparer avec le mien pour trouver d'ou vient le probleme.
Merci en tout cas.

[Danyel]

J'ai enfin trouve le probleme et mon code initial fonctionnait tres bien (enfin presque )
Le probleme etait ailleurs et dans google chrome mobile qui n'affichait/signalait pas une erreur js (une const qui etait nulle sur mobile only et qui bloquait une partie du js (justement celle de l'anim))
J'avais beau tracer le code, mais pas de developper console sur chrome mobile ... (ou je sais pas malgres que j'ai le mode developper active sur android)
En tout cas merci à tous et plus particulierement à NoSmoking.