Boucle for sur les éléments saute 1 item

**patricktoulon** · 06/03/2018, 13h21

Bonjour a tous
un truc qui me rend dingue et j'ai beau controler lettre par lettre le code je ne vois pas l'erreur surtout qu'elle est insensée
j'ai une boucle qui boucle sur tout les element de la classe "slide" et je ne sais pourquoi elle saute celui du milieu
j'ai verifier le code html il est bon
le code de la boucle est tellement simple que je ne vois pas ou peut etre cette erreur mais elle est bien dans cette boucle
j'ai mis des console.log pour verifier

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style>
#conteneur >*{
        user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
.fondd1 {
 border: 1px solid rgb(240, 240, 240);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(220, 220, 220, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
 margin-top: 5px;
}
 
.fondd2 {
 border: 1px solid rgb(250,250,250);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255,255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
 box-shadow: 0 0 1em #BDBDBD inset;
        margin-top: 5px;
}
.fondd1 > div {
 background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
}
 
.fondd2 > div {
 background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
}
 
 
 
 .fondg1 {
 border: 1px solid rgb(245, 245, 245);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255,255, 255, 0.1) 44%, rgba(0, 255, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
  margin-top: 5px;
}
.fondg2 {
 border: 1px solid rgb(250,250,250);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255,255, 255, 1) 44%, rgba(255, 0, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
 box-shadow: 0 0 1em #BDBDBD inset;
        margin-top: 5px;
}
.fondg1 > div {
 box-shadow: 0 0 1em #58D3F7 inset;
        background-color:rgb(245, 245, 245);
      
}
.fondg2 > div {
 box-shadow: 0 0 1em #6E6E6E inset;
        background-color:rgb(245, 245, 245);
}
 
.slide{
     margin-top:5px;
     border:1px solid rgb(240,240,240);
}
 
.slide > div{
       border:1px solid rgb(230,230,230);
}
 
</style>
<script  type= "text/javascript">
var LrG;
var Crs;
var oX;
var newX;
var Mx;
var Dv;
var dragg;
function Start(event) {
 console.log(event.target.id);
 Crs = event.target;
 dragg = Crs.parentElement;
 dragg.className=dragg.getAttribute("cl2");
          LrG = Crs.parentElement.offsetWidth - (Crs.offsetWidth / 2);
 Dv = (LrG - (Crs.offsetWidth / 2)) / 100;
 oX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
 Mx = oX - Crs.offsetLeft;
 dragg.addEventListener("mousemove", dragging, false);
 dragg.addEventListener("mouseup", relache, false);
 dragg.addEventListener("mouseleave", relache, false);
}
function dragging(event) {
 newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
 console.log("deplacement " + newX);
 var posX = newX - Mx;
 if (posX < 0) {
  posX = 0;
 }
 if (posX > LrG - (Crs.offsetWidth / 2)) {
  posX = LrG - (Crs.offsetWidth / 2);
 }
 Crs.style.position = "absolute";
 Crs.style.left = posX + "px";
 document.getElementById("res").innerHTML = Crs.id + " : " + Math.round(Crs.offsetLeft / Dv);
}
function relache(event) {
 console.log(Crs.id);
 dragg.removeEventListener("mousemove", dragging);
 dragg.removeEventListener("mouseup", relache);
 dragg.removeEventListener("mouseleave", relache);
        dragg.className=dragg.getAttribute("cl1");
       }
function ajoute() {
 var messlides = document.getElementsByClassName("slide");
        console.log("attribution de l'evenement down"); 
          for (var i = 0; i < messlides.length; i++) {
     messlides[i].getElementsByTagName("DIV")[0].addEventListener("mousedown", Start, false);
            console.log("slider : " + messlides[i].id);
                   console.log ("curseur : " + messlides[i].getElementsByTagName("DIV")[0].id);
                   messlides[i].className=messlides[i].getAttribute("cl1");
          }
}
 
</script>
 
</head>
<body>
<div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
      des slides pas comme les autres 
      <p id ="res">position</p>
      <br/><br/>
 
 
      <div id="fond5"  class="slide"  cl1="fondd1" cl2="fondd2" style="position:relative;width:300px;height:26px;overflow:none;" >
         <div id="Crs5" class="cur" style="position:absolute;top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
      </div>
      <div id="fond6"  class="slide"  cl1="fondd1" cl2="fondd2" style="position:relative;width:300px;height:26px;overflow:none;" >
         <div id="Crs6" class="cur" style="position:absolute;top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
      </div>
 
      <div id="fond7"  class="slide"  cl1="fondg1" cl2="fondg2" style="position:relative;width:300px;height:26px;overflow:none;" >
         <div id="Crs7" class="cur" style="position:absolute;top:1px;width:26px;height:26px;border-radius:50%;" unselectable="on"></div>
      </div>
</div>
 <script> ajoute();</script>  
</body>
</html>

dans la capture ci dessous on vois bien que le fond6 avec son curseur crs6 n'est pas listé
Nom : Capture.JPG
Affichages : 440
Taille : 70,6 Ko

**Beginner.** · 06/03/2018, 14h08

Salut,

C'est normal, tu n'as pas tenu compte de la remarque de Watilin au message #7...

**NoSmoking** · 06/03/2018, 14h12

Bonjour,
cela tiens à la méthode utilisée, à savoir getElementsByClassName qui retourne une NodeList dynamique ce qui veut dire que toute modification effectuée sur un de ses éléments est prise en compte et la liste est mise à jour.

Comme plus loin dans ton code tu modifies la className des éléments celui en cours de traitement est retiré de la NodeList et de ce fait l'élément en position 2 passe en position 1. Comme le compteur i est incrémenté cet élément est ignoré.

Remplace la méthode getElementsByClassName par querySelectorAll(".slide") qui elle renvoie un NodeList statique.

[EDIT]

C'est normal, tu n'as pas tenu compte de la remarque de Watilin au message #7...

tout à fait, pas suivi cette discussion de Patrick

[ReEDIT]
Remplacement du terme listNode en NodeList pour respecter la littérature.

**Beginner.** · 06/03/2018, 14h14

Quand tu fais var messlides = document.getElementsByClassName("slide"); tu obtiens une nodeLisit qui peut changer (qui est actualisée en fonction des changements) et notamment sa taille peut changer, elle vaut 3 au début ensuite tu modifies les choses avec messlides[i].className = messlides[i].getAttribute("cl1"); après cette instruction la taille de messlides passe à 2 puisque tu as modifié la class (l'élement n'a du coup plus la class "slider" et alors il ne reste plus que deux élèments avec la class "slider" ce qui fausse le reste de ton code...

EDIT : Ah je viens de voir la réponse de NoSmoKing qui explique aussi les choses...

Sinon je ne comprends pas pourquoi tu n'utilises pas les méthodes équivalentes à celle de classList proposés par psychadelic au lieu d'utiliser ces attributs...

Envoyé par NoSmoking

tout à fait, pas suivi cette discussion de Patrick :oops:

Ça lui fait une explication supplémentaire...

**Beginner.** · 06/03/2018, 14h46

Sinon tu pouvais aussi utiliser la class "cur" :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
function ajoute() {
            var messlides = document.getElementsByClassName("cur");
            console.log("attribution de l'evenement down");
            for (var i = 0; i < messlides.length; i++) {
                messlides[i].addEventListener("mousedown", Start, false);
                console.log("slider : " + messlides[i].parentElement.id);
                console.log("curseur : " + messlides[i].id);
                messlides[i].parentElement.className = messlides[i].parentElement.getAttribute("cl1");
            }
        }

**psychadelic** · 06/03/2018, 15h41

Désolé, mais je ne peux pas utiliser ton systeme avec des faux attributs CL1 et CL2

Je trouve aussi que c'est une mauvaise idée, parce que je fais pas mal de TMA, et on préfère tous que le code suive des "standards", car les multiples astuces rendent fou ceux qui font de la maintenance.

donc, voici - à mon sens - comment tu devrai coder tes slider:

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style>
                #conteneur * {                  /*---- petite erreur, ici ne pas mettre de sélecteur direct,  ( #conteneur>* ) --------------*/
                        user-select: none;
                        -moz-user-select: none;
                        -webkit-user-select: none;
                }
                .slide {
                        position:relative;
                        overflow:hidden;          /* la valeur "none" n'existe pas cet attribut */
                        margin-top: 5px;
                        border: 1px solid rgb(240, 240, 240);
                }
 
                .slide>div {
                        position:absolute;
                        border: 1px solid rgb(230, 230, 230);
                }
 
                #fond5, #fond6 {
                        border: 1px solid rgb(240, 240, 240);
                        border-radius: 10px;
                        background: linear-gradient(to bottom, rgba(220, 220, 220, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
                        margin-top: 5px;
                }
                #fond5>div , #fond6>div {
                        background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
                }
 
                #fond5.ModActif, #fond6.ModActif {
                        border: 1px solid rgb(250, 250, 250);
                        border-radius: 10px;
                        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
                        box-shadow: 0 0 1em #BDBDBD inset;
                        margin-top: 5px;
                }
                #fond5.ModActif>div, #fond6.ModActif>div {
                        background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
                }
 
 
                #fond7 {
                        border: 1px solid rgb(245, 245, 245);
                        border-radius: 10px;
                        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 44%, rgba(0, 255, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
                        margin-top: 5px;
                }
 
                #fond7>div {
                        box-shadow: 0 0 1em #58D3F7 inset;
                        background-color: rgb(245, 245, 245);
 
                }
 
                #fond7.ModActif {
                        border: 1px solid rgb(250, 250, 250);
                        border-radius: 10px;
                        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
                        box-shadow: 0 0 1em #BDBDBD inset;
                        margin-top: 5px;
                }
 
                #fond7.ModActif>div {
                        box-shadow: 0 0 1em #6E6E6E inset;
                        background-color: rgb(245, 245, 245);
                }
 
 
        </style>
	<script type="text/javascript">
                var LrG;
                var Crs;
                var oX;
                var newX;
                var Mx;
                var Dv;
                var dragg;
 
                function Start(event) {
                        console.log(event.target.id);
                        Crs = event.target;
                        dragg = Crs.parentElement;
                        // dragg.className = dragg.getAttribute("cl2");
                        addClass(dragg, "ModActif");
                        LrG = Crs.parentElement.offsetWidth - (Crs.offsetWidth / 2);
                        Dv = (LrG - (Crs.offsetWidth / 2)) / 100;
                        oX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
                        Mx = oX - Crs.offsetLeft;
                        dragg.addEventListener("mousemove", dragging, false);
                        dragg.addEventListener("mouseup", relache, false);
                        dragg.addEventListener("mouseleave", relache, false);
                }
 
                function dragging(event) {
                        newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
                        console.log("deplacement " + newX);
                        var posX = newX - Mx;
                        if (posX < 0) {
                                posX = 0;
                        }
                        if (posX > LrG - (Crs.offsetWidth / 2)) {
                                posX = LrG - (Crs.offsetWidth / 2);
                        }
                        Crs.style.position = "absolute";
                        Crs.style.left = posX + "px";
                        document.getElementById("res").innerHTML = Crs.id + " : " + Math.round(Crs.offsetLeft / Dv);
                }
 
                function relache(event) {
                        console.log(Crs.id);
                        dragg.removeEventListener("mousemove", dragging);
                        dragg.removeEventListener("mouseup", relache);
                        dragg.removeEventListener("mouseleave", relache);
                        //dragg.className = dragg.getAttribute("cl1");
                        removeClass(dragg, "ModActif");
                }
 
                function ajoute() {
                        var messlides = document.getElementsByClassName("slide");
                        console.log("attribution de l'evenement down");
                        for (var i = 0; i < messlides.length; i++) {
                                messlides[i].getElementsByTagName("DIV")[0].addEventListener("mousedown", Start, false);
                                console.log("slider : " + messlides[i].id);
                                console.log("curseur : " + messlides[i].getElementsByTagName("DIV")[0].id);
                        }
                }
 
 
                /* fonctions de substitution sur l'ajout / suppression de Classe pour les anciennes versin de JS */
                        function hasClass(el, className) {
                                return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
                        }
                        function addClass(el, className) {
                                if (!hasClass(el, className))
                                        el.className += " " + className;
                        }
                        function removeClass(el, className) {
                                if (hasClass(el, className)) {
                                        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
                                        el.className = el.className.replace(reg, ' ');
                                }
                        }
                /* */
 
        </script>
 
</head>
 
<body>
	<div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
		des slides pas comme les autres
		<p id="res">position</p>
		<br/>
		<br/>
 
 
		<div id="fond5" class="slide" style="width:300px;height:26px;">
			<div id="Crs5" class="cur" style="top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
		</div>
		<div id="fond6" class="slide" style="width:300px;height:26px;">
			<div id="Crs6" class="cur" style="top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
		</div>
 
		<div id="fond7" class="slide" style="width:300px;height:26px;">
			<div id="Crs7" class="cur" style="top:1px;width:26px;height:26px;border-radius:50%;" unselectable="on"></div>
		</div>
	</div>
	<script>
                ajoute();
        </script>
</body>
</html>

**Beginner.** · 06/03/2018, 16h35

Je remplacerais aussi messlides[i].getElementsByTagName("DIV")[0].addEventListener("mousedown", Start, false); par messlides[i].firstChild.addEventListener("mousedown", Start, false);... Même si cela ne joue pas beaucoup...

**patricktoulon** · 06/03/2018, 17h00

re
bonjour beguinner
avec firstChild plus d'evenement du tout avec les 3 explorateurs FF,IE CHrome
parcontre Children[0] oui

bref une enigme de plus je suis pas pret de l'intégrer dans mon app excel ce truc
regarde la capture c'est moi qui deraille ou bien ??
si encore c'etait le dernier ou le premier je soupconnerais l'indexation mais la il n'y a aucunne raison surtout qu'avant le boucle dans la console on vois bien qu'il y en a 3
imcomprehensible j'ai meme copié le code html du premier puisqu'il fonctionne en changeant le id et le cl1 et cl2
absolument rien n'y fait
je deviens fou avec ce language

Nom : Capture.JPG
Affichages : 379
Taille : 204,9 Ko

edit:
en plus je viens de remarquer que des que j'ajoute la balise meta compatible ie=edge
le css ci dessous ne fait plus son effet

Code :

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

1
2
3
4
5
6
7
8
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS Bin</title>
<style>
#conteneur > *{
       -moz-user-select: none;
 -webkit-user-select: none;
       user-select: none;
}

au cas ou vous vous posez la question avec queryselectroall(".slide") je n'ai plus rien et puis de toute facon il deraille sur le support vba donc
y aurait t il un moyen de boucler du dernier au premier en vba on fait comme ca pour ne pas perdre l'indexation apres changement de classe

un truc de fou j'ai l'impression de m'emmerder pour rien y aura toujours quelques chose qui tourne pas rond si dans IE 10 et 11 ca ne peut pas fonctionner c'est pas la peine ca me sert a rien les autres explorateurs ne les utilisant pas c'a ne m'est d'aucun interet

**Beginner.** · 06/03/2018, 18h57

Envoyé par patricktoulon

re
bonjour beguinner
avec firstChild plus d'evenement du tout avec les 3 explorateurs FF,IE CHrome
parcontre Children[0] oui

Oui désolé c'est plutôt firstElementChild ou Children[0]...

Sinon pour le reste on t'a donné plusieurs explications et solutions, j'avais expliqué ceci :

C'est normal, tu n'as pas tenu compte de la remarque de Watilin au message #7...[/B]

Quand tu fais var messlides = document.getElementsByClassName("slide"); tu obtiens une nodeLisit qui peut changer (qui est actualisée en fonction des changements) et notamment sa taille peut changer, elle vaut 3 au début ensuite tu modifies les choses avec messlides[i].className = messlides[i].getAttribute("cl1"); après cette instruction la taille de messlides passe à 2 puisque tu as modifié la class (l'élement n'a du coup plus la class "slider" et alors il ne reste plus que deux élèments avec la class "slider" ce qui fausse le reste de ton code...

Il y a aussi l’explication de NoSmoKing et la réponse de psychadelic...

--->

Voilà ta fonction retravaillée :

Code :

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

1
2
3
4
5
6
7
8
9
10
function ajoute() {
            var messlides = document.querySelectorAll(".slide");
            console.log("attribution de l'evenement down");
            for (var i = 0; i < messlides.length; i++) {
                messlides[i].firstElementChild.addEventListener("mousedown", Start, false);
                console.log("slider : " + messlides[i].id);
                console.log("curseur : " + messlides[i].getElementsByTagName("DIV")[0].id);
                messlides[i].className = messlides[i].getAttribute("cl1");
            }
        }

Mais je te conseil le code de psychadelic avec l’alternative à classList que NoSmoKing avait utilisé...

**patricktoulon** · 06/03/2018, 19h20

re
merci beguinner
bon ca a l'air de fonctionner sur le 4 support et grande surprise en meta edge et non 10 ou 11 queryselector match dans le support vba
ca va me changer la vie ca
je vais verifier si tout le reste d'avant fonctionne en mode compatible edge

par contre j'ai toujours pas determiné pour quoi le unselectable dans une classe global css ne fonctionne pas je suis obligé de laisser le unselectable="on" dans le style inline pour IE
si j'enleve la meta compatible je peux les enlever mais alors le queryselector walouh walouh

j'en ai la migraine avec ces histoires de compatibilité
bref ca marche ca suffit

je vais tester aussi classeList en mode edge pour voir en testant le reste aussi

en gros quand je developpe IE 10 ca marche partout mais je n'ai pas les queryselector classList et compagnie et j'ai certaine partie css3 qui deraille

en mode edge tout ce qui fonctionnait en mode 10 c'est un peu des ratés mais visiblement j'ai les fonctions recentes mais pas tout certaine sont fatales dans le support vba

bref

allons y pour le test classList
je reviens plus tard

merci a tous

**patricktoulon** · 06/03/2018, 20h03

bon ben classList fonctionne aussi en mode edge sur les 4 supports

oh puré que je le bin ce jsbin

model sur jsbin

le plus important pour moi etant celui ci
Nom : demo2.gif
Affichages : 406
Taille : 193,2 Ko

et le comble c'est que ca fonctionne en HTA aussi

**psychadelic** · 07/03/2018, 00h00

tu a gardé tes faux attributs [ cl1="fondg1" cl2="fondg2" ] alors mon exemple exlpique comment se passer de cette "astuce"....
je suis déçu, mais alors déçu à un point que tu peux pas imaginer,
je suis même pire que déçu, je suis aussi complètement médusé et désabusé et même entièrement désillusionné, je m'en remettrai pas, c'est impossible..

**patricktoulon** · 07/03/2018, 09h05

re
Bonjour Psychadelic

re d'accords sur ton exemple dans les classe css tu part du #ID.modactif/ou pas c'est bien ca ?

médusé !!

c'est pas plus mal tu a raison on sait ou aller chercher pour le debugage

n'oubliez pas que j'ai pas les meme reflexes que vous encore

dans tout les cas j'ai du boulot il faut tout que je réencode mes app hta et vba/web pour benificier de toutes ces fonctions recentes en mode edge et j'en ai quelques unes

pour la fausse fonction classLIst plus besoins l'originale fonctionne en mode edge
ca va pas trop le moral dans les chaussettes

**patricktoulon** · 07/03/2018, 09h59

re
voila qui va te redonner le moral

selon ta methode
j'en ai profité pour reduire le style inline html a son minimum c'est a dire a n'avoir que les dimentions car en realité ces slider seront construits dynamiquement

2 petites choses que je comprends pas c'est les deux classe css qui ne fonctionne je suis obligé de mettre la premiere a chaque fois dans les classe (actif/noactif) et la seconde dans le inline pour IE

sinon ca fonctionne bien

ces deux class la

Code css :

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

1
2
3
4
5
6
7
8
9
#conteneur > div {
 position: relative;
 overflow: none;
}
#conteneur >* {
 -moz-user-select: none;
 -webkit-user-select: none;
 user-select: none;
}

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Menu slide border radius</title>
<style>
#conteneur >* {
 -moz-user-select: none;
 -webkit-user-select: none;
 user-select: none;
}
#fond5.noactif {
 border: 1px solid rgb(240, 240, 240);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(220, 220, 220, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
 margin-top: 5px;
 position: relative;
 overflow: none;
}
#fond5.actif {
 border: 1px solid rgb(250, 250, 250);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
 box-shadow: 0 0 1em #BDBDBD inset;
 margin-top: 5px;
 position: relative;
 overflow: none;
}
#fond5.noactif> div {
 background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
}
#fond5.actif > div {
 background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
}
#fond6.noactif {
 border: 1px solid rgb(240, 240, 240);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
 margin-top: 5px;
 position: relative;
 overflow: none;
}
#fond6.actif {
 border: 1px solid rgb(250, 220, 0);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
 box-shadow: 0 0 1em rgb(255, 100, 0) inset;
 margin-top: 5px;
 position: relative;
 overflow: none;
}
#fond6.noactif > div {
 background: linear-gradient(to bottom, rgba(80, 134, 196, 1) 1%, rgba(62, 92, 201, 1) 43%, rgba(62, 92, 201, 1) 56%, rgba(80, 134, 196, 1) 100%);
}
#fond6.actif > div {
 background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
}
#fond7.noactif {
 border: 1px solid rgb(245, 245, 245);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 44%, rgba(0, 255, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
 margin-top: 5px;
 position: relative;
 overflow: none;
}
#fond7.actif {
 border: 1px solid rgb(250, 250, 250);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
 box-shadow: 0 0 1em #BDBDBD inset;
 margin-top: 5px;
 position: relative;
 overflow: none;
}
#fond7.noactif > div {
 box-shadow: 0 0 1em #58D3F7 inset;
 background-color: rgb(245, 245, 245);
}
#fond7.actif > div {
 box-shadow: 0 0 1em #6E6E6E inset;
 background-color: rgb(245, 245, 245);
}
.slide {
 margin-top: 5px;
 border: 1px solid rgb(240, 240, 240);
}
.slide > div {
 border: 1px solid rgb(230, 230, 230);
}
#conteneur > div {
 position: relative;
 overflow: none;
}
.cur {
 position: absolute;
}
</style>
<script  type= "text/javascript">
var LrG;
var Crs;
var oX;
var newX;
var Mx;
var Dv;
var dragg;
function Start(event) {
 console.log(event.target.id);
 Crs = event.target;
 dragg = Crs.parentElement;
 dragg.classList.add ("actif");
        LrG = Crs.parentElement.offsetWidth - (Crs.offsetWidth / 2);
 Dv = (LrG - (Crs.offsetWidth / 2)) / 100;
 oX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
 Mx = oX - Crs.offsetLeft;
 dragg.addEventListener("mousemove", dragging, false);
 dragg.addEventListener("mouseup", relache, false);
 dragg.addEventListener("mouseleave", relache, false);
}
function dragging(event) {
 newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
 console.log("deplacement " + newX);
 var posX = newX - Mx;
 if (posX < 0) {
  posX = 0;
 }
 if (posX > LrG - (Crs.offsetWidth / 2)) {
  posX = LrG - (Crs.offsetWidth / 2);
 }
 Crs.style.position = "absolute";
 Crs.style.left = posX + "px";
 document.getElementById("res").innerHTML = Crs.id + " : " + Math.round(Crs.offsetLeft / Dv);
}
function relache(event) {
 dragg.removeEventListener("mousemove", dragging);
 dragg.removeEventListener("mouseup", relache);
 dragg.removeEventListener("mouseleave", relache);
        dragg.classList.remove ("actif");
       }
function ajoute() {
            var messlides = document.querySelectorAll(".noactif");
             for (var i = 0; i < messlides.length; i++) {
                messlides[i].firstElementChild.addEventListener("mousedown", Start, false);
             }
        }
 
</script>
 
</head>
<body>
<div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
      des slides pas comme les autres 
      <p id ="res">position</p>
      <br/><br/>
 
 
      <div id="fond5"  class="noactif" style="width:300px;height:26px;" >
         <div id="Crs5" class="cur" style="top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
      </div>
      <div id="fond6"  class="noactif"  style="width:300px;height:26px;" >
         <div id="Crs6" class="cur" style="top:7px;width:26px;height:14px;border-radius:8px;" unselectable="on"></div>
      </div>
 
      <div id="fond7"  class="noactif" style="width:300px;height:26px;" >
         <div id="Crs7" class="cur" style="top:1px;width:26px;height:26px;border-radius:50%;" unselectable="on"></div>
      </div>
</div>
 <script> ajoute();</script>  
</body>
</html>

ca va mieux la ?

**psychadelic** · 07/03/2018, 17h11

vi, j'aime beaucoup plus mieux

et du coup, c'est bien tu commence à devenir un cake

donc:

Code CSS :

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

1
2
3
4
#conteneur > div {
  position: relative;
  overflow: none;
}

alors primo l'instruction css => overflow: none; n'existe pas, la bonne syntaxe c'est overflow: hidden;

voir : https://developer.mozilla.org/fr/docs/Web/CSS/overflow

ensuite...

utiliser #conteneur > div { n'est pas une mauvaise idée en soit, mais c'est casse gueule à l'usage et il faut mieux créer une classe plus précise pour tout ce qui doit utiliser les même instructions css

donc dans ton cas je te propose cette écriture:

Code CSS :

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

1
2
3
4
5
.slide {
  position: relative;
  margin-top: 5px;
  overflow: hidden;
}

( j'en ai prifité pour rajouter le margin-top: 5px; qui se repete lui aussi )

ce qui du coté code HTML donne :

Code HTML :

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

<div id="fond6" class="slide noactif" style="width:300px;height:26px;">

et oui on peut mettre autant de classes qu'on veut

au passage puisque tes sliders on forcément un curseur en position absolute,
au lieu d'écrire : .cur { tu peut mettre : .slide > div {
mais perso je préfere écrire .slide > div.cur { ce qui permet de comprendre des années plus tard qu'il ne s'agit que des curseurs apartenant qu'a des slide et évite toute confusion si par la suite ce même code est utilisé dans une page comportant aussi des curseurs servant à autre chose.

pour la seconde partie de ta question je ne saurai trop quoi te repondren parce que je n'ai pas d'IE sur ma machine Linux....

Sinon une hypotese d'écriture :

Code CSS :

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

1
2
3
4
5
#conteneur > * {
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}}

c.a.d. de les placer dans cet ordre la, car IE rejettera les instructions css pour les navigateurs de la famille Mozzila, et celles du WebKit, donc autant lui donner en premier quelque chose qu'il doit savoir faire, avant qui ne se bloque sur les suivantes ???

sinon je vois pas trop l'utilité ici du selecteur > parce qu'il signifie que seuls les enfants directs y sont soumis, et non leurs enfants, tel le curseur ici... ?

La suite:

donc, du coup le fait de mettre une classe slide en commun "pour tous" j'ai preéféré changer l'affectation du mousedown:

Code JavaScript :

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

var messlides = document.querySelectorAll(".noactif");

en

Code JavaScript :

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

var messlides = document.querySelectorAll(".slide");

et qui une autre utilité, car tes classes noactif sont inutiles, car jamais utilisées réellement

donc cela donne :

Code CSS :

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

1
2
3
4
5
#fond5 {
   /* ... */ 
 
#fond5>div {
   /* ... */

au lieu de

Code CSS :

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

1
2
3
4
5
 #fond5.noactif {
 /* ... */ 
 
#fond5.noactif>div {
 /* ... */

je juste fait ici pour le #fond5

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html>
 
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Menu slide border radius</title>
	<style>
                #conteneur>* {
                        user-select: none;
                        -moz-user-select: none;
                        -webkit-user-select: none;
                }
 
                .slide {
                        position: relative;
                        margin-top: 5px;
                        overflow: hidden;
                }
 
                /*  .cur {   */
                /*  .slide > div  {   */
                .slide > div.cur { 
                        position: absolute;
                }
 
                /* #fond5.noactif { */
                #fond5 {
                        border: 1px solid rgb(240, 240, 240);
                        border-radius: 10px;
                        background: linear-gradient(to bottom, rgba(220, 220, 220, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
                }
                /* #fond5.noactif>div { */
                #fond5>div {
                        background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
                }
 
                #fond5.actif {
                        border: 1px solid rgb(250, 250, 250);
                        border-radius: 10px;
                        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
                        box-shadow: 0 0 1em #BDBDBD inset;
                }
 
                #fond5.actif>div {
                        background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
                }
 
                #fond6.noactif {
                        border: 1px solid rgb(240, 240, 240);
                        border-radius: 10px;
                        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
                }
 
                #fond6.actif {
                        border: 1px solid rgb(250, 220, 0);
                        border-radius: 10px;
                        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
                        box-shadow: 0 0 1em rgb(255, 100, 0) inset;
                }
 
                #fond6.noactif>div {
                        background: linear-gradient(to bottom, rgba(80, 134, 196, 1) 1%, rgba(62, 92, 201, 1) 43%, rgba(62, 92, 201, 1) 56%, rgba(80, 134, 196, 1) 100%);
                }
 
                #fond6.actif>div {
                        background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
                }
 
                #fond7.noactif {
                        border: 1px solid rgb(245, 245, 245);
                        border-radius: 10px;
                        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 44%, rgba(0, 255, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
                }
 
                #fond7.actif {
                        border: 1px solid rgb(250, 250, 250);
                        border-radius: 10px;
                        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
                        box-shadow: 0 0 1em #BDBDBD inset;
                }
 
                #fond7.noactif>div {
                        box-shadow: 0 0 1em #58D3F7 inset;
                        background-color: rgb(245, 245, 245);
                }
 
                #fond7.actif>div {
                        box-shadow: 0 0 1em #6E6E6E inset;
                        background-color: rgb(245, 245, 245);
                }
 
 
        </style>
	<script type="text/javascript">
                var LrG;
                var Crs;
                var oX;
                var newX;
                var Mx;
                var Dv;
                var dragg;
 
                function Start(event) {
                        console.log(event.target.id);
                        Crs = event.target;
                        dragg = Crs.parentElement;
                        dragg.classList.add("actif");
 
                        LrG = Crs.parentElement.offsetWidth - (Crs.offsetWidth / 2);
                        Dv = (LrG - (Crs.offsetWidth / 2)) / 100;
                        oX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
                        Mx = oX - Crs.offsetLeft;
                        dragg.addEventListener("mousemove", dragging, false);
                        dragg.addEventListener("mouseup", relache, false);
                        dragg.addEventListener("mouseleave", relache, false);
                }
 
                function dragging(event) {
                        newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
                        console.log("deplacement " + newX);
                        var posX = newX - Mx;
                        if (posX < 0) {
                                posX = 0;
                        }
                        if (posX > LrG - (Crs.offsetWidth / 2)) {
                                posX = LrG - (Crs.offsetWidth / 2);
                        }
                        Crs.style.position = "absolute";
                        Crs.style.left = posX + "px";
                        document.getElementById("res").innerHTML = Crs.id + " : " + Math.round(Crs.offsetLeft / Dv);
                }
 
                function relache(event) {
                        dragg.removeEventListener("mousemove", dragging);
                        dragg.removeEventListener("mouseup", relache);
                        dragg.removeEventListener("mouseleave", relache);
                        dragg.classList.remove("actif");
                }
 
                function ajoute() {
                        // var messlides = document.querySelectorAll(".noactif");
                        var messlides = document.querySelectorAll(".slide");
                        for (var i = 0; i < messlides.length; i++) {
                                messlides[i].firstElementChild.addEventListener("mousedown", Start, false);
                        }
                }
        </script>
 
</head>
 
<body>
	<div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
		des slides pas comme les autres
		<p id="res">position</p>
		<br/>
		<br/>
 
		<!-- div id="fond5" class="slide noactif" style="width:300px;height:26px;" -->
		<div id="fond5" class="slide" style="width:300px;height:26px;">
				<div id="Crs5" class="cur" style="top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
		</div>
		<div id="fond6" class="slide noactif" style="width:300px;height:26px;">
			<div id="Crs6" class="cur" style="top:7px;width:26px;height:14px;border-radius:8px;" unselectable="on"></div>
		</div>
 
		<div id="fond7" class="slide noactif" style="width:300px;height:26px;">
			<div id="Crs7" class="cur" style="top:1px;width:26px;height:26px;border-radius:50%;" unselectable="on"></div>
		</div>
	</div>
	<script>
                ajoute();
        </script>
</body>
 
</html>

**patricktoulon** · 07/03/2018, 17h26

ok je garde donc "la classe slide et et noactive" des le depart

pour le replace dans l'ordre pour les unselectable ca ne parche pas dans IE j'avais deja essayé au cas ou effectivement IE n'execute pas le reste du code apres echec

bon ben je le laisse dans le inline n'ayant pas de reponse sur ce point

hi son'bo mescurseur

et transportable en plus cé'bo'la vie

**patricktoulon** · 07/03/2018, 18h01

re
voila la version aboutie
j'ai trouver la raison du unselectable
c'est pas user-select mais ms-user-select pour IE
j'ai donc revu les classe css et utiliser slide pour etre precis

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS Bin</title>
<style>
.slide{
 position: relative;
 overflow: hidden;
        user-select: none;
        -moz-user-select: none;
 -webkit-user-select: none;
        -ms-user-select: none;
        margin-top: 5px;
 border: 1px solid rgb(240, 240, 240);
}
.slide > div {
 position: absolute;
        -ms-user-select: none;
        user-select: none;
        -moz-user-select: none;
 -webkit-user-select: none;
        border: 1px solid rgb(230, 230, 230);        
        
}
#fond5 {
 border: 1px solid rgb(240, 240, 240);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(220, 220, 220, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
 margin-top: 5px;
 
}
#fond5.actif {
 border: 1px solid rgb(250, 250, 250);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
 box-shadow: 0 0 1em #BDBDBD inset;
 margin-top: 5px;
 
}
#fond5> div {
 background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
}
#fond5.actif > div {
 background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
}
#fond6 {
 border: 1px solid rgb(240, 240, 240);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
 margin-top: 5px;
 
}
#fond6.actif {
 border: 1px solid rgb(250, 220, 0);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
 box-shadow: 0 0 1em rgb(255, 100, 0) inset;
 margin-top: 5px;
 
}
#fond6 > div {
 background: linear-gradient(to bottom, rgba(80, 134, 196, 1) 1%, rgba(62, 92, 201, 1) 43%, rgba(62, 92, 201, 1) 56%, rgba(80, 134, 196, 1) 100%);
}
#fond6.actif > div {
 background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
}
#fond7 {
 border: 1px solid rgb(245, 245, 245);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 44%, rgba(0, 255, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
 margin-top: 5px;
 
}
#fond7.actif {
 border: 1px solid rgb(250, 250, 250);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
 box-shadow: 0 0 1em #BDBDBD inset;
 margin-top: 5px;
 
}
#fond7 > div {
 box-shadow: 0 0 1em #58D3F7 inset;
 background-color: rgb(245, 245, 245);
}
#fond7.actif > div {
 box-shadow: 0 0 1em #6E6E6E inset;
 background-color: rgb(245, 245, 245);
}
 
</style>
<script  type= "text/javascript">
var LrG;
var Crs;
var oX;
var newX;
var Mx;
var Dv;
var dragg;
function Start(event) {
 console.log(event.target.id);
 Crs = event.target;
 dragg = Crs.parentElement;
 dragg.classList.add ("actif");
        LrG = Crs.parentElement.offsetWidth - (Crs.offsetWidth / 2);
 Dv = (LrG - (Crs.offsetWidth / 2)) / 100;
 oX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
 Mx = oX - Crs.offsetLeft;
 dragg.addEventListener("mousemove", dragging, false);
 dragg.addEventListener("mouseup", relache, false);
 dragg.addEventListener("mouseleave", relache, false);
}
function dragging(event) {
 newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
 console.log("deplacement " + newX);
 var posX = newX - Mx;
 if (posX < 0) {
  posX = 0;
 }
 if (posX > LrG - (Crs.offsetWidth / 2)) {
  posX = LrG - (Crs.offsetWidth / 2);
 }
 Crs.style.position = "absolute";
 Crs.style.left = posX + "px";
 document.getElementById("res").innerHTML = Crs.id + " : " + Math.round(Crs.offsetLeft / Dv);
}
function relache(event) {
 dragg.removeEventListener("mousemove", dragging);
 dragg.removeEventListener("mouseup", relache);
 dragg.removeEventListener("mouseleave", relache);
        dragg.classList.remove ("actif");
       }
function ajoute() {
            var messlides = document.querySelectorAll(".slide");
             for (var i = 0; i < messlides.length; i++) {
                messlides[i].firstElementChild.addEventListener("mousedown", Start, false);
             }
        }
 
</script>
 
</head>
<body>
<div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
      des slides pas comme les autres 
      <p id ="res">position</p>
      <br/><br/>
 
 
      <div id="fond5"  class="slide" style="width:300px;height:26px;" >
         <div id="Crs5" class="cur" style="top:0px;width:26px;height:26px;border-radius:8px;" ></div>
      </div>
      <div id="fond6"  class="slide"  style="width:300px;height:26px;" >
         <div id="Crs6" class="cur" style="top:7px;width:26px;height:14px;border-radius:8px;"></div>
      </div>
 
      <div id="fond7"  class="slide" style="width:300px;height:26px;" >
         <div id="Crs7" class="cur" style="top:0px;width:26px;height:26px;border-radius:50%;"></div>
      </div>
</div>
 <script> ajoute();</script>  
</body>
</html>

on peu meme enlever les margin-top dans les classes "#fond....."

ou Sur Jsbin

**patricktoulon** · 07/03/2018, 18h22

et quoi que en y réfléchissant un peu et surtout histoire d'augmenter ton taux d'adrénaline et donc ton etat dépressif

ton idée d'utiliser les IDs n'est pas forcement une bonne solution

imagine que j'ajoute un slider donc "fond8" et que je veux qu'il est le meme style que le "fond5" je fait quoi? j'ajoute encore une classe

t'habite loin au moins ??? hein rassure moi

en l'etat je regle le probleme comme suit regarde les classes #fond5...... maintenant c'est pas pratique tu en conviendra
surtout si par exemple je decide d'utiliser ce module pour une dizaine de sliders identiques
la notion de transportabilité en est reduite

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS Bin</title>
<style>
.slide{
 position: relative;
 overflow: hidden;
        user-select: none;
        -moz-user-select: none;
 -webkit-user-select: none;
        -ms-user-select: none;
        margin-top: 5px;
 border: 1px solid rgb(240, 240, 240);
}
.slide > div {
 position: absolute;
        -ms-user-select: none;
        user-select: none;
        -moz-user-select: none;
 -webkit-user-select: none;
        border: 1px solid rgb(230, 230, 230);        
        
}
#fond5,#fond8 {
 border: 1px solid rgb(240, 240, 240);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(220, 220, 220, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
 margin-top: 5px;
 
}
#fond5.actif ,#fond8.actif{
 border: 1px solid rgb(250, 250, 250);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
 box-shadow: 0 0 1em #BDBDBD inset;
 margin-top: 5px;
 
}
#fond5 > div  ,#fond8 > div{
 background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
}
#fond5.actif > div,#fond8.actif > div{
 background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
}
#fond6 {
 border: 1px solid rgb(240, 240, 240);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
 margin-top: 5px;
 
}
#fond6.actif {
 border: 1px solid rgb(250, 220, 0);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
 box-shadow: 0 0 1em rgb(255, 100, 0) inset;
 margin-top: 5px;
 
}
#fond6 > div {
 background: linear-gradient(to bottom, rgba(80, 134, 196, 1) 1%, rgba(62, 92, 201, 1) 43%, rgba(62, 92, 201, 1) 56%, rgba(80, 134, 196, 1) 100%);
}
#fond6.actif > div {
 background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
}
#fond7 {
 border: 1px solid rgb(245, 245, 245);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 44%, rgba(0, 255, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
 margin-top: 5px;
 
}
#fond7.actif {
 border: 1px solid rgb(250, 250, 250);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
 box-shadow: 0 0 1em #BDBDBD inset;
 margin-top: 5px;
 
}
#fond7 > div {
 box-shadow: 0 0 1em #58D3F7 inset;
 background-color: rgb(245, 245, 245);
}
#fond7.actif > div {
 box-shadow: 0 0 1em #6E6E6E inset;
 background-color: rgb(245, 245, 245);
}
 
</style>
<script  type= "text/javascript">
var LrG;
var Crs;
var oX;
var newX;
var Mx;
var Dv;
var dragg;
function Start(event) {
 console.log(event.target.id);
 Crs = event.target;
 dragg = Crs.parentElement;
 dragg.classList.add ("actif");
        LrG = Crs.parentElement.offsetWidth - (Crs.offsetWidth / 2);
 Dv = (LrG - (Crs.offsetWidth / 2)) / 100;
 oX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
 Mx = oX - Crs.offsetLeft;
 dragg.addEventListener("mousemove", dragging, false);
 dragg.addEventListener("mouseup", relache, false);
 dragg.addEventListener("mouseleave", relache, false);
}
function dragging(event) {
 newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
 console.log("deplacement " + newX);
 var posX = newX - Mx;
 if (posX < 0) {
  posX = 0;
 }
 if (posX > LrG - (Crs.offsetWidth / 2)) {
  posX = LrG - (Crs.offsetWidth / 2);
 }
 Crs.style.position = "absolute";
 Crs.style.left = posX + "px";
 document.getElementById("res").innerHTML = Crs.id + " : " + Math.round(Crs.offsetLeft / Dv);
}
function relache(event) {
 dragg.removeEventListener("mousemove", dragging);
 dragg.removeEventListener("mouseup", relache);
 dragg.removeEventListener("mouseleave", relache);
        dragg.classList.remove ("actif");
       }
function ajoute() {
            var messlides = document.querySelectorAll(".slide");
             for (var i = 0; i < messlides.length; i++) {
                messlides[i].firstElementChild.addEventListener("mousedown", Start, false);
             }
        }
 
</script>
 
</head>
<body>
<div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
      des slides pas comme les autres 
      <p id ="res">position</p>
      <br/><br/>
 
 
      <div id="fond5"  class="slide" style="width:300px;height:26px;" >
         <div id="Crs5" class="cur" style="top:0px;width:26px;height:26px;border-radius:8px;" ></div>
      </div>
      <div id="fond6"  class="slide"  style="width:300px;height:26px;" >
         <div id="Crs6" class="cur" style="top:7px;width:26px;height:14px;border-radius:8px;"></div>
      </div>
 
      <div id="fond7"  class="slide" style="width:300px;height:26px;" >
         <div id="Crs7" class="cur" style="top:0px;width:26px;height:26px;border-radius:50%;"></div>
      </div>
 
      <div id="fond8"  class="slide" style="width:300px;height:26px;" >
         <div id="Crs8" class="cur" style="top:0px;width:26px;height:26px;border-radius:50%;"></div>
      </div>
</div>
 <script> ajoute();</script>  
</body>
</html>

ais-je tords?

**psychadelic** · 07/03/2018, 19h35

Envoyé par patricktoulon

on peu meme enlever les margin-top dans les classes "#fond....."

Surtout pas, car alors ton code friserait la perfection; ça ferait sans doute trop prétentieux

**patricktoulon** · 07/03/2018, 21h25

re

tu a compris pourquoi je parlais de notion de portabilité

ca m'oblige en fin de compte a réecrire le css ou a ajouter successivement les element concernés pour un style

mais bon de toute facon ca fonctionne avec id ou avec classe

prétentieux non ca certainement pas

je vais pofiner tout ca au calme afin de choisir ce qui est le mieux dans le contexte de mon utilisation

je fait souvent ca meme en VB le plus generique possible pour un export eventuel dans un autre fichier d'ou mes deux classe suplementaires au depart pour un ou X elements

en tout cas un grand merci a toi nosmoking,beguinner,jreaux62,progelect au top you are

Boucle for sur les éléments saute 1 item

JavaScript

Discussions similaires

Partager

Partager