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.

CategorieŽn open- en dichtklappen

Vorige onderwerp Volgende onderwerp Go down

  • 0

CategorieŽn open- en dichtklappen

Bericht van 10spetter10 op di 5 jan 2016 - 20:23

CategorieŽn open- en dichtklappen


Heb je ook zoveel categorieŽn staan en wil je er een paar dichtklappen? Momenteel dit enkel een optie bij invision, maar als je even deze tutorial volgt kan je het ook met je eigen phpBB2, phpBB3 of punBB forum!

Javascript


Om zo een categorie toggler te maken, gebruiken we een javascript. Dit script dien je op te slaan in het javascript code beheer:

Beheerderspaneel Modules html & javascript Javascript code beheer †

Code:
Titel: eigen keuze (vb: categorie klapluik)
Plaatsing: 'Op de index'
Code: zie hieronder

Om zo een categorie toggler te maken, gebruiken we een javascriptcode dat specifiek is voor je forumversie. Kopieer dus niet zomaar de eerste code die je tegenkomt!


  • phpBB2

    Code:
    $(function() {
     † $('.three-col td:not(:first,:last) .forumline:not(:first)').each(function(i) {
     †
     † † †var head = $(this).find('tr:first');
     † † †var forumrows = $(this).find('tr:not(:first)');
     †
     †head.find('th:last').append('<div id=\"bc' + i + '\" class=\"contract\"> † </div>');
     †forumrows.addClass('forum-rows c'+i);
     † });
     † initCategories();
    });
    $(document).on ("click", ".contract,.expand", function () {
     † var temp = $(this).attr('id').substr(1);
     † toggleCategory(temp);
    });

    // by invision.js
    function initCategories() {
     † var id;
     † cookies = document.cookie.split('; ');
     † for (var i = 0; i < cookies.length; i++) {
     † † †if (cookies[i].charAt(0) == '_') {
     † † † † cookie = cookies[i].split('=');
     † † † † if (cookie[1] == '1') {
     † † † † † †id = cookie[0].substring(1);
     † † † † † †if ($('.'+id).length >0) {
     † † † † † † † toggleCategory(id)
     † † † † † †}
     † † † † }
     † † †}
     † }
    }
    // by invision.js, modified by JScript
    function toggleCategory(id) {
     † var obj = document.getElementById(id);
     † var button = document.getElementById('b' + id);
     † if (obj) {
     † † †var toggle = obj.style.display == 'none';
     † † †obj.style.display = toggle ? '' : 'none';
     † } else {
     † † †var elems = document.getElementsByClassName(id);
     † † †for (var i = 0, len = elems.length; i < len; i++) {
     † † † † var toggle = elems[i].style.display == 'none';
     † † † † elems[i].style.display = toggle ? '' : 'none';
     † † †}
     † }
     † button.className = toggle ? 'contract' : 'expand';
     † my_setcookie('_' + id, toggle ? '' : '1', true);
     † return false
    }

  • phpBB3

    Code:
    $(function() {
     † var oCat = $('#main-content .forabg'),
     † † †oThis = null,
     † † †oTemp = null,
     † † †sEval = '';
     
     † sEval = "oThis.find('ul.topiclist:first dl.icon').append('<div onclick=\"toggleCategory(\'c' + i + '\');\" id=\"bc' + i + '\" class=\"contract\">   </div>');" +
     † † † † † †"oThis.find('ul.topiclist.forums').attr('id', 'c' + i);";

     † for (var i = 0, len = oCat.length; i < len; i++) {
     † † †oThis = $(oCat[i]);
     † † †eval(sEval);
     † }
     
     † initCategories();
    });
    // by invision.js
    function initCategories() {
     † var id;
     † cookies = document.cookie.split('; ');
     † for (var i = 0; i < cookies.length; i++) {
     † † †if (cookies[i].charAt(0) == '_') {
     † † † † cookie = cookies[i].split('=');
     † † † † if (cookie[1] == '1') {
     † † † † † †id = cookie[0].substring(1);
     † † † † † †if (document.getElementById(id)) {
     † † † † † † † toggleCategory(id)
     † † † † † †}
     † † † † }
     † † †}
     † }
    }
    // by invision.js, modified by JScript
    function toggleCategory(id) {
     † var obj = document.getElementById(id);
     † var button = document.getElementById('b' + id);
     † if (obj) {
     † † †var toggle = obj.style.display == 'none';
     † † †obj.style.display = toggle ? '' : 'none';
     † } else {
     † † †var elems = document.getElementsByClassName(id);
     † † †for (var i = 0, len = elems.length; i < len; i++) {
     † † † † var toggle = elems[i].style.display == 'none';
     † † † † elems[i].style.display = toggle ? '' : 'none';
     † † †}
     † }
     † button.className = toggle ? 'contract' : 'expand';
     † my_setcookie('_' + id, toggle ? '' : '1', true);
     † return false
    }

  • punBB

    Code:
    $(function() {
     † var oCat = $('#main-content .main-head'),
     † † †oThis = null,
     † † †oTemp = null,
     † † †sEval = '';
     
     † sEval = "oThis.find('h2').append('<div onclick=\"toggleCategory(\'c' + i + '\');\" id=\"bc' + i + '\" class=\"contract\">  &nbsp;</div>');" +
     † † † † † †"oThis.next().attr('id', 'c' + i);";

     † for (var i = 0, len = oCat.length; i < len; i++) {
     † † †oThis = $(oCat[i]);
     † † †eval(sEval);
     † }
     
     † initCategories();
    });
    // by invision.js
    function initCategories() {
     † var id;
     † cookies = document.cookie.split('; ');
     † for (var i = 0; i < cookies.length; i++) {
     † † †if (cookies[i].charAt(0) == '_') {
     † † † † cookie = cookies[i].split('=');
     † † † † if (cookie[1] == '1') {
     † † † † † †id = cookie[0].substring(1);
     † † † † † †if (document.getElementById(id)) {
     † † † † † † † toggleCategory(id)
     † † † † † †}
     † † † † }
     † † †}
     † }
    }
    // by invision.js, modified by JScript
    function toggleCategory(id) {
     † var obj = document.getElementById(id);
     † var button = document.getElementById('b' + id);
     † if (obj) {
     † † †var toggle = obj.style.display == 'none';
     † † †obj.style.display = toggle ? '' : 'none';
     † } else {
     † † †var elems = document.getElementsByClassName(id);
     † † †for (var i = 0, len = elems.length; i < len; i++) {
     † † † † var toggle = elems[i].style.display == 'none';
     † † † † elems[i].style.display = toggle ? '' : 'none';
     † † †}
     † }
     † button.className = toggle ? 'contract' : 'expand';
     † my_setcookie('_' + id, toggle ? '' : '1', true);
     † return false
    }



CSS


Tot slot nog de opmaak van de open-/dichtknoppen. Deze wordt gestyled door middel van css.

Beheerderspaneel Display Plaatjes en kleuren Kleuren Cascading style sheet

Ik heb hieronder drie versies gemaakt waar je zelf eentje uit kan kiezen. Het is natuurlijk mogelijk om een eigen opmaak te creŽren.


  1. Versie1



    Code:
    .contract, .expand {
     †background: url("http://illiweb.com/fa/invision/exp_minus.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
     †cursor: pointer;
     †float: right;
    }
    .expand {
     †background: url("http://illiweb.com/fa/invision/exp_plus.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
    }

  2. Versie2



    Code:
    .contract, .expand {
     †background: url("http://illiweb.com/fa/m/tabs_less2.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
     †cursor: pointer;
     †float: right;
     †margin-top: -3px;
     †width: 20px;
     †height: 20px;
    }
    .expand {
     †background: url("http://illiweb.com/fa/m/tabs_more2.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
    }

  3. Versie3



    Code:
    .contract, .expand {
     †background: url("http://i.imgur.com/GyZCHY1.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
     †cursor: pointer;
     †float: right;
     †margin-top: 0px;
     †width: 16px;
     †height: 16px;
    }
    .expand {
     †background: url("http://i.imgur.com/UTNqTlZ.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
    }





Je mag me altijd een pm sturen wanneer ik iets vergeet af te werken, ook ik ben maar een mens!


Veel Voorkomende Problemen | Forum Tools | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | TIP! Vul je browser, forumversie, forum url en of je gebruikt maakt van templates †en/of CSS in op je profiel! Zo kunnen wij je nog beter helpen!

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1298
Leeftijd : 19
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