Garder une position en mémoire après changement par javascript
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Garder une position en mémoire après changement par javascript
Bonjour à tous et merci de vous être arrêté(e) sur ma question !
J'ai créé dans mon template overall_header un bandeau contenant des liens pour naviguer directement vers différentes parties du forum.
Vous pouvez en voir l'image :
Et je vous en donne le code :
Le comportement que je veux régler c'est que lorsqu'on clique sur le mot "Cacher" ma barre de lien va se placer tout à droite de sorte à ce qu'on ne puisse voir que le mot "Voir" qui s'affiche alors à la place du mot "Cacher".
Pour cela j'ai créé un javascript que j'ai hébergé dans la gestion de codes js du forum, et pour lequel j'ai coché la case "toutes les pages".
Voici ce script :
Le script fonctionne bien pour ce qui est de :
-Déplacer ma barre vers la droite
-Remplacer le mot Cacher par le mot Voir
-Remettre la barre à son emplacement initial lorsqu'on clique sur le mot Voir.
Mon problème c'est que dès que l'utilisateur change de page, que ce soit dans le forum ou pour aller ailleurs, la barre se remet à sa position initiale !
Je pense qu'il faudrait que je fasse un système de cookie qui retienne la position choisie par l'utilisateur mais ça dépasse malheureusement mes compétences et ce que j'ai pu lire sur ce système ne m'a vraiment pas aidée !
Donc j'espère que quelqu'un aura une solution pour que le choix de l'utilisateur soit pris en compte dans toute sa visite actuelle mais aussi (si possible) pour la suivante.
(petite précision mon bandeau est réglé en position fixe dans mon css pour suivre l'utilisateur)
Merci beaucoup !
J'ai créé dans mon template overall_header un bandeau contenant des liens pour naviguer directement vers différentes parties du forum.
Vous pouvez en voir l'image :
- Spoiler:
Et je vous en donne le code :
- Code:
<div class="accessrapides">
<div class="cacheracces">Cacher</div>
<div class="afficheracces">Voir</div>
<table width="100%"><tr>
<td width="25%"><a href="http://fictions.forumgratuit.eu/c3-agora">L'Agora</a></td>
<td width="25%"><a href="http://fictions.forumgratuit.eu/c1-fictions-originales">Les Fictions Originales</a></td>
<td width="25%"><a href="http://fictions.forumgratuit.eu/c2-fanfictions">Les Fanfictions</a></td>
<td width="25%"><a href="http://fictions.forumgratuit.eu/f26-commentaires">Les Commentaires de fictions</a></td>
</tr></table>
<span style="text-align:left;padding-left:20px;">Les accès rapides...</span>
</div>
Le comportement que je veux régler c'est que lorsqu'on clique sur le mot "Cacher" ma barre de lien va se placer tout à droite de sorte à ce qu'on ne puisse voir que le mot "Voir" qui s'affiche alors à la place du mot "Cacher".
Pour cela j'ai créé un javascript que j'ai hébergé dans la gestion de codes js du forum, et pour lequel j'ai coché la case "toutes les pages".
Voici ce script :
- Code:
$(document).ready(function () {
$(".cacheracces").click(function(){
$(".accessrapides").css({"left": "90%" });
$(".cacheracces").fadeOut(800);
$(".afficheracces").fadeIn(800);
});
$(".afficheracces").click(function(){
$(".accessrapides").animate({
"left": "13%"}, "slow");
$(".afficheracces").fadeOut(800);
$(".cacheracces").fadeIn(800);
});
});
Le script fonctionne bien pour ce qui est de :
-Déplacer ma barre vers la droite
-Remplacer le mot Cacher par le mot Voir
-Remettre la barre à son emplacement initial lorsqu'on clique sur le mot Voir.
Mon problème c'est que dès que l'utilisateur change de page, que ce soit dans le forum ou pour aller ailleurs, la barre se remet à sa position initiale !
Je pense qu'il faudrait que je fasse un système de cookie qui retienne la position choisie par l'utilisateur mais ça dépasse malheureusement mes compétences et ce que j'ai pu lire sur ce système ne m'a vraiment pas aidée !
Donc j'espère que quelqu'un aura une solution pour que le choix de l'utilisateur soit pris en compte dans toute sa visite actuelle mais aussi (si possible) pour la suivante.
(petite précision mon bandeau est réglé en position fixe dans mon css pour suivre l'utilisateur)
Merci beaucoup !
Dernière édition par Evaliah le Mar 9 Avr 2013 - 13:19, édité 1 fois
Re: Garder une position en mémoire après changement par javascript
Un petit up du jeudi !
Merci
Merci
Re: Garder une position en mémoire après changement par javascript
Un petit up du dimanche s'il vous plaît
Re: Garder une position en mémoire après changement par javascript
Bonjour,
Où en est votre problème ?
Cordialement.
Où en est votre problème ?
Cordialement.
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Garder une position en mémoire après changement par javascript
Bonjour et merci de votre intérêt
Malheureusement la compréhension de ce problème est vraiment en dehors de mes capacités du moment, j'ai beau le retourner dans tous les sens avec mes connaissances c'est trop juste :s
Malheureusement la compréhension de ce problème est vraiment en dehors de mes capacités du moment, j'ai beau le retourner dans tous les sens avec mes connaissances c'est trop juste :s
Re: Garder une position en mémoire après changement par javascript
Bonjour, pour enregistrer un cookies sur forumactif on peut faire ceci:
Ensuite pour savoir l'état du cookie on peut faire ainsi:
Cordialement.
- Code:
my_setcookie('nom_du_cookie', 'valeur_du_cookie', 31536000, 0);
Ensuite pour savoir l'état du cookie on peut faire ainsi:
- Code:
$(function () {
if (my_getcookie('nom_du_cookie') == null) {
/* function si cookie = null (n'existe pas) */
} else if (my_getcookie('nom_du_cookie') == 'visible') {
/* function si valeur du cookie = visible */
} else if (my_getcookie('nom_du_cookie') == 'masquer') {
/* function si valeur du cookie = masquer */
}
});
Cordialement.
Re: Garder une position en mémoire après changement par javascript
Bonjour
Merci pour cette réponse mais malheureusement je serais bien en peine de l'appliquer, je ne sais pas où mettre le premier code et quoi mettre à la place de valeur, à quoi correspondent les chiffres et si j'imagine qu'il faut mettre le deuxième code dans un js appliqué à toutes les pages je ne saurais pas comment l'appliquer à mon js de départ :s
Si vous vouliez bien m'aider à y voir plus clair ce serait gentil
Merci pour cette réponse mais malheureusement je serais bien en peine de l'appliquer, je ne sais pas où mettre le premier code et quoi mettre à la place de valeur, à quoi correspondent les chiffres et si j'imagine qu'il faut mettre le deuxième code dans un js appliqué à toutes les pages je ne saurais pas comment l'appliquer à mon js de départ :s
Si vous vouliez bien m'aider à y voir plus clair ce serait gentil
Re: Garder une position en mémoire après changement par javascript
Re .. si je reprend par rapport à votre code de depart, on devrait pouvoir faire comme cela:
- Code:
$(document).ready(function () {
/* on regarde la présence du cookie, si cookie = null ou 1 = afficher le menu */
if ((my_getcookie('mon_menu') == null) || (my_getcookie('mon_menu') == 1)) {
$(".accessrapides").css({
"left": "13%"
});
} /* si cookie 0 = masquer le menu */
else if (my_getcookie('mon_menu') == 0) {
$(".accessrapides").css({
"left": "90%"
});
}
$(".cacheracces").click(function () {
$(".accessrapides").css({
"left": "90%"
});
$(".cacheracces").fadeOut(800);
$(".afficheracces").fadeIn(800);
/* on met le cookies sur 0 = masquer */
my_setcookie('mon_menu', 0, 31536000, 0);
});
$(".afficheracces").click(function () {
$(".accessrapides").animate({
"left": "13%"
}, "slow");
$(".afficheracces").fadeOut(800);
$(".cacheracces").fadeIn(800);
/* on met le cookies sur 1 = afficher */
my_setcookie('mon_menu', 1, 31536000, 0);
});
});
Re: Garder une position en mémoire après changement par javascript
Une autre façon en utilisant localStorage serait de faire comme ceci :
Cordialement.
- Code:
$(function () {
$(".cacheracces").click(function(){
$(".accessrapides").css({"left": "90%" });
$(".cacheracces").fadeOut(800);
$(".afficheracces").fadeIn(800);
// on enregistre le cachage du bandeau
window.localStorage && localStorage.setItem('bandeau_hided',1)
});
$(".afficheracces").click(function(){
$(".accessrapides").animate({
"left": "13%"}, "slow");
$(".afficheracces").fadeOut(800);
$(".cacheracces").fadeIn(800);
// on supprime l'enregistrement de cachage du bandeau
window.localStorage && localStorage.removeItem('bandeau_hided')
});
// si le bandeau est enregistré comme caché, on le cache
// instantanément à l'ouverture de la page
window.localStorage && localStorage.getItem('bandeau_hided') && (
$(".accessrapides").css({"left": "90%" }),
$(".cacheracces").hide(),
$(".afficheracces").show()
)
});
Cordialement.
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Garder une position en mémoire après changement par javascript
Ouaw plein de codes, merci les amis !
Alors les deux marchent, bien sûr, et le comportement semble strictement le même vis-à-vis de l'utilisateur, mais comme le script d'Ea est un peu plus intuitif pour moi je pense que je vais le privilégier, même si je garde le votre sous le coude Gorgebvsh
Par contre il y a juste un mini "défaut" dans les deux c'est qu'on commence par voir le bandeau (il se remet rapidement pour se recacher tout aussi rapidement en fait) avant qu'il ne se cache, ça dure très peu de temps mais c'est un peu moins "propre" que s'il restait sagement à sa place sans faire le malin le temps d'une seconde :p
Y a-t-il un moyen d'éviter ça ?
En tout cas un grand merci à vous deux !
Alors les deux marchent, bien sûr, et le comportement semble strictement le même vis-à-vis de l'utilisateur, mais comme le script d'Ea est un peu plus intuitif pour moi je pense que je vais le privilégier, même si je garde le votre sous le coude Gorgebvsh
Par contre il y a juste un mini "défaut" dans les deux c'est qu'on commence par voir le bandeau (il se remet rapidement pour se recacher tout aussi rapidement en fait) avant qu'il ne se cache, ça dure très peu de temps mais c'est un peu moins "propre" que s'il restait sagement à sa place sans faire le malin le temps d'une seconde :p
Y a-t-il un moyen d'éviter ça ?
En tout cas un grand merci à vous deux !
Re: Garder une position en mémoire après changement par javascript
Les deux scripts agissent une fois que le navigateur a affiché la page entière.
Normalement une page se charge plutôt vite.
Si vous vouliez l'exécuter plus rapidement, vous pourriez le mettre directement dans la template après votre bandeau ( en retirant la partie qui l'exécute une fois la page ouverte ).
Pour le code de Gorgebvsh ça donnerait :
Vous pourriez également créer un nouveau javascript en y mettant un des codes que j'ai mis au dessus ( sans les <script> et </script> ) et en ne le plaçant nulle part.
Puis ensuite mettre dans votre template après le bandeau :
Cordialement.
Normalement une page se charge plutôt vite.
Si vous vouliez l'exécuter plus rapidement, vous pourriez le mettre directement dans la template après votre bandeau ( en retirant la partie qui l'exécute une fois la page ouverte ).
Pour le code de Gorgebvsh ça donnerait :
- Code:
<script>
/* on regarde la présence du cookie, si cookie = null ou 1 = afficher le menu */
if ((my_getcookie('mon_menu') == null) || (my_getcookie('mon_menu') == 1)) {
$(".accessrapides").css({
"left": "13%"
});
} /* si cookie 0 = masquer le menu */
else if (my_getcookie('mon_menu') == 0) {
$(".accessrapides").css({
"left": "90%"
});
}
$(".cacheracces").click(function () {
$(".accessrapides").css({
"left": "90%"
});
$(".cacheracces").fadeOut(800);
$(".afficheracces").fadeIn(800);
/* on met le cookies sur 0 = masquer */
my_setcookie('mon_menu', 0, 31536000, 0);
});
$(".afficheracces").click(function () {
$(".accessrapides").animate({
"left": "13%"
}, "slow");
$(".afficheracces").fadeOut(800);
$(".cacheracces").fadeIn(800);
/* on met le cookies sur 1 = afficher */
my_setcookie('mon_menu', 1, 31536000, 0);
});
</script>
- Code:
<script>null==my_getcookie("mon_menu")||1==my_getcookie("mon_menu")?$(".accessrapides").css({left:"13%"}):0==my_getcookie("mon_menu")&&$(".accessrapides").css({left:"90%"});$(".cacheracces").click(function(){$(".accessrapides").css({left:"90%"});$(".cacheracces").fadeOut(800);$(".afficheracces").fadeIn(800);my_setcookie("mon_menu",0,31536E3,0)});
$(".afficheracces").click(function(){$(".accessrapides").animate({left:"13%"},"slow");$(".afficheracces").fadeOut(800);$(".cacheracces").fadeIn(800);my_setcookie("mon_menu",1,31536E3,0)})</script>
- Code:
<script>
$(".cacheracces").click(function(){
$(".accessrapides").css({"left": "90%" });
$(".cacheracces").fadeOut(800);
$(".afficheracces").fadeIn(800);
// on enregistre le cachage du bandeau
window.localStorage && localStorage.setItem('bandeau_hided',1)
});
$(".afficheracces").click(function(){
$(".accessrapides").animate({
"left": "13%"}, "slow");
$(".afficheracces").fadeOut(800);
$(".cacheracces").fadeIn(800);
// on supprime l'enregistrement de cachage du bandeau
window.localStorage && localStorage.removeItem('bandeau_hided')
});
// si le bandeau est enregistré comme caché, on le cache
// instantanément à l'ouverture de la page
window.localStorage && localStorage.getItem('bandeau_hided') && (
$(".accessrapides").css({"left": "90%" }),
$(".cacheracces").hide(),
$(".afficheracces").show()
)
</script>
- Code:
<script>$(".cacheracces").click(function(){$(".accessrapides").css({left:"90%"});$(".cacheracces").fadeOut(800);$(".afficheracces").fadeIn(800);window.localStorage&&localStorage.setItem("bandeau_hided",1)});$(".afficheracces").click(function(){$(".accessrapides").animate({left:"13%"},"slow");$(".afficheracces").fadeOut(800);$(".cacheracces").fadeIn(800);window.localStorage&&localStorage.removeItem("bandeau_hided")});
window.localStorage&&localStorage.getItem("bandeau_hided")&&($(".accessrapides").css({left:"90%"}),$(".cacheracces").hide(),$(".afficheracces").show())</script>
Vous pourriez également créer un nouveau javascript en y mettant un des codes que j'ai mis au dessus ( sans les <script> et </script> ) et en ne le plaçant nulle part.
Puis ensuite mettre dans votre template après le bandeau :
- Code:
<script src="/99199.js"></script>
Cordialement.
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Garder une position en mémoire après changement par javascript
Merci pour l'astuce !
Alors j'ai essayé les deux méthodes, la seconde me plaisait bien mais arrive au même résultat, la première en mode caché on a encore une légère réapparition mais la barre n'a pas parcouru la moitié du chemin qu'elle revient immédiatement à sa place.
J'ai un instant imaginé de mettre la barre en caché en premier mais je pense que ça ne ferait qu'inverser le problème, quand on la définirait en visible en changeant de page elle se cacherait d'abord puis reviendrait, donc visuellement ça reviendrait au même je pense.
A moins d'une idée supplémentaire pour ce mini problème d'ici la fin de la semaine je mettrai ce sujet en résolu, c'est déjà énorme que vous ayez pu résoudre le problème majoritaire
Merci encore
Alors j'ai essayé les deux méthodes, la seconde me plaisait bien mais arrive au même résultat, la première en mode caché on a encore une légère réapparition mais la barre n'a pas parcouru la moitié du chemin qu'elle revient immédiatement à sa place.
J'ai un instant imaginé de mettre la barre en caché en premier mais je pense que ça ne ferait qu'inverser le problème, quand on la définirait en visible en changeant de page elle se cacherait d'abord puis reviendrait, donc visuellement ça reviendrait au même je pense.
A moins d'une idée supplémentaire pour ce mini problème d'ici la fin de la semaine je mettrai ce sujet en résolu, c'est déjà énorme que vous ayez pu résoudre le problème majoritaire
Merci encore
Re: Garder une position en mémoire après changement par javascript
Vous pouvez donner l'adresse du forum où vous mettez cela ?
En mettant mon script juste après le bandeau, ça devrait vraiment agir instantanément.
Pour donner un exemple, là :
http://www.maonyn.com/h30-test-html
Il n'y a que le texte "hello" dans cette page, et un script qui le remplace en "world". Mais en l'ouvrant, le script ( qui n'est pas retardé ) agit directement et on ne voit que le mot world.
Cordialement.
En mettant mon script juste après le bandeau, ça devrait vraiment agir instantanément.
Pour donner un exemple, là :
http://www.maonyn.com/h30-test-html
Il n'y a que le texte "hello" dans cette page, et un script qui le remplace en "world". Mais en l'ouvrant, le script ( qui n'est pas retardé ) agit directement et on ne voit que le mot world.
Cordialement.
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Garder une position en mémoire après changement par javascript
Oui bien sûr, l'adresse est ici :
http://yaoi.forumgratuit.org/
Voici le bout de template qui correspond au bandeau :
(j'ai juste remplacé mon "animate" par un "css" car j'ai remarqué que c'était plus fluide mais je n'ai fait aucun autre changement)
Merci pour votre intérêt !
http://yaoi.forumgratuit.org/
Voici le bout de template qui correspond au bandeau :
- Code:
<div class="accessrapides">
<div class="cacheracces">Cacher </div>
<div class="afficheracces">Voir </div>
<table width="100%"><tr>
<td width="25%"><a href="http://fictions.forumgratuit.eu/c3-agora">L'Agora</a></td>
<td width="25%"><a href="http://fictions.forumgratuit.eu/c1-fictions-originales">Les Fictions Originales</a></td>
<td width="25%"><a href="http://fictions.forumgratuit.eu/c2-fanfictions">Les Fanfictions</a></td>
<td width="25%"><a href="http://fictions.forumgratuit.eu/f26-commentaires">Les Commentaires de fictions</a></td>
</tr></table>
<span style="text-align:left;padding-left:20px;">Les accès rapides...</span>
</div>
<script>$(".cacheracces").click(function(){$(".accessrapides").css({left:"90%"});$(".cacheracces").fadeOut(800);$(".afficheracces").fadeIn(800);window.localStorage&&localStorage.setItem("bandeau_hided",1)});$(".afficheracces").click(function(){$(".accessrapides").css({left:"13%"},"slow");$(".afficheracces").fadeOut(800);$(".cacheracces").fadeIn(800);window.localStorage&&localStorage.removeItem("bandeau_hided")});
window.localStorage&&localStorage.getItem("bandeau_hided")&&($(".accessrapides").css({left:"90%"}),$(".cacheracces").hide(),$(".afficheracces").show())</script>
(j'ai juste remplacé mon "animate" par un "css" car j'ai remarqué que c'était plus fluide mais je n'ai fait aucun autre changement)
Merci pour votre intérêt !
Re: Garder une position en mémoire après changement par javascript
sur firefox là je ne suis pas parvenu à avoir le prolbème.
sur google chrome, si je vide le cache avant d'ouvrir une page, on le voit un instant au milieu avant qu'il aille se cacher, si je ne vide pas le cache par contre c'est instantané.
il faudrait voir sans si transition css ça va mieux ( c'est peut-être la transition qui provoque le délai de repositionnement ).
sinon il y aurait peut-être moyen de mettre cacher le panneau avec :
Cordialement.
sur google chrome, si je vide le cache avant d'ouvrir une page, on le voit un instant au milieu avant qu'il aille se cacher, si je ne vide pas le cache par contre c'est instantané.
il faudrait voir sans si transition css ça va mieux ( c'est peut-être la transition qui provoque le délai de repositionnement ).
sinon il y aurait peut-être moyen de mettre cacher le panneau avec :
- Code:
.accessrapides { display: none; }
- Code:
;$('.accessrapides').show()
Cordialement.
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Sujets similaires
» Javascript - Garder le même onglet ouvert / personnaliser le champ date
» Changement de position de la chatbox
» Le Background personnalisé ne reste pas en mémoire après un rechargement de la page.
» Garder des données javascript d'une page à l'autre
» Changement de position des éléments lorsque nouveau message
» Changement de position de la chatbox
» Le Background personnalisé ne reste pas en mémoire après un rechargement de la page.
» Garder des données javascript d'une page à l'autre
» Changement de position des éléments lorsque nouveau message
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum