Fonction hide/show défectueuse

Version imprimable

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:

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:

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>

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

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

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:

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>

25/05/2018, 10h54
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 ...
25/05/2018, 11h49
NoSmoking

Bonjour,
un peu en vrac

• dans ton code HTML on voit

Code:

<div class="Page2>

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

• Lorsque tu fais un

Code:

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

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

Code:

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

qui suit ne se déclenchera pas.

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

Code:

$('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 à vous deux !

Citation:

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

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

Code:

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;
}

Citation:

Envoyé par NoSmoking

Bonjour,
un peu en vrac

• dans ton code HTML on voit

Code:

<div class="Page2>

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

• Lorsque tu fais un

Code:

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

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

Code:

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

qui suit ne se déclenchera pas.

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

Code:

$('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:

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>