Afficher / masquer les widgets du forum

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

  • 0

Tutoriel Afficher / masquer les widgets du forum

Message par Threax Dim 14 Nov 2010 - 6:32

Afficher / Masquer les widgets du forum

Ce script permet à vos membres de choisir individuellement d'afficher ou masquer les widgets du forum selon leurs préférences. Il ne nécessite aucune édition de template, il est donc très facile à installer. Toutefois, selon la version de votre forum vous devez installer un script différent.

Le script retient votre choix même si vous changez de page, ou si vous la rafraîchissez. Le choix peut être inversé si vous cliquez sur la flèche, ou si vous videz le cache du navigateur.

Afficher / masquer les widgets du forum Tuto110

Création du script

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Widgets rétractables" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

Pour la version PhpBB2

Code:
$(function() {
  var c = $("#left,#right"), d, e = function() {
    var a = $(this).data("side");
    window.localStorage && localStorage[("none" == $("#" + a).parent().css("display") ? "remove" : "set") + "Item"]("wid" + a, "1");
    $("#" + a).parent().toggle();
    $(this).toggleClass("isopened isclosed")
  };
  c.length && ($("#content-container").prepend(d = $('<div id="widget-arrows"><div style="clear:both"></div></div>')), c.each(function() {
    var a = $(this).attr("id"), b = $('<div class="widget-arrow is' + a + ' isopened"></div>');
    b.data("side", a).appendTo(d).click(e);
    window.localStorage && "1" == localStorage.getItem("wid" + a) && b.trigger("click")
  }))
});

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Pour les versions PhpBB3, PunBB et Invision


Code:
$(function() {
  var c = $("#left,#right"), d, e = function(a) {
    var a = a.direct ? 0 : 1E3, b = $(this).data("side");
    window.localStorage && localStorage[("none" == $("#" + b).css("display") ? "remove" : "set") + "Item"]("wid" + b, "1");
    $("#" + b).stop(!0, !0).animate({width:"toggle", height:"toggle", opacity:"toggle"}, a);
    $(this).toggleClass("isopened isclosed")
  };
  c.length && ($("#content-container").prepend(d = $('<div id="widget-arrows"><div style="clear:both"></div></div>')), c.each(function() {
    $(this).find("script").remove();
    var a = $(this).attr("id"), b = $('<div class="widget-arrow is' + a + ' isopened"></div>');
    "right" == a && $("#content").prepend($("#right").css("padding", "0 10px")).css("margin-right", 0);
    b.data("side", a).appendTo(d).click(e);
    window.localStorage && "1" == localStorage.getItem("wid" + a) && b.trigger({type:"click", direct:!0})
  }))
});

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Installation du CSS

Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Insérez ce code dans votre feuille de style personnalisé :
Code:
#widget-arrows {
  height: 13px;
}
.widget-arrow {
  height: 13px;
  width: 16px;
  border-radius: 4px;
  float: left;
  cursor: pointer;
  background: #f5ebf7 url(https://i.imgur.com/zVQMs.png) no-repeat 0 -13px;
}
.widget-arrow.isright {
  float: right;
}
.widget-arrow.isleft.isclosed, .widget-arrow.isright.isopened {
  background-position: 0 0;
}

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Threax

Threax
Membre actif

Masculin
Messages : 17276
Inscrit(e) le : 27/08/2005

http://lesforumsde.forumactif.com
Threax 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