Discussion :

[UneMinute22]

Bonsoir,,

Je me permets de faire appel à vous car je me retrouve face à un mur..

J'essaye de créer un slider avec une barre "de progression" (servant de menu) permettant de choisir quelle page visualiser.
Concrètement, en cliquant sur un point de la barre (correspondant à une page), la barre de progression doit se remplir et le div concerné s'afficher à la place du div actuel.

Malheureusement j'ai beau remuer ça dans tous les sens, il y a toujours quelque chose qui ne fonctionne pas.
Actuellement, le code fonctionne à peu près correctement dans le sens progressif des DIVs, de la Page1 à 3 (même si la transition n'est pas vraiment fluide) mais dans le sens dégressif, le div affiché disparaît bien mais le div sélectionné ne s'affiche pas.

Pourriez-vous m'éclairer un peu ? Merci d'avance et n'hésitez pas à me faire savoir si quelque chose n'est pas clair.
Bonne soirée à tous !

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
<div class="container">
    <div class="wrapper">
          <ul class="progressbar">           
            <li class="Page1 active"></li>
            <li class="Page2"></li>
            <li class="Page3"></li>
          </ul>
 
          <div class="Page1 active">
          </div>
 
          <div class="Page2>
          </div>
 
          <div class="Page3">
          </div>
 
    </div>
</div>

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
<script type="text/javascript">
$(".progressbar li").on("click", function() {
 
var chosenpage =$(this).attr("class");
  $(".progressbar li.active").removeClass("active");
    $(".progressbar li.before-active").removeClass("before-active");
 
    $(this).addClass("active");
    $(this).prevAll().addClass("before-active");
 
      $('.menu div.active').hide('slide', {direction: 'left'}, 1000);
      $('.menu div.active').removeClass("active");
      $('.menu div.'+chosenpage).addClass("active", function () {
 
        $('.menu div.active').show('slide', {direction: 'right'}, 1000);
 
      });
});
</script>

[bonjourajax]

Bonsoir,
c'est quoi le code html avec la classe menu

Code javascript :

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

1
2
 
 $('.menu div.active').effect('slide', { direction: 'right', mode: 'show', duration: 1000 });

[UneMinute22]

Bonjour, merci pour votre retour !
Désolée, j'ai bêtement supprimé une partie du code en voulant le simplifier (mais elle était bien là de mon côté).

Donc c'est :

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
<div class="container">
    <div class="wrapper">
          <ul class="progressbar">           
            <li class="Page1 active"></li>
            <li class="Page2"></li>
            <li class="Page3"></li>
          </ul>
 
       <div class="row menu">
          <div class="Page1 active">
          </div>
 
          <div class="Page2>
          </div>
 
          <div class="Page3">
          </div>
       </div>
 
    </div>
</div>

[SpaceFrog]

une div vide ...

on ne voit pas le css associé donc si la div n'est pas visible un show dessus ne va pas être très ... visible ...

[NoSmoking]

Bonjour,
un peu en vrac

• dans ton code HTML on voit

Code html :

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

<div class="Page2>

je présume qu'il s'agit d'une erreur de copier/coller.

• Lorsque tu fais un

Code :

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

var chosenpage = $(this).attr("class");

Tu peux tout à fait récupérer une classe du style "Page2 before-active" et donc le

Code :

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

$('div.'+chosenpage).addClass("active", function ()

qui suit ne se déclenchera pas.

• pas convaincu par le paramètre "slide" dans

Code :

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

$('div.active').hide('slide', {direction: 'left'}, 1000);

regarde plutôt du côté de animate() dans ce cas.

Nota : On avait traité un sujet similaire sur le forum, cela peut t'intérréser
Comment faire un site à lecture horizontale ? (lien vers une solution)

[UneMinute22]

Merci à vous deux !

une div vide ...

on ne voit pas le css associé donc si la div n'est pas visible un show dessus ne va pas être très ... visible ...

Oui désolée, voici le CSS (même si le code dans son ensemble est très simplifié pour le test) :

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
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
#progressbar {
  width:100%;
}
 
 
.progressbar {
  margin-top:50px;
  position: absolute;
  left:0;
  list-style: none;
}
 
.progressbar li{
  position: relative;
  text-align: center;  
  height: 100px;
}
 
.progressbar li:before{
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid #bebebe;
  display: block;
  border-radius: 50%;
  line-height: 27px;
  background: white;
  color: #bebebe;
  text-align: center;
  font-weight: bold;    
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
 
.progressbar li:hover:before{
  background: #FDEE00;
  border: 2px solid #FDEE00;
}
 
.progressbar li:after{
  display: inline-block;
  position:absolute;
  content: '';
  width: 2px;
  height: 100%;
  top: -100%;
  left:5px;
  z-index: -1;
  background:#bebebe;;
}
 
.progressbar li:first-child:after{
  height: 20%;
  top:-20%;
}
 
.progressbar li#Page1:after{
 background: #FDEE00;
}
.progressbar li#Page1:before{
border-color: #FDEE00;
background: #FDEE00;
}
 
 
.progressbar li.active:after{
 background: #FDEE00;
}
.progressbar li.active:before{
border-color: #FDEE00;
background: #FDEE00;
}
 
.progressbar li.before-active:after{
 background: #FDEE00;
}
.progressbar li.before-active:before{
border-color: #FDEE00;
background: #FDEE00;
}
 
.menu div {
  display:none;
  position:absolute;
  left:150px;
  width:100%;
}
 
.menu img {
  width:100%;
}
 
.menu div.Page1 {
  display:block;
}

Bonjour,
un peu en vrac

• dans ton code HTML on voit

Code html :

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

<div class="Page2>

je présume qu'il s'agit d'une erreur de copier/coller.

• Lorsque tu fais un

Code :

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

var chosenpage = $(this).attr("class");

Tu peux tout à fait récupérer une classe du style "Page2 before-active" et donc le

Code :

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

$('div.'+chosenpage).addClass("active", function ()

qui suit ne se déclenchera pas.

• pas convaincu par le paramètre "slide" dans

Code :

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

$('div.active').hide('slide', {direction: 'left'}, 1000);

regarde plutôt du côté de animate() dans ce cas.

Nota : On avait traité un sujet similaire sur le forum, cela peut t'intérréser
Comment faire un site à lecture horizontale ? (lien vers une solution)

Merci, c'est super ! J'ai fait les modifs pour que les attributs ne se mélangent pas (cf. ci-dessous) et j'ai changé les width pour plus de fluidité, tout fonctionne, c'est génial ! Il ne me reste plus qu'à regarder pour animate() pour rendre tout ça plus convenable !

N'hésitez pas à me faire savoir si vous avez le temps et voyez d'autres parties bancales Bonne journée

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
  <div class="container">
    <div class="wrapper">
      <div id="progressbar" class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
          <ul class="progressbar">
            <li id="Page1" class="active"></li>            
            <li id="Page2"></li>
            <li id="Page3"></li>
            <li id="Page4"></li>
            <li id="Page5"></li>
          </ul>
      </div>
 
          <div class="menu col-lg-5 col-md-5 col-sm-5 col-xs-5">
          <div class="Page1 active">
            <img src="IMGS/IMG_6555.jpg">
          </div>
 
          <div class="Page2">
            <img src="IMGS/IMG_6478.jpg">
          </div>
 
          <div class="Page3">
            <img src="IMGS/IMG_6486.jpg">
          </div>
 
          </div>
      </div>
    </div>
 
<script>
$(".progressbar li").on("click", function() {
 
var chosenpage =$(this).attr("id");
  $(".progressbar li.active").removeClass("active");
    $(".progressbar li.before-active").removeClass("before-active");
 
    $(this).addClass("active");
    $(this).prevAll().addClass("before-active");
 
      $('.menu div.active').hide('slide', {direction: 'left'}, 1000);
      $('.menu div.active').removeClass("active");
      $('.menu div.'+chosenpage).addClass("active", function () {
 
        $('.menu div.active').show('slide', {direction: 'right'}, 1000);
 
      });
});
</script>