Widgets open- en dichtklappen

Vorige onderwerp Volgende onderwerp Ga naar beneden

  • 0

Widgets open- en dichtklappen

Bericht van 10spetter10 op za 9 jan 2016 - 22:43

Widgets open- en dichtklappen


Deze tutorial zal je helpen om een knop te maken waarmee je jouw widgetbalk open of dicht kan schuiven.


Dit is een zeer korte en makkelijke tutorial, je moet namelijk een script en een paar lijntjes css kopieren en plakken.

Javascript instellen



Beheerderspaneel Modules html & javascript Javascript code beheer  

Maak hier een nieuw script met volgende waarden:


Titel: (vb: widgets open- en dichtklappen)
Plaatsing: op alle pagina's
Code: zie hieronder

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 title="Schuif de widgets open of dicht" 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})
  }))
});

CSS instellen





Beheerderspaneel Display Plaatjes en kleuren Kleuren Cascading Style Sheet

Plak hier de volgende lijnen css:

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;
}

Je kan natuurlijk zelf wat aanpassingen maken zoals andere pijlen gebruiken, of een andere achtergrondkleur.

avatar

10spetter10
Medaille Forumlid

Man Aantal berichten : 1267
Geboortedatum : 21-04-97
Leeftijd : 21
Taal : Nederlands
Locatie : België
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum