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

Version imprimable

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:

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:

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:

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

22/12/2014, 12h45
SylvainPV

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.
22/12/2014, 13h01
Séverine.r

2 pièce(s) jointe(s)

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:

Pièce jointe 164487

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):

Pièce jointe 164488

cordialement
22/12/2014, 14h59
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 ?
22/12/2014, 15h00
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?).

Citation:

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:

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

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

Citation:

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?
22/12/2014, 16h08
lysandro
Bon, je suis une buse effectivement :D

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:

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 :)
22/12/2014, 16h14
Séverine.r
merci pour votre réponse

je doit juste mettre
Code:

1 2 3 $(document).ready(function(){ $.fn.fullpage({ anchors: [false],
?
22/12/2014, 16h34
lysandro
En plus d'être une buse, je ne suis pas clair c'est ça :D
Code:

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" :)
22/12/2014, 16h51
Séverine.r

désolé ca ne fonctionne toujours pas pour ma part
merci à vous
23/12/2014, 11h27
Séverine.r

1 pièce(s) jointe(s)
bonjour,

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

dans un site map:
Code:

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?

Pièce jointe 164602

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

merci à vous
24/12/2014, 11h34
lysandro

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