Discussion :

[x-klow-x]

Bonjour à tous !

Tout premier post sur ce forum... je me lance
Je débute en Javacript, et je rencontre un soucis technique sur lequel je bloque depuis ce matin -_- :

Je suis en train de travailler sur un site dans lequel j'ai ajouté des transitions "slide" entre les pages.
Chacune de ces page est constituée en une <section>, avec un id=#exemple, que j'ai relié à ma navigation et qui me permet de faire arriver ma page par le côté droit.

Jusque là tout va bien, ça fonctionne très bien. Sauf que, j'ai voulu utiliser le même procédé de slide sur plusieurs liens "Lire la suite" qui sont situés en bas de plusieurs petits articles. (et ainsi faire apparaitre l'article complet dans une nouvelle page, qui arriverait également par la droite)
Et l'animation de slide fonctionne sur le premier lien, mais pas sur le second... et je n'arrive pas à comprendre pourquoi.

Voici les extraits de code concernés :
(désolée, en terme de présentation c'est pas dingue... si j'ai loupé une étape pour mieux mettre en forme le code ici, n'hésitez pas à me le dire et je corrigerai)

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
<!--Themes-->
<section class="theme section" id="theme">
                    <div class="container">
                        <div class="row">
                            <div class="section-title padd-15">
                                <h2>Thématiques</h2>
                            </div>
                        </div>
 
                        <div class="row">
 
                            <!--Theme item-->
                            <div class="theme-item padd-15">
                                <div class="theme-item-inner shadow-dark">
                                    <div class="theme-img">
                                        <img src="../images/Thematiques/image1.jpg" alt="image1">
                                    </div>
                                    <div class="theme-info">
                                        <h4 class="theme-title">Lorem</h4>
 
                                        <define class="theme-description">Text(...)</define>
 
                                        <p><a href="#exemple1" class="active"><i class="fa fa-comments"></i> Lire la suite</a></p>
 
                                    </div>
                                </div>
                            </div>
                            <!--Fin Theme item-->
 
                            <!--Theme item-->
                            <div class="theme-item padd-15">
                                <div class="theme-item-inner shadow-dark">
                                    <div class="theme-img">
                                        <img src="../images/Thematiques/image2.png" alt="image2">
                                    </div>
                                    <div class="theme-info">
                                        <h4 class="theme-title">Lorem2</h4>
 
                                        <define class="theme-description">Text2(...).
                                        </define>
 
                                        <p><a href="#exemple2"><i class="fa fa-comments"></i> Lire la suite</a></p>
                                    </div>
                                </div>
                            </div>
                            <!--Fin Theme item-->
 
 
<!--Article-->
<section class="article" id="exemple1">
                    <div class="container">
                        <div class="row">
                            <div class="section-title padd-15">
                                <h2>Article 1 </h2>
                            </div>
                        </div>
 
                        <div class="row">
 
                        <p> Test 1</p>
 
                        </div>
                    </div>
</section>
<!--Fin article-->
 
<!--Article-->
<section class="article" id="exemple2">
                    <div class="container">
                        <div class="row">
                            <div class="section-title padd-15">
                                <h2>Article 2</h2>
                            </div>
                        </div>
 
                        <div class="row">
 
                        <p> Test 2</p>
 
                        </div>
                    </div>
</section>
<!--Fin article-->

Code JavaScript :

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
const   theme=document.querySelector(".theme-info"),
        themeLink=theme.querySelectorAll("p"),
        totalThemeLink=themeLink.length,
 
        allArticles=document.querySelectorAll(".article"),
        totalArticles=allArticles.length;
 
for(let k=0; k<totalThemeLink; k++){
    const a=themeLink[k].querySelector("a");
    a.addEventListener("click", function(){
 
         // remove back section class
         for(let k=0; k<totalArticles; k++){
            allArticles[k].classList.remove("back-article");
        }
 
        for(let l=0; l<totalThemeLink; l++){
            if(themeLink[l].querySelector("a").classList.contains("active")){
 
        // add back section class
 
                allArticles[l].classList.add("back-article");
            }
            themeLink[l].querySelector("a").classList.remove("active");
        }
       this.classList.add("active");
       showArticle(this);
 
       if(window.innerWidth < 1200){
           asideSectionTogglerBtn();
       }
    })
}
 
function showArticle(element){
    for(let k=0; k<totalArticles; k++){
        allArticles[k].classList.remove("active");
    }
    const target=element.getAttribute("href").split("#")[1];
 
    document.querySelector("#"+target).classList.add("active")
}

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
.article {
 
    min-height: 100vh;
    display: block;
    padding: 0 30px;
    position: fixed;
    width: 100%;
    left: 270px;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
    overflow-y: auto;
    opacity: 1;
 
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
 
 
.article.back-article{
    z-index: 0;
}
 
.article.active{
    opacity: 1;
    z-index: 2;
    -webkit-animation: slideSection 1s ease;
    animation: slideSection 1s ease;
}
 
 
 
@-webkit-keyframes slideSection{
    0%{
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100%{
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

J'ai essayé de jouer avec le z-index mais sans succès...
Si quelqu'un a une proposition, je suis vraiment preneuse !

Merci beaucoup !!

[nadfri2019]

Salut,

Tes fichiers sont très confus, j'ai l'impression qu'il y a pas mal de code inutile ainsi que des erreurs dans le CSS.

Premièrement, commence par retirer toutes les class="active" de ton html, de ce que j'ai compris, c'est au clic sur "Lire la suite" que la class s'ajoute, mais si elle est déjà présente, ça va pas faire grand chose.

Deuxièmement, le but est de faire un effet d’apparition style slide. Le plus simple est de faire juste un translateX(). Au début tu décales tes articles sur la droite de la page pour les cacher, et au clic ils reprennent leur place.

Voici le CSS qu'on peut utiliser après suppression des choses inutiles:

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
.article {
    min-height: 100vh;
    padding: 0 30px;
    position: fixed;
    top: 0;    /* position en haut */
    right: 0; /* et à droite */
    transform: translateX(100%); /*deplacement de 100% de sa taille vers la droite*/
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
 
.active{
    transform: translateX(0); /*revient à sa position initial*/
}

Pour le javascript, voici le code:

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
 
const lireLaSuite = document.getElementsByTagName("a");
const articles = document.querySelectorAll(".article");
 
for (let lien of lireLaSuite)
{
    lien.onclick = () =>
    {
        for(let article of articles) 
        article.classList.remove("active");
 
        let id = lien.getAttribute("href").replace("#","");
        document.getElementById(id).classList.add("active");
    };
}

Explications:
On sélectionne tous les liens de la page dans const lireLasuite
Egalement tous les articles dans const articles.
Avec la boucle for of (permet de parcourir un tableau element par element)
On va appliquer un evenement onclick sur chaque lien qui va récupérer l'id de l'article figurant dans le href du lien mais sans le "#" (replace "#" par rien "").
et on attribue à l'article de l'id la class active.

J'ai rajouté une autre boucle for of , afin de retirer la class active à tous les articles qui peuvent l'avoir, afin que l'article deja affiché disparaisse pour laisser la place à l'autre.

Apres, j'ai fais en fonction de ton code pour ne pas faire trop de modif, sinon on pouvait faire plus simple.

A bientot.

[x-klow-x]

Merci beaucoup pour ta réponse !
Je vais regarder tout ça et essayer de mettre un peu d'ordre dans mon code !