Widgets open- en dichtklappen

Vorige onderwerp Volgende onderwerp Ga naar beneden

  • 0

Tutorial 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.

Widgets open- en dichtklappen NLG8Qfe

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.

10spetter10

10spetter10
Medaille Forumlid
Medaille Forumlid

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

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