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 !