Resize img avec js et media only screen pour mobile

**Danyel** · 03/02/2024, 18h24

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** · 04/02/2024, 11h11

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** · 04/02/2024, 16h23

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** · 04/02/2024, 16h27

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** · 04/02/2024, 20h32

Envoyé par unanonyme

j'essayerais de supprimer les !important

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

**Doksuri** · 05/02/2024, 09h28

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** · 05/02/2024, 11h53

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** · 05/02/2024, 20h34

Envoyé par Doksuri

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** · 05/02/2024, 20h42

Envoyé par 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">

Affirmatif

Envoyé par NoSmoking

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.

Envoyé par NoSmoking

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

Envoyé par NoSmoking

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** · 07/02/2024, 02h18

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** · 07/02/2024, 09h08

Envoyé par Danyel

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

Envoyé par Danyel

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

surment quelque chose entre le clavier et la chaise.

Envoyé par Danyel

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** · 07/02/2024, 11h16

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** · 07/02/2024, 12h08

Envoyé par Doksuri

surment quelque chose entre le clavier et la chaise.

Envoyé par Doksuri

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** · 07/02/2024, 15h01

Envoyé par laurentSc

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** · 07/02/2024, 17h32

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** · 07/02/2024, 18h45

Envoyé par laurentSc

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 ?

Envoyé par laurentSc

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 :

Envoyé par Danyel

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** · 07/02/2024, 19h49

Merci NoSmoking.

**laurentSc** · 07/02/2024, 22h19

tes tests ont donnés quoi ?

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

**Danyel** · 08/02/2024, 02h20

Envoyé par laurentSc

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** · 08/02/2024, 04h23

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.

Resize img avec js et media only screen pour mobile

CSS

Discussions similaires

Partager

Partager