Aide tuto ScrollSpy

Metylene
Javascript

Bonjour !
J'essaye de reproduire l'effet du tuto ScrollSpy sur un site. Malheureusement j'ai quelques problèmes.

Ce morceau de code ne me permet pas de récupérer les sections contenu dans mon nav :/

  var navbar = $('#header-nav');
  var navbara = $('a', navbar);

  navbara.each(function(){
    sections.push($($(this).attr('href')));
  });

Voilà le code de mon header et de mon index nettoyé :

<header>
<a href="<?php bloginfo('url'); ?>"><div class="logo"></div></a>
    <nav id="header-nav">
        <ul>
            <li><a href="#section-2">Agence </a></li>
            <li><a href="#section-3">Services</a></li>
            <li><a href="#section-4">Book</a></li>
            <li><a href="#section-5">Contact</a></li>
        </ul>
    </nav>
</header>

<div id="main">
    <section id="section-1" class="accueil"></section>
    <section id="section-2" class="agence"></section> 
    <section id="section-3" class="services"></section>
    <section id="section-4" class="book"></section>
    <section id="section-5" class="contact"></section>
</div>

8 réponses

Metylene
Auteur
Réponse acceptée

Merci en tout cas d'avoir proposé ton aide. C'était effectivement que je n'avais pas fait le lien entre jquery, mon script et mon thème ^^'

Khalysto
Réponse acceptée

Salut! :)
De base, WP importe une version de Jquery (je sais plus laquelle), mais si tu veusx en importer une autre, c'est dans le functions.php que ça se passe

wp_deregister_script( 'jquery' ); //Pour retirer le jquery natif de WP

wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js');
wp_enqueue_script('jquery');

Et n'oublies pas de déclarer Jquery en mode "no-conflicts"!


jQuery(document).ready(function($){

});

Voilà, normalement, tu n'auras pas de conflit avec WP :)

betaWeb

Déclare ton tableau "sections" avant de le remplir.

  var navbar = $('#header-nav'),
      navbara = $('a', navbar),
      sections = [];
Metylene
Auteur

Je ne l'ai pas c/c mais il est déclaré juste au dessus de navbar.

J'ai testé ce code sans utiliser Wordpress et ça a fonctionné. Du coup le problème doit venir de ma méthode pour ajouter jquery a Wordpress ^^'

betaWeb

Ah mais tu es sous Wordpress pardon ^^

Metylene
Auteur

Merci Khalysto :)
Si pour une raison googleapis n'est pas dispo pour transmettre jquery, est-ce que cela ne pose pas un problème ?
Il y a possibilité de prendre celui de Wordpress seulement si celui de google ne répond pas ?

Voilà mon fichier function.php du coup :

<?php
wp_enqueue_style( 'style', get_stylesheet_uri() ); 
wp_deregister_script( 'jquery' );
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js');
wp_enqueue_script('jquery');
wp_enqueue_script( 'script', get_bloginfo('stylesheet_directory').'/js/script.js', array( 'jquery' ), '1.0', true );
Khalysto

Je dois avouer que je n'ai pas réfléchi à ça, j'imagine que les grands de chez Google nous préviendrons si leur CDN tombe ^^'

Tu dois pouvoir faire un truc dans le style (!!attention, pas testé ni vérifié, c'est une supposition!!)

if(wp_register_script('jquery-custom', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js')) {
    wp_deregister_script( 'jquery' );
    wp_enqueue_script('jquery-custom');
}

Attention à la version de jQuery : je t'ai donné un bout de code d'un projet qui nécessitait un support de navigateurs anciens (IE en gros), du coup c'est jQuery en version 1 :)

Khalysto

Après vérification, wp_register_script ne retourne rien, donc on oublie ^^