Nederlands Ondersteuningsforum :
Welkom op het Nederlandse Ondersteuningsforum van ActieForum.


Om ondersteuning te vragen of om in één van onze andere forumsecties te kunnen posten dien je een account te hebben, bedankt voor het inloggen als je al geregistreerd bent, of registreer direct een account op ons ondersteuningsforum als je dit nog niet gedaan hebt.

Widgets open- en dichtklappen

Vorige onderwerp Volgende onderwerp Go down

  • 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:

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

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




   Veel Voorkomende Problemen | Forum Gereedschap | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | Ondersteuningsvraag opgelost? Markeer je topic dan met het icoon
avatar

10spetter10
Globaal Moderator
Globaal Moderator

Man Aantal berichten : 1311
Geboortedatum : 21-04-97
Leeftijd : 20
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