Plugin fullpage - activation de la section en fonction de l'ancre dans l'URL

**Séverine.r** · 22/12/2014, 11h42

Bonjour,

Je suis en train de faire un sitemap manuellement car j'ai un site mono-page
mon problème est que quand on clique sur les liens,cela amène a la bonne page mais cependant le javascript ne fonctionne pas, je ne sais pas comment faire pour régler ce problème, si vous avez des idées?

un petit exemple pour une des pages

de base la page est comme celle-ci (page solution):

http://orsery.fr/

et sur mon site map:

http://orsery.fr/#section3

voici mon sitemap.xml:

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
<?xml version="1.0" encoding="UTF-8"?>
 
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 <url>
  <loc>http://orsery.fr/</loc>
 </url>
 <url>
  <loc>http://orsery.fr/#section2</loc>
 </url>
 <url>
  <loc>http://orsery.fr/#section3</loc>
 </url>
 <url>
  <loc>http://orsery.fr/#section4</loc>
 </url>
  <url>
  <loc>http://orsery.fr/#section5</loc>
 </url>
  <url>
  <loc>http://orsery.fr/#section6</loc>
 </url>
  <url>
  <loc>http://orsery.fr/#section7</loc>
 </url>
  <url>
  <loc>http://orsery.fr/#section8</loc>
 </url>
  <url>
  <loc>http://orsery.fr/#section9</loc>
 </url>
</urlset>

code html de la page:

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
<div class="section page3" id="section3">
            <div class="page_container">
                <div class="page_container_wrapper margp2">
                    <div id="hidepg3h1h2">
                    <h1>Notre solution <br />&agrave; votre service</h1>                  
                    <h2>Un service sur-mesure pour &eacute;diteurs, libraires et clients </br> avec retrait imm&eacute;diat des ouvrages en magasin </h2>
                    </div>
                    <div class="content hdnotresol">
                        <img src="http://www.developpez.net/forums/images/solution_orsery.png" alt="Notre solution" title="Notre solution - Orséry" />
 
                        <div class="greenBox" id="item1page3" >
                            <span class="title">Catalogue d’ouvrages s&eacute;curis&eacute;</span>
                        </div>
                        <div class="greenBox" id="item2page3" style="top:100px" >
                            <span class="title">Machines mises <br />&agrave; disposition <br /> en librairie</span>
                        </div>
                       <div class="greenBox" id="item3page3"style="top:240px">
                            <span class="title">Maintenance sur site</span>
                        </div>
                        <div class="greenBox" id="item4page3">
                            <span class="title">R&eacute;approvisionnement g&eacute;r&eacute; automatiquement</span>
                        </div>
                         <div class="greenBox" id="item5page3" style="top:200px">
                            <span class="title">Solution informatique d&eacute;di&eacute;e</span>
 
                        </div>
                    </div>
                    <div id="showpg3h1h2">
                        <div id="h1pg3">
                            Notre solution &nbsp &agrave; votre service                           
                        </div>                        
                        <div id="h2pg3">                                 
                            Un service sur-mesure pour &eacute;diteurs, libraires et clients </br> avec retrait imm&eacute;diat des ouvrages en magasin 
                        </div>
                    </div>
 
                    <div class="solsmalayout ">
                        <div class="service">   
                            <span class="title">Catalogue d’ouvrages s&eacute;curis&eacute;</span>
                        </div>
 
                        <div class="service">   
                             <span class="title">Machines mises &agrave; disposition en librairie</span>
                        </div>
 
                        <div class="service">   
                            <span class="title">Maintenance sur site</span> 
                        </div>
 
                        <div class="service">   
                             <span class="title">R&eacute;approvisionnement g&eacute;r&eacute; automatiquement</span>    
                        </div class="service">
 
                        <div class="service">   
                            <span class="title">Solution informatique d&eacute;di&eacute;e</span>
                        </div> 
                    </div>
                </div>
                <div class="bottomwrapper gopage" data-id="3">
                    <span>D&Eacute;couvrez nos avantages</span>
                </div>
            </div>
        </div>

le code js de la page:

Code js :

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
$(document).ready(function(){
    $.fn.fullpage({
        anchors: [],
        scrollingSpeed : 1000,
        css3:false,
        fixedElements:'.back, .rightNavContact, .popoutContents, #colorbox, #cboxOverlay',
        navigation: true,
        navigationPosition: 'right',
        navigationTooltips: ['Accueil', 'Projet', 'Solution', 'Avantages', 'Editeurs', 'Librairies','Actualités', 'Partenaires', 'Contact'],
        afterLoad: function(anchorLink, index){
            AnimateTopNavigation(index - 2);
 
            switch(index){
                case 0:
                break;
                case 1:
                break;
                case 2:
                break;
                case 3:
                // Display on delay all item.
                AnimatePage3();
                break;
                case 4:    
                // Display on delay all item
                AnimatePage4();
                break;
                case 5:
                // Display on delay all item.
                AnimatePage5();
                break;
                case 6:
                // Display on delay all item.
                AnimatePage6();
                break;
                case 7:
                break;
                case 8:
                break;    
            }
        }
    });
 
    function AnimateTopNavigation(index){
        if(index >= 0){
            // Select current top menu item.
            $('.menu > ul > li').eq(index).addClass("selected").siblings().removeClass('selected');
        }
        else {
            // Click on logo reset all selected item.
            $('.menu > ul > li.selected').removeClass('selected');
        }
    }
 
    $('.gopage').on('click', function(e){
        e.preventDefault();
        var index = $(this).attr("data-id");
        $('#fullPage-nav').find('li').eq(index).find('a').trigger('click');
    });
 
 
    // ---------------------------------------
    // Page 3
    // ---------------------------------------
    function AnimatePage3(){
        setTimeout("$('.page3 #item1page3').fadeIn('slow');", 200);
        setTimeout("$('.page3 #item4page3').fadeIn('slow');", 500);
        setTimeout("$('.page3 #item2page3').fadeIn('slow');", 900);
        setTimeout("$('.page3 #item5page3').fadeIn('slow');", 1200);
        setTimeout("$('.page3 #item3page3').fadeIn('slow');", 1500);
    }
 
    function ResetPage3(){
        $('.page3 #item1page3').hide();
        $('.page3 #item2page3').hide();
        $('.page3 #item3page3').hide();
        $('.page3 #item4page3').hide();
        $('.page3 #item5page3').hide();
    }

Merci à vous

**SylvainPV** · 22/12/2014, 12h45

Bonjour,

Il va falloir être plus précis que "le JS ne fonctionne pas". De mon côté, je ne vois aucun problème sur les deux liens.
Merci d'indiquer précisément quel problème est rencontré, et de modifier le titre du topic en conséquence.

**Séverine.r** · 22/12/2014, 13h01

Bonjour,

sur la première page il n'y a aucun problème car il n'y a pas d'animation js

cependant quand on va sur le site et qu'on va sur la page "solution" nous voyons ceci:

Nom : Capture d’écran 2014-12-22 à 12.59.30.png
Affichages : 239
Taille : 98,9 Ko

Nom : Capture d’écran 2014-12-22 à 12.59.30.png
Affichages : 239
Taille : 98,9 Ko

alors que si on clique sur le liens du sitemap pour la même page, nous voyons ceci (les deux menu qui ne fonctionne pas et les animations qui ne s'affiche pas):

Nom : Capture d’écran 2014-12-22 à 13.01.10.png
Affichages : 232
Taille : 72,4 Ko

Nom : Capture d’écran 2014-12-22 à 13.01.10.png
Affichages : 232
Taille : 72,4 Ko

cordialement

**lysandro** · 22/12/2014, 14h59

Bonjour,

Pas sûr de comprendre à quoi sert d'avoir inclus votre fichier sitemap.xml dans votre demande ?
C'est plutot du jQuery que du javascript ...

Quoi qu'il en soit, j'ai testé, en repartant d'un historique vide, deux fois votre page :
- la première fois en cliquant dans le menu en haut sur 'solution'
- la deuxième fois en cliquant dans le menu (ce que vous appelez le 'sitemap' ?) à droite sur 'solution'
Je ne constate aucun écart de comportement. Les deux menus sont mis à jour, les animation se déroulent.

Peut-être n'ai je pas compris votre problème ?

**SylvainPV** · 22/12/2014, 15h00

Donc pour mettre des mots concrets sur votre problème, l'ancre de l'URL n'est pas prise en compte pour activer la section correspondante de la page lors de son chargement initial.

Je remarque que dans votre code JS, vous disposez d'une variable anchorLink dans une fonction afterLoad que vous n'utilisez pas du tout...

S'agissant d'un plug-in jQuery très particulier, je déplace la discussion sur le forum jQuery et je modifie le titre du topic. Je vous serais reconnaissant d'indiquer le lien vers le plug-in en question (fullpage?).

**Séverine.r** · 22/12/2014, 15h08

Envoyé par lysandro

Bonjour,

Pas sûr de comprendre à quoi sert d'avoir inclus votre fichier sitemap.xml dans votre demande ?
C'est plutot du jQuery que du javascript ...

Quoi qu'il en soit, j'ai testé, en repartant d'un historique vide, deux fois votre page :
- la première fois en cliquant dans le menu en haut sur 'solution'
- la deuxième fois en cliquant dans le menu (ce que vous appelez le 'sitemap' ?) à droite sur 'solution'
Je ne constate aucun écart de comportement. Les deux menus sont mis à jour, les animation se déroulent.

Peut-être n'ai je pas compris votre problème ?

vous n'avez pas compris mon problème, je suis désolé j'ai un peu de mal à le formuler car c'est pas moi qui est coder ce site donc j'ai un peu de mal à le comprendre.

en fait le site map est un code à part pour le référencement c'est celui la:

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
<?xml version="1.0" encoding="UTF-8"?>
 
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 <url>
  <loc>http://orsery.fr/</loc>
 </url>
 <url>
  <loc>http://orsery.fr/#section2</loc>
 </url>
 <url>
  <loc>http://orsery.fr/#section3</loc>
 </url>
 <url>
  <loc>http://orsery.fr/#section4</loc>
 </url>
  <url>
  <loc>http://orsery.fr/#section5</loc>
 </url>
  <url>
  <loc>http://orsery.fr/#section6</loc>
 </url>
  <url>
  <loc>http://orsery.fr/#section7</loc>
 </url>
  <url>
  <loc>http://orsery.fr/#section8</loc>
 </url>
  <url>
  <loc>http://orsery.fr/#section9</loc>
 </url>
</urlset>

donc vu que c'est une mono-page on fonctionne par section
quand nous allons sur le site normal tous fonctionne
cependant quand on rajoute les sections après l'adresse pour pouvoir avoir le site map le js ne suit pas dans par exemple http://orsery.fr/#section3

cordialement

**Séverine.r** · 22/12/2014, 15h10

Envoyé par SylvainPV

Donc pour mettre des mots concrets sur votre problème, l'ancre de l'URL n'est pas prise en compte pour activer la section correspondante de la page lors de son chargement initial.

Je remarque que dans votre code JS, vous disposez d'une variable anchorLink dans une fonction afterLoad que vous n'utilisez pas du tout...

S'agissant d'un plug-in jQuery très particulier, je déplace la discussion sur le forum jQuery et je modifie le titre du topic. Je vous serais reconnaissant d'indiquer le lien vers le plug-in en question (fullpage?).

je suis désolé je ne comprend pas votre dernière phrase?

**lysandro** · 22/12/2014, 16h08

Bon, je suis une buse effectivement

Alors voici ce que j'ai trouvé :

Lors du chargement direct à partir de 'http://orsery.fr/#section3', la fonction afterLoad n'est appellée que si les deux conditions suivantes sont remplies :

- dans les options passées à

Code :

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

1
2
3
$.fn.fullpage({
        anchors: [],
       ...

'animateAnchor' doit-être à 'false', elle est à 'true' si non spécifiée ;
- la section correspondante doit-être trouvée et elle est recherchée avec '[data-anchor="section3"]', l'attribut est créé lors de l'initialisation, je ne pense pas qu'il soit nécessaire de le spécifier explicitement.

Mon environnement de test est ... desuet et ne supporte pas les filtres de ce type, mais avec '#section3' ça fonctionne.

En attendant une réponse plus claire, vous pouvez commencer par tester avec l'option 'animateAnchor' à 'false'.

Merci à vous deux, j'aurais appris quelque chose aujourd'hui

**Séverine.r** · 22/12/2014, 16h14

merci pour votre réponse

je doit juste mettre

Code :

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

1
2
3
$(document).ready(function(){
    $.fn.fullpage({
        anchors: [false],

?

**lysandro** · 22/12/2014, 16h34

En plus d'être une buse, je ne suis pas clair c'est ça

Code :

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

1
2
3
4
$(document).ready(function(){
    $.fn.fullpage({
        animateAnchor:false,
        anchors: [],

Aucune garantie que ce soit ce que vous voulez, juste mon "meilleur effort"

**Séverine.r** · 22/12/2014, 16h51

désolé ca ne fonctionne toujours pas pour ma part
merci à vous

**Séverine.r** · 23/12/2014, 11h27

bonjour,

a part ce problème j'ai une autre petite question

dans un site map:

Code html :

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

1
2
3
4
5
6
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
  <url>
    <loc>http://orsery.fr</loc>
  </url>
</urlset>

comment on met un titre et une description comme ceci s'il vous plait?

Nom : Capture d’écran 2014-12-23 à 11.25.14.png
Affichages : 213
Taille : 54,8 Ko

en fait c'est bien avec un site map que l'on fait ceci?

merci à vous

**lysandro** · 24/12/2014, 11h34

Pour votre première question, oubliez ce que j'ai écrit. Il semble qu'il faille utiliser le tableau 'anchors:[]' mais la documentation est ici : https://github.com/alvarotrigo/fullPage.js

Plugin fullpage - activation de la section en fonction de l'ancre dans l'URL

jQuery

Discussions similaires

Partager

Partager