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 le Dim 14 Nov 2010 - 12: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.



Création du script

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

Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "Widgets rétractables" et pour placement "Toutes les pages".

Insérez-y le code suivant si votre forum utilise 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")
  }))
});

Insérez-y le code suivant si votre forum utilise toute autre version que phpBB2 :
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})
  }))
});


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(http://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;
}

avatar

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


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