Aide tuto ScrollSpy

Par Metylene, il y a 11 ans

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

betaWeb, il y a 11 ans

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

var navbar = $('#header-nav'), navbara = $('a', navbar), sections = [];
Metylene, il y a 11 ans

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, il y a 11 ans

Ah mais tu es sous Wordpress pardon ^^

Metylene, il y a 11 ans

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, il y a 11 ans

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

Metylene, il y a 11 ans

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, il y a 11 ans

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, il y a 11 ans

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