Javascript, CSS et re-chargement de page

J'ai réalisé une page web très longue / haute (c'était le but).
Cette page contient 7 sections qui se succèdent les unes au dessous des autres.
Sur le côté gauche, j'ai un petit menu vertical, permettant d'accéder à chacune de ces parties de la page.

Un script javascript teste, lors des scrollings, quelle section est actuellement affichée à l'écran, afin d'attribuer une classe différente à mon menu, ce qui permet à celui-ci d'indiquer de façon "dynamique" dans quelle section de la page nous sommes.

Tout fonctionne très bien, sauf en cas de rechargement de la page. Comme il n'y a pas de scroll détecté, le menu reprend la classe par défaut qui est stipulée dans le HTML (correspondant bien sûr à la section 1).

J'aimerais donc qu'en cas de rechargement, le test soit de nouveau effectué (possibilité de provoquer un mini scroll de 2px ?) ou qu'il laisse le menu tel qu'il était affiché auparavant (peut-être que ce n'est pas possible ?).

J'espère avoir été clair... Merci d'avance pour vos conseils ! ;)

Salut, il te faut soit passer par un cookie qui représentera ton menu current, et en cas de chargement si le cookie existe tu recharge sa valeur, sinon c'est une première visite tu charge le defaut menu.
Tu peux aussi le faire avec localstorage, il y a pleins de tutoriels.

Bonne soirée.

Merci headmax :)

Après avoir farfouillé sur Google et quelques cogitations nocturnes, voici ce que j'ai fait en résumé/simplifié :

- Dans mon fichier JS, au lieu de simplement déclarer les valeurs de ma variable à la volée, je les ai placées dans sessionStorage.
Ensuite, j'appelle la valeur de sessionStorage pour attribuer la bonne classe à mon menu.

- Dans ma page HTML, j'ai créé un petit script qui teste si ma valeur sessionStorage est égale à 1, ou 2, … ou 7 et sinon ça attribue la valeur 1 (par défaut dans le cas d'une arrivée sur mon site) à mon menu.

Ça semble fonctionner...

C'est bien ça l'esprit du truc ?

Tout a fait Harlock ;) bien joué, si pas de soucis dans ce cas, met ton post en résolu A+.

Bonne soirée.

Merci pour ta "validation". Pas toujours sûr de moi dans la mesure où à la base, tout ça n'est pas exactement ma spécialité... Content de lire que j'ai eu le bon réflexe (grâce à ta piste) :)

Bonne soirée toi-même ! :P

(Et encore merci)

Pas de soucis, ravi de t'avoir mis sur la piste ;), et n'hésite pas de poster en cas de problème ;).
Autre précision, localstorage et sessionstorage, est fait à la base pour du html5 donc attention à la compatibilité navigateur ;) quand même.

Bonne soirée.

Merci pour ton avertissement.

Y a t-il un moyen de déclarer la classe par défaut de mon menu pour les anciens navigateurs, sans que les deux techniques ne rentrent en conflit ?

Tout d'abord la différence entre Local Storage et Session Storage est que le premier sauvegarde les données sans tenir compte d'une limite de temps. Session Storage, par contre, sauvegarde les données durant une seule session. Donc si tu sauvegarder tes données avec SessionStorage celles-ci seront disparues à l'ouverture par exemple d'un nouvel onglet.

Ces technologies ne sont pas cross browser compatible, il te faut donc tester si le navigateur de l'utilisateur supporte cette technologie. Pour ce faire, je te conseille d’utiliser la libraire javascript Modernizr qui offre la possibilité de tester si une technologie HTML5 est supportée par le navigateur.

exemple :

Code:

---

1 2 3 4 5 6 7 8

if (Modernizr.localstorage) { }else{// la technologie n'est pas supportée dans votre navigateur.}   ou   if (Modernizr.sessionstorage)) { }else{// la technologie n'est pas supportée dans votre navigateur.}

---

Après ça tu pourra utiliser un cookie, ou une session côté serveur que tu affectera tout simplement a ta variable global js.

Ou alors tu décide de faire ça avec un language côté serveur qui lui gère très faciement les sessions par exemple l'affectation de données de PHP à JS.
Cette méthode évite d'alourdir le chargement de ta page et elle sera compatible sur tout navigateur.
Tu as un diemme, il faut faire un choix, soit la pérénité, soit attendre que les conflits entre les acteurs du développement de html5, soit enfin d'accord, ce qui aura un grand intérêt, pour le développement d'un code pour tout navigateur, ce qu'il promettait d'après leur dire...
Bref on y est pas encore ;).
Bonne soirée quand même.

Code:

---

1 2	var current_menu = "<?php echo $_SESSION["menu_current"]; ?>";

---

Le lien pour la librairy modernizr

Merci pour le lien vers modernizr, je ne connaissais pas :)

En fait, je me demande si cela ne m'emmène pas trop loin.

Une idée m'est venue, je ne sais pas si elle est bonne… J'ai un javascript qui teste quelle section est actuellement affichée à l'écran au moment de chaque scroll.

Code:

---

1 2 3 4

window.onscroll=function(){ // script de test })

---

Peut-être qu'en effectuant ce même test ÉGALEMENT à chaque chargement de page, j'obtiendrais tout simplement un résultat compatible de partout ?

Dans ce cas, dois-je dupliquer mon script et lancer ce doublon par $(document).ready(function() ou y a t-il un moyen compact de demander ce test au scroll ET au chargement de la page ?

Oui mais tu omet ta problèmatique du départ.

Citation:

---

Tout fonctionne très bien, sauf en cas de rechargement de la page.

---

Il faut impérativement enregistrer le menu qui avait été selectioné pour que lors d'un rechargement tu le garde en mémoire.
L'enregistrement passe soit par js via sessionstorage (pas très portable browser récent mis à jours), par un cookie (plus chiant a mettre en oeuvre, mais portable sur tout browser), par le biais d'une url et formulaire en get, se qui aura pour action de refresh la page, sinon l'appel peu se faire en ajax sans rechargement de ta page.

Bonne soirée.