Aide avec un script pour une barre latérale

2 participants

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

Résolu Aide avec un script pour une barre latérale

Message par risa Lun 28 Mar 2022, 06:22

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 27 Mars 2022
Lien du forum : https://bloodcontract.forumactif.com

Description du problème

Bonjour,

J'ai installé un code en libre service venant d'ici: https://terrible.forumactif.org/t40-sidebar et j'ai un souci pour garder la barre latérale ouverte, lorsqu'on change ou actualise la page. Il faut cliquer à chaque fois sur le bouton du haut pour la rouvrir, ce qui est assez pénible.

Second souci: La barre apparaît ouverte une micro seconde dès que l'on est sur une page, avant de se refermer. Y a t-il un moyen d'éviter cela ?

Voici le script utilisé:

Code:
$(document).ready(function () {
  $('#sidebar').css('right', '-260px');
$("#sidebar-trigger").removeClass("active");
  $("#sidebar-trigger").click( function(e){
    e.preventDefault();
    if ($(this).hasClass("active")) {
      if ($('#sidebar').hasClass("right")) {
        if ($('#sidebar').hasClass("medium")) {
        $('#sidebar').animate({ right: '-210' }, 500);
        } else {
          $('#sidebar').animate({ right: '-260' }, 500);
        }
      } else {
        if ($('#sidebar').hasClass("medium")) {
        $('#sidebar').animate({ left: '-210' }, 500);
        } else {
      $('#sidebar').animate({ left: '-260' }, 500);
        }
      }
        $(this).removeClass("active");
      } else {
        if ($('#sidebar').hasClass("right")) {
        $('#sidebar').animate({ right: '0' }, 500);
        } else {
          $('#sidebar').animate({ left: '0' }, 500);
        }
        $(this).addClass("active");
      }
      return false;
    });
});

Merci d'avance, belle journée Smile
risa

risa
***

Féminin
Messages : 155
Inscrit(e) le : 09/05/2006

https://fushigi-no-mori.forumactif.com
risa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide avec un script pour une barre latérale

Message par Toryudo Lun 28 Mar 2022, 15:54

Bonjour !
Pour régler les deux points en même temps, on va déplacer ce script dans le Template overall_header, directement sous le code que le tutorial nous a demandé d'ajouter, donc sous le </div> final de la sidebar. Déplacer le code permet de se débarrasser du $(document).ready(function () { ce qui permet d'exécuter le code directement plutôt qu'attendre le fin de chargement de la page : on corrige donc le point 2).

Pour le point 1), on ajoute une gestion de variable locale, qui permet de sauvegarder un état et nous permet également de le relire d'une page à l'autre. On lit donc ce que j'ai appelé "sideBarOpen" et si la valeur est "active", on n'applique pas le CSS right -260px pour garder la barre ouverte. Le changement de "active" à "notactive" se fait en appuyant sur le bouton d'ouverture/fermeture de la sidebar.

Code:
<script type="text/javascript">//<![CDATA[
    var sideBarOpen = localStorage.getItem('sideBarOpen');
    if (sideBarOpen != 'active'){
      $('#sidebar').css('right', '-260px');
      $("#sidebar-trigger").removeClass("active");
    }

    $("#sidebar-trigger").click(function(e) {
        e.preventDefault();
        if ($(this).hasClass("active")) {
            if ($('#sidebar').hasClass("right")) {
                if ($('#sidebar').hasClass("medium")) {
                    $('#sidebar').animate({right: '-210'}, 500);
                } else {
                    $('#sidebar').animate({right: '-260'}, 500);
                }
            } else {
                if ($('#sidebar').hasClass("medium")) {
                    $('#sidebar').animate({left: '-210'}, 500);
                } else {
                    $('#sidebar').animate({left: '-260'}, 500);
                }
            }
            $(this).removeClass("active");
            localStorage.setItem('sideBarOpen', 'notactive');
        } else {
            if ($('#sidebar').hasClass("right")) {
                $('#sidebar').animate({right: '0'}, 500);
            } else {
                $('#sidebar').animate({left: '0'}, 500);
            }
            $(this).addClass("active");
            localStorage.setItem('sideBarOpen', 'active');
        }
        return false;
    });
//]]></script>
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1349
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide avec un script pour une barre latérale

Message par risa Lun 28 Mar 2022, 16:22

Bonjour Toryudo,

Je vous remercie infiniment pour votre explication, ainsi que le code fourni. Je comprends mieux pourquoi cela ne fonctionnait pas.
Tout est ok de mon côté, le problème est donc résolu.

Bonne journée, bien cordialement.
risa

risa
***

Féminin
Messages : 155
Inscrit(e) le : 09/05/2006

https://fushigi-no-mori.forumactif.com
risa a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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