Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Bouton +/- pour étendre/réduire catégories ?

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

Résolu Bouton +/- pour étendre/réduire catégories ?

Message par ThomasRED le Ven 2 Jan 2015 - 19:11

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:
Bouton +/- pour étendre/réduire catégories ? JDqbZhn

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.erepbelgium.com

Description du problème

Bonjour,

J'ai utilisé ce code javascript pour pouvoir réduire/étendre les catégories de mon forum en cliquant dessus...

Code:
/* categories retractables sans invision */
$(function() {
  if(window.localStorage) {
    var b = JSON.parse(localStorage.getItem("catRet")) || {}
  }
  var f = 0;
  if($("body#phpbb").length) {
    var a = "div.table-title h2", e = "ul.topiclist", c = ":not(ul.topiclist.forums)"
  }else {
    $("#pun-intro").length ? (a = "div.page-title h2", e = "div.main-head", c = ":not(div.main-content)") : (a = "th.secondarytitle h2", e = "tr", c = ":not(tr)")
  }
  $(a).closest(e).css("cursor", "pointer").each(function() {
    var d = "c" + f++, a;
    window.localStorage ? b[d] && (a = !0) : a = !1;
    a && $(this).nextUntil(c).toggle();
    $(this).click(function() {
      $(this).nextUntil(c).toggle();
      window.localStorage && (b[d] ? delete b[d] : b[d] = 1, localStorage.setItem("catRet", JSON.stringify(b)))
    })
  })
});

J'ai changé provisoirement les titres de mes catégories pour y ajouter un (+/-) pour signifier aux membres la possibilité de réduire/étendre les catégories.

https://i.imgur.com/JDqbZhn.png

Ce qui me fait des noms de catégories/chemin de forum pas très propres, par exemple : eRepBelgium :: First Steps... (+/-) :: Welcome / Bienvenue / Welkom.

Ma question : serait-il possible d'ajouter dans les barres des catégories un bouton - ou + (selon que la catégorie est ouverte ou fermée), avec ou sans mouseover (qui n'apparaitrait alors que sur passage de la souris, mais c'est pas le plus important), comme sur cet exemple :

https://i.imgur.com/eTI7aOx.png

Ca serait plus clair pour les membres de cette façon... Smile

Merci pour votre aide...


Dernière édition par ThomasRED le Dim 4 Jan 2015 - 13:38, édité 1 fois
avatar

ThomasRED
*

Messages : 42
Inscrit(e) le : 24/03/2011

http://www.erepbelgium.com
ThomasRED a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton +/- pour étendre/réduire catégories ?

Message par Ange Tuteur le Sam 3 Jan 2015 - 20:01

Bonsoir ThomasRED,

Rendez-vous dans Panneau d'administration > Affichage > Couleurs > feuille de style css

Collez le code qui suit :
Code:
ul.topiclist { position:relative }
.toggler {
  color:#FFF;
  font-size:12px;
  font-weight:bold;
  background:url(http://i38.servimg.com/u/f38/18/45/41/65/alpha10.png) transparent;
  border:1px solid #333;
  border-radius:3px;
  position:absolute;
  top:0;
  right:0;
  padding:0 6px
}


Remplacer votre JavaScript par :
Code:
$(function() {
  if(window.localStorage) {
    var b = JSON.parse(localStorage.getItem("catRet")) || {}
  }
  var f = 0;
  if($("body#phpbb").length) {
    var a = "div.table-title h2", e = "ul.topiclist", c = ":not(ul.topiclist.forums)"
  }else {
    $("#pun-intro").length ? (a = "div.page-title h2", e = "div.main-head", c = ":not(div.main-content)") : (a = "th.secondarytitle h2", e = "tr", c = ":not(tr)")
  }
  $(a).closest(e).css("cursor", "pointer").each(function() {
    var d = "c" + f++, a, untilC = $(this).nextUntil(c);
    $(this).append('<div class="toggler">-</div>');
   
    window.localStorage ? b[d] && (a = !0) : a = !1;
    a && untilC.toggle();
    a && $(this).find('.toggler').text('+');
   
    $(this).click(function() {
      untilC.toggle();
      if (untilC.css('display') == 'none') $(this).find('.toggler').text('+');
      else $(this).find('.toggler').text('-');
      window.localStorage && (b[d] ? delete b[d] : b[d] = 1, localStorage.setItem("catRet", JSON.stringify(b)))
    })
  })
});

Bonne soirée Smile
Ange Tuteur

Ange Tuteur
****

Masculin
Messages : 481
Inscrit(e) le : 16/11/2013

https://github.com/SethClydesdale
Ange Tuteur a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton +/- pour étendre/réduire catégories ?

Message par ThomasRED le Dim 4 Jan 2015 - 13:37

Merci @Ange Tuteur, c'est parfait et ça fonctionne très bien !
Merci à toi ! Wink
avatar

ThomasRED
*

Messages : 42
Inscrit(e) le : 24/03/2011

http://www.erepbelgium.com
ThomasRED 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