11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Location.hash sans rechargement

Bonjour,

Je me permets d'ouvrir un post ici en espérant être au bon endroit et en précisant que je suis un débutant dans le codage.

Actuellement je fais une page d'accueil pour mon forum, elle comporte plusieurs zones qui sont définies par des "hash" (voir sur mon forum de test http://designrdlm.forumactif.fr/).

Dans l'optique de faire un menu intelligent qui dévoile la position actuelle sur la page en mettant l'onglet de la zone actuelle en surbrillance, j'ai "bricolé" ce bout de javascript en fouinant sur le net :

$(function() {
if(window.location.hash=="#bienvenue")
{
$("a.mainmenu").addClass("memo1");
}
 if(window.location.hash=="#forum")
{
$("a.mainmenu").addClass("memo2");
}
});


Le soucis que je rencontre avec ce code c'est qu'il ne fonctionne qu'au rechargement de la page. Mon but est de modifier le javascript pour qu'il arrive à savoir que le "hash" a changé sans devoir rafraîchir la page.

Voilà je ne sais pas du tout si j'ai été clair dans ma demande auprès de vous, sachez en tout cas que je vous remercie d'avance pour votre lecture et pour votre aide éventuelle.

Cordialement,

Jonas
Modifié par Spirit_Afraid (07 Feb 2015 - 05:15)
Bonjour,

Tu as de la chance, il y a justement un évènement "onhashchange" qui te permet d'intercepter les changements de hash. Tu n'as plus qu'a modifier ton code en conséquence.

Allez, ça me fait plaisir Smiley cligne 
$(function() {

    // Je déclare une fonction qui s'exécutera au changement d'ancre    
    $( window ).on( 'hashchange', function() {
        switch ( window.location.hash ) {
            case "#bienvenue" : $("a.mainmenu").addClass("memo1"); break;
            case "#forum"     : $("a.mainmenu").addClass("memo2"); break;
         }
    });

    // On déclenche l'évènement au cas où il y aurait déjà une ancre dans l'url
    $( window ).trigger( 'hashchange' );

});

Modifié par Freez (07 Feb 2015 - 13:32)
Bonjour Freez,

Tout d'abord je tiens à vous remercier énormément pour l'aide que vous m'avez apporté sur mon problème, la détection du changement de "hash" sans rechargement de la page fonctionne parfaitement.

Par contre je rencontre un problème de mémorisation de la "class" attribuée malgré le changement de "hash". Pour expliquer le soucis d'une manière plus claire, quand j'arrive sur le "hash" #forum le bouton du menu "Forum" apparaît bien en surbrillance mais, quand je vais sur le "hash" #bienvenue le menu "Forum" reste en surbrillance en plus du menu "Accueil".

J'ai tenté de bidouiller le code Javascript en rajoutant des ".removeClass" mais rien ne change le problème persiste. Smiley ohwell
Je pense qu'ici ça ne sert à rien de bidouiller :
$( window ).on( 'hashchange', function() {
    $("a.mainmenu").removeClass('memo'); // supprime la classe memo sur tous les liens du menu
       
    $('a[href="' + window.location.hash + '"]').addClass('memo');
    // ça rajoute la classe 'memo' au lien qui pointe vers '#leHash'
});

Comme ça un coup de CSS et c'est bon non ?
Modifié par Freez (07 Feb 2015 - 20:49)
En tout honnêteté je ne suis pas certains d'avoir compris la manière dont je dois utiliser ce code (pardon pour mon amateurisme).

Est-ce que je dois bien rajouter un "href" et le "#hash" de cette manière ? : 

$( window ).on( 'hashchange', function() {
    $("a.mainmenu").removeClass('memo'); // supprime la classe memo sur tous les liens du menu
       
    $('a[href="http://designrdlm.forumactif.fr/' + window.location.hash + '#bienvenue"]').addClass('memo');
    // ça rajoute la classe 'memo' au lien qui pointe vers '#leHash'
});
Non, tu dois juste laisser tel que dans mon exemple.

Dans ta page c'est bien <a href="#forum"> du coup si on fait le selecteur $('a[href="#forum"]') il va fonctionner. Ici je construit juste dynamiquement le selecteur en fonction du window.location.hash (qui est égal à ce qu'il y a à la fin de l'url)
$('a[href="' + window.location.hash+ '"]')
Modifié par Freez (07 Feb 2015 - 21:10)
C'est parfait je viens de mettre en place votre code correctement car j'avais fait n'importe quoi. Je vous remercie énormément pour tout l'aide que vous m'avez apportée.

Mille mercis, Cordialement,

Jonas
Modifié par Spirit_Afraid (07 Feb 2015 - 21:31)
Désolé je reviens vous embêter car je rencontre un derniers soucis, j'espère ne pas abuser de votre temps.

Tout simplement le problème est que la page se charge sur "http://designrdlm.forumactif.fr" sans le #bienvenue du coup par logique la surbrillance ne fonctionne pas.

Est-ce qu'il y a un moyen pour que l'url soit directement attribuée sur le #bienvenue ?
Modifié par Spirit_Afraid (07 Feb 2015 - 22:03)
Bon, après tu essaies de te débrouiller tout seule et apprendre Javascript & jQuery ça peut être un bon début pour toi Smiley cligne

Remplace simplement
$( window ).trigger( 'hashchange' );
par
window.location.hash = window.location.hash || 'bienvenue';
//                              (1)         ou     (2)

Petite explication : au lieu de déclencher l'évènement onhashchange de force avec trigger('hashchange'), j'effectue un vrai changement de hash affectant une valeur à window.location.hash : soit il y a quelque chose après le dièse de l'URL (ex: #forum) et dans ce cas la je réaffecte ce qu'il y avait (1), soit il n'y a rien et dans ce cas là c'est 'bienvenue' (2) être pris en compte
(car '' || 'bienvenue' => "bienvenue").
Bonne continuation !
Modifié par Freez (07 Feb 2015 - 23:08)
C'est impeccable, encore merci infiniment Freez pour toute l'aide que vous m'avez apporté et pour toutes vos explications. Smiley biggrin

Cordialement,

Jonas
Rectification, le script que je t'ai donné ne devait pas marcher si l'on charge la page avec une ancre : 
window.location.hash = window.location.hash.substring(1) || 'bienvenue';
Le .substring(1) supprime le "#" de l'ancre récupérée
Ça fonctionnait déjà bien mais j'ai effectué la modification sur votre conseil.

Encore merci pour tout Freez, c'est très gentil de votre part de m'avoir autant aidé.

Avec toutes mes amitiés, cordialement,

Jonas
Sujet clos
Aller à