[Résolu] Ajouter une classe .. .

Le code utilisé est du jQuery, la bibliothèque est-elle bien chargée ?

Mais remplace plutôt ton code par ça, avec ceci tu pourras cibler toutes les ancres présentes sur la page et tu n'auras pas besoin de leur ajouter une classe (toujours en jQuery) :

// -----------------------------------------------------------------------------
// @section     Smooth Scroll
// @description Défilement fluide
// -----------------------------------------------------------------------------

jQuery(document).on('click', 'a[href*=#]:not([href=#])', function() {
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname){
		var target = $(this.hash);
		target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
		if (target.length){
			$('html,body').animate({
				scrollTop: target.offset().top
			}, 400);
			//return false;
		}
	}
});

Exemple d'utilisation en ligne de ce code ici.

Maintenant, juste pour répondre au titre du sujet :

- Pour ajouter une classe en javascript seulement (Vanilla JS) :

element.className = 'classname'

- Pour ajouter une classe avec jQuery :

$("element").attr('class', 'classname');

- Pour ajouter un ID en Vanilla JS :

element.setAttribute('id', 'index')

- Pour ajouter un ID avec jQuery :

$('element').attr('id', 'index');

Modifié par Olivier C (31 Mar 2016 - 06:52)

Bonjour,

Olivier C a écrit :

- Pour ajouter une classe avec jQuery :

$("element").attr('class', 'classname');

Je dirais plutôt .addClass() (histoire surtout de ne pas virer une classe qui serait déjà présente et de bien avoir la possibilité d'en mettre plusieurs en même temps)

Si vous n'utilisez pas JQuery, ce serait quand même beaucoup plus simple avec classList :

element.classList.add('nouvelle_classe');
element.classList.remove('ancienne_classe');

C'est compatible tous les navigateurs y compris IE10, et il y a un moyen pas trop compliqué de l'émuler pour IE9 avec un code de ce genre si besoin:

Object.defineProperty(Element.prototype, 'classList', {enumerable: false, configurable: true, get: function(){
var _this=this, o = {
add: function(c){
var cl=_this.getATtribute('class'); 
cl=cl&&cl.split(' ')||[]; 
if (!cl.indexOf(c)<0) { cl.push(c); _this.setAttribute('class', cl.join(' ')); return true; } 
else return false; 
},
remove: function(c){
var cl=_this.getATtribute('class'); 
cl=cl&&cl.split(' ')||[];
var idx=cl.indexOf(c); 
if (idx>=0) { cl.splice(idx,1); _this.setAttribute('class', cl.join(' ')); return true; } 
else return false;
}
};
Object.defineProperty(this, 'classList', {configurable: false, enumerable: false, writable: false, value: o});
return o;
});

Note 1: classList possède aussi la méthode toggle que je n'ai pas mis ici.

Note 2: ce code d'émulation ne marche que pour IE9. Pas de solution simple pour IE5-8. Mais il semblerait que la plupart des grands acteurs les ont aujourd'hui abandonnés de toute façon.
Modifié par QuentinC (31 Mar 2016 - 09:10)

J'ai rapidement fait un test en html/css/JavaScript avec "/lenomdusite/#Ancre" et "#Ancre" dans le href="", les deux marchent.

Je vais regarder sur Drupal si il y a quelque chose qui cloche pourtant la bibliothèque JQuery à l'air d'être chargée. . Bon je ne sais comment vérifié quelle soit prise en compte mais le module JQuery est installé. .

C'est gavant les cms lorsque l'on ne connait pas les petits rouages qui font fonctionner les chose directement.

Bonjour,

blond1n a écrit :
Je vais regarder sur Drupal si il y a quelque chose qui cloche pourtant la bibliothèque JQuery à l'air d'être chargée. . Bon je ne sais comment vérifié quelle soit prise en compte mais le module JQuery est installé. .

Juste petite astuce, tu ouvres ta console de développement sur ta page, tu tapes $ et tu valides avec Entrée, et si tu vois apparaître une fonction c'est que jQuery a de forte chance d'être chargée.
Tu peux ensuite justement vérifier en tapant de la même manière jQuery, et si c'est la même fonction qu'au dessus, c'est que la librairie est bien chargée.

Merci de coup de main

J'ai mis dans la console le $, et JQuery :

$ -> undefined
jQuery -> function(e, t)

En modifiant la partie haute du code de Olivier C, ça à marché, coup de bol, sur un autre forum, un gars m'a mis le code qu'il a mis ..

// Smooth Scroll to ID HashTags
jQuery(document).ready(function($) {
//$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({ scrollTop: target.offset().top }, 1500);
        return false;
      }
    }
  });
});

Modifié par blond1n (06 Apr 2016 - 17:40)