Aide avec un script pour une barre latérale

[risa]

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

[Toryudo]

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>

[risa]

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.