11486 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Fullpage.js active menu li

Bonjour à tous, ceci est mon premier post, j'espère qu'il sera pertinent pour qui rencontre le même problème que moi.

Je suis sur la création de mon portfolio, et j'ai opté pour un onepage avec le plugin fullpage.js.

Mon problème est le suivant : les li de mon menu ne prennent pas en compte la classe active définie dans mon css.

Voici donc mon code :

HTML


<body>
	<div id="content">
		<header>
			<div id="header">
			        <nav id="nav" class="wrapper">
				        <section id="logo" data-menuanchor="intro">
					<a href="#intro" id="logo" title="Retour à l'accueil" data-scroll-goto="0"><img src="images/logo.png" alt="Logo"><h1 class="titre">titre</h1></a>
				        </section>
				        <ul id="menu">
					        <li data-menuanchor="intro" id="introli" class="active"><a href="#intro" title="retour intro">Intro</a></li>
					        <li data-menuanchor="competences"><a href="#competences" title="voir mes compétences">Compétences</a></li>
					        <li data-menuanchor="projets"><a href="#projets" title="voir mes projets">Projets</a></li>
					        <li data-menuanchor="contact"><a href="#contact" title="contact">Contact</a></li>
				        </ul>
			        </nav>
		        </div>
		</header>
		<section id="fullpage">...</section>
        </div>
</body>


JS


$('#fullpage').fullpage({
        //Navigation
        menu: '#menu',
        anchors:['intro', 'competences', 'projets', 'contact'],
        navigation: false,
        navigationPosition: 'top',
        navigationTooltips: ['firstSlide', 'secondSlide', 'thirdSlide', 'fourthSlide'],
        slidesNavigation: true,
        slidesNavPosition: 'left',

        //Scrolling
        css3: true,
        scrollingSpeed: 1100,
        autoScrolling: true,
        scrollBar: false,
        easing: '',
        easingcss3: '',
        loopBottom: false,
        loopTop: false,
        loopHorizontal: false,
        continuousVertical: false,
        normalScrollElements: '#element1, .element2',
        scrollOverflow: false,
        touchSensitivity: 15,
        normalScrollElementTouchThreshold: 5,

        //Accessibility
        keyboardScrolling: true,
        animateAnchor: true,
        recordHistory: true,

        //Design
        controlArrows: true,
        verticalCentered: true,
        resize : false,
        sectionsColor : ['none'],
        paddingTop: '6em',
        paddingBottom: '10px',
        fixedElements: '#header, .footer',
        responsive: 0,

        //Custom selectors
        sectionSelector: '.section',
        slideSelector: '.slide',

        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
        onSlideLeave: function(anchorLink, index, slideIndex, direction){},
    });



Voilà, est-ce que quelqu'un a un indice ?

P-S : j'ai déjà regardé sur plein de forums et je n'ai pas trouvé de solution. L'idéal serait d'avoir une détection du scroll en afterload, mais même sans ça, ayant identifié le menu dans le js du plugin, je n'ai pas su comment faire... (alors que des exemples qui fonctionnent, y'en a...) Smiley decu

Merci
Bonjour,

Dans les différents exemples en relation avec ton sujet je constate déjà une différence.

Dans ton JS, essaye de remplacer 
$('#fullpage').fullpage({

par
$.fn.fullpage({

Modifié par TasPasVu (27 Jan 2015 - 13:47)
Salut TasPasVu, merci pour ta réponse.

J'ai tenté de remplacer le $('fullpage').fullpage({ par $.fn.fullpage({ ;

Aucun effet cependant si ce n'est que cela bloque le scroll et donc la navigation du site.
J'ai effectivement tenté d'insérer cette portion de code dans le callback de ma fonction en l'adaptant à mon contenu, mais aucun effet malheureusement.

Aussi, je ne sais pas si ça peut constituer un indice, mais lors de l'inspection d'élément avec chrome, le header n'est pas déployable et apparait vide : <header><header/>

...

Je viens de revoir la démo du plugin avec l'option du header et footer fixe (que j'ai donc activée), pensant que c'était propre à l'option de "cacher" la section header dans l'inspecteur...

Mais j'ai l'impression qu'il faut préciser l'id (je pensais que non en HTML5...) ou alors le substituer en div, que j'ai bien incluse dans le header existant, je pense que c'est mieux pour le référencement...

Le serpent se mord la queue on dirait...
Modifié par Djned (27 Jan 2015 - 14:44)
Je constate que le header est en fait tout en bas dans l'inspecteur de chrome, après les scripts c-à-d juste avant la fermeture du body...

Je suis pas un as en js, mais quelque chose me dit qu'il s'agit bien d'un bug...
Bonjour.

Il manque juste une div entourant tes sections, non ?

Tout le reste du code a l'air de fonctionner... (sauf l'appel, que j'ai repris)
Merci Snake Smiley cligne

Cependant, mes sections étaient bel et bien insérées dans ma section :
<div id="fullpage"></div>


Bon, c'était une section à la base, mais tout était bien là...

J'ai tenté plusieurs expérimentations et il s'avère que le bout de code :
    afterLoad: function(anchor, index){
        var activeItem;
        
        if(index == 1 || index == 2 || index == 3){
            activeItem = $('#menu').find('li').first()
        }else{
             activeItem = $('#menu').find('li').last()    
        }

        activeItem
            .addClass('active')
            .siblings().removeClass('active');
    }


est plus efficace lorsqu'il est placé dans 
afterRender:function(anchor, index){},


Mais, puisque ce serait trop beau si ça marchait tout seul, lors du rafraîchissement de la page, je suis scotché sur une section avec la li d'une autre section en classe active... Alors que si je rentre l'adresse dans la barre de chrome par exemple, le site et les li se comportent comme il faut...

Je vais voir en plaçant dans les différentes portions pour voir le comportement...
Bon, mon dernier message n'a pas dû passer, donc je fais court : J'ai passé le code d'ajout de classe active dans la portion onLeave du script fullpage.js. Tout roule. Smiley biggol
Sujet clos
Aller à