Garder une position en mémoire après changement par javascript

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Garder une position en mémoire après changement par javascript

Message par Evaliah Mar 26 Mar 2013 - 14:36

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 :
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 ! ::fleur::


Dernière édition par Evaliah le Mar 9 Avr 2013 - 13:19, édité 1 fois
Evaliah

Evaliah
****

Féminin
Messages : 315
Inscrit(e) le : 14/01/2013

http://lestroisiles.forumactif.org/
Evaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Garder une position en mémoire après changement par javascript

Message par Evaliah Jeu 28 Mar 2013 - 14:58

Un petit up du jeudi !

Merci Smile
Evaliah

Evaliah
****

Féminin
Messages : 315
Inscrit(e) le : 14/01/2013

http://lestroisiles.forumactif.org/
Evaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Garder une position en mémoire après changement par javascript

Message par Evaliah Dim 31 Mar 2013 - 15:39

Un petit up du dimanche s'il vous plaît Smile
Evaliah

Evaliah
****

Féminin
Messages : 315
Inscrit(e) le : 14/01/2013

http://lestroisiles.forumactif.org/
Evaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Garder une position en mémoire après changement par javascript

Message par Ea Mer 3 Avr 2013 - 16:53

Bonjour,


Où en est votre problème ?

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Garder une position en mémoire après changement par javascript

Message par Evaliah Jeu 4 Avr 2013 - 11:27

Bonjour et merci de votre intérêt Smile

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
Evaliah

Evaliah
****

Féminin
Messages : 315
Inscrit(e) le : 14/01/2013

http://lestroisiles.forumactif.org/
Evaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Garder une position en mémoire après changement par javascript

Message par Gorgebvsh Jeu 4 Avr 2013 - 11:48

Bonjour, pour enregistrer un cookies sur forumactif on peut faire ceci:

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.
Gorgebvsh

Gorgebvsh
**

Messages : 74
Inscrit(e) le : 12/12/2011

http://www.resistance-squad.com/#powered%20by%20forumactif%2Ecom
Gorgebvsh a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Garder une position en mémoire après changement par javascript

Message par Evaliah Jeu 4 Avr 2013 - 12:03

Bonjour Smile

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 Smile
Evaliah

Evaliah
****

Féminin
Messages : 315
Inscrit(e) le : 14/01/2013

http://lestroisiles.forumactif.org/
Evaliah a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Garder une position en mémoire après changement par javascript

Message par Gorgebvsh Jeu 4 Avr 2013 - 12:32

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);
    });
});
Cordialement.
Gorgebvsh

Gorgebvsh
**

Messages : 74
Inscrit(e) le : 12/12/2011

http://www.resistance-squad.com/#powered%20by%20forumactif%2Ecom
Gorgebvsh a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Garder une position en mémoire après changement par javascript

Message par Ea Jeu 4 Avr 2013 - 12:32

Une autre façon en utilisant localStorage serait de faire comme ceci :

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()
  )
 
});
localStorage n'est pas présent sur de vieux navigateur, mais ça à l'avantage de ne pas utiliser de cookie ( qui sont envoyés à chaque affichage de page du forum ).

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Garder une position en mémoire après changement par javascript

Message par Evaliah Jeu 4 Avr 2013 - 13:20

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 Smile

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 !
Evaliah

Evaliah
****

Féminin
Messages : 315
Inscrit(e) le : 14/01/2013

http://lestroisiles.forumactif.org/
Evaliah a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Garder une position en mémoire après changement par javascript

Message par Ea Jeu 4 Avr 2013 - 14:03

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 :

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>
ou bien en le compactant :

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>
pour mon code :

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>
et en le compactant :

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>
en remplaçant le /99199.js par l'url du script que vous avez ajouté ( disponible dans la colonne URL de cette page ).

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Garder une position en mémoire après changement par javascript

Message par Evaliah Jeu 4 Avr 2013 - 15:30

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 Very Happy

Merci encore Smile
Evaliah

Evaliah
****

Féminin
Messages : 315
Inscrit(e) le : 14/01/2013

http://lestroisiles.forumactif.org/
Evaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Garder une position en mémoire après changement par javascript

Message par Ea Jeu 4 Avr 2013 - 15:36

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.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Garder une position en mémoire après changement par javascript

Message par Evaliah Jeu 4 Avr 2013 - 16:35

Oui bien sûr, l'adresse est ici :
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 ! Smile
Evaliah

Evaliah
****

Féminin
Messages : 315
Inscrit(e) le : 14/01/2013

http://lestroisiles.forumactif.org/
Evaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Garder une position en mémoire après changement par javascript

Message par Ea Jeu 4 Avr 2013 - 16:58

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 :

Code:
.accessrapides { display: none; }
et ajouter dans le script ( avant le </script> ) ceci pour l'afficher :

Code:
;$('.accessrapides').show()
de cette manière on ne l'afficherait qu'une fois déplacé ( et ça pourrait améliorer les choses ).

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum