Concevoir des sliders perso

**psychadelic** · 01/03/2018, 22h30

Envoyé par patricktoulon

peut on mettre des le départ quelque chose du genre <div class="fondd fond"........
et interroger ou un même un getelementsByClassName("fond") en JS me les trouvera t il ou pas ?

c'est le principe html / css; la syntaxe class="ClassCSS_1 ClassCSS_2 ClassCSS_N" permet de relier autant de définitions en css qu'il y a de classes demandées.

la fonction js getelementsByClassName('fond') retrouvera tout ceux utilisant la classe "fond" même si l'élément utilise d'autres classes

il sait aussi faire le distinguo entre "fond" (ok) et "fondd" (non pris) dans le cas ou il n'y aurait qu'une seule classe sur l'élément.

**patricktoulon** · 02/03/2018, 10h44

bonjour psychadelic

ok j'ai testé il les trouve
mais j'ai un soucis avec ca

j'ai mes element du genre ceci

Code html :

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

1
2
3
4
5
6
<div id="fond5"  class="slide fondf" style="position:relative;width:300px;height:26px;overflow:none;" >
         <div id="curseur5" class="cur" style="position:absolute;top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
      </div>
      <div id="fond6"  class="fondg slide" style="position:relative;width:300px;height:26px;overflow:none;" >
         <div id="curseur6" class="curbis" style="position:absolute;top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
      </div>

et le css du genre ceci

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
.slide {
 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;
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
 
.fondg {
 border: 1px solid rgb(240, 240, 240);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 0, 0, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
 margin-top: 5px;
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}

le style fondg n'est pas appliqué

la classe slide me sert juste a boucler dessus et un style general
comment appliquer le style "fondg" au fond6 en l'etat il ne s'applique pas

**NoSmoking** · 02/03/2018, 11h52

Patrick, une fois de plus STOP, arrête de pourrir tes discussions avec des soucis qui n'ont plus rien à voir avec la discussion de départ.

MERCI d'ouvrir une nouvelle discussion
MERCI de respecter les règles d'une façon générale

Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue.

Notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous, laissez la possibilité aux suivants de bénéficier des réponses en leur offrant un sujet moins dispersé.

**patricktoulon** · 02/03/2018, 14h35

re
Bonjour Nosmoking
ma question a été déplacée dans un new post

pour en revenir au sujet de ce post
j'ai donc appliqué a mon model ton raisonnement a savoir ajouter ou supprimer les evenement au down du curseur et au leave(conteneur global)
en effet ca simplifie la tache dans le sens ou je n'ai plus a tester quoi que se soit (element null/pas null if else etc....)
puisque l'evenement existe que si il y a eu down du curseur donc curseur identifié
j'ai adopté
j'y penserais a l'avenir

que pense tu de cette version?

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
<!doctype html>
<html lang="fr">
<head>
 <!--meta charset="utf-8"-->
  <title>TEST SLIDE</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<style>
.slide {
 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;
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
.cur {
 background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
.cur2 {
 background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
.curbis {
 background: linear-gradient(to bottom, rgba(0, 200, 250, 0.1) 0%, rgba(0, 220, 255, 1) 50%, rgba(0, 200, 250, 1) 100%);
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
.curbis2 {
 background: linear-gradient(to bottom, rgba(100, 210, 250, 0.1) 0%, rgba(200, 0, 50, 1) 50%, rgba(100, 210, 250, 1) 100%);
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
.fondg {
 border: 1px solid rgb(240, 240, 240);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255, 0, 0, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
 margin-top: 5px;
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
</style>
 
<script  type= "text/javascript">
var LrG;
var Crs;
var oX;
var newX;
var Mx;
var Dv;
var dragg
function dragStart(event) {
 console.log(event.target.id);
 Crs = event.target;
 Crs.className = Crs.className + 2;
 dragg = Crs.parentElement;
 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);
 Crs.className = Crs.className.replace("2", "");
 Crs = null;
 dragg.removeEventListener("mousemove", dragging);
 dragg.removeEventListener("mouseup", relache);
 dragg.removeEventListener("mouseleave", relache);
}
function ajoute() {
 var messlides = document.getElementsByClassName("slide");
 for (var i = 0; i < messlides.length; i++) {
  messlides[i].getElementsByTagName("DIV")[0].addEventListener("mousedown", dragStart, false);
 }
}
</script>
</head>
<body>
   <div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
      un slide pas comme les autre 
      <p id ="res">position</p>
      <br/><br/>
 
      <div id="fond1" class="slide fonda" style="position:relative;width:200px;height:26px;overflow:none;">
         <div id="Crs1" class="cur" style="position:absolute;top:5px;width:16px;height:16px;border-radius:8px;" unselectable="on"></div>
      </div>
 
      <div id="fond2"  class="slide fondb" style="position:relative;width:300px;height:26px;overflow:none;" >
         <div id="Crs2" class="cur" style="position:absolute;top:5px;width:26px;height:16px;border-radius:8px;" unselectable="on"></div>
      </div>
 
      <div id="fond3"  class="slide fondc" style="position:relative;width:300px;height:26px;overflow:none;">
         <div id="Crs3" class="cur" style="position:absolute;top:5px;width:10px;height:16px;border-radius:8px;" unselectable="on"></div>
      </div>
      <div id="fond4"  class="slide fonde" style="position:relative;width:110px;height:26px;overflow:none;">
         <div id="Crs4" class="cur" style="position:absolute;top:5px;width:16px;height:16px;border-radius:8px;" unselectable="on"></div>
      </div>
      <div id="fond5"  class="slide fondf" 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="fondg slide" style="position:relative;width:300px;height:26px;overflow:none;" >
         <div id="Crs6" class="curbis" style="position:absolute;top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
      </div>
</div>
   <script>ajoute();</script>
</body>
 
</html>

dommage que classList ne fonctionne pas sur mon suport VBA j'aurais pu jouer avec le css du fond

testé Sur js.bin

Concevoir des sliders perso

JavaScript

Discussions similaires

Partager

Partager