The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Category Toggle (All Forums)

View previous topic View next topic Go down

Category Toggle (All Forums)

Post by MrMario on January 7th 2012, 11:27 pm

Category Toggle
Many people have asked how they can have the categories toggle on/off like they do on this support board.
This tutorial shows you how to add the category toggle on All boards.
Invision boards already a built-in category toggle, so this tutorial is not needed on Invision boards.

To install the category toggle, go to Admin Panel -> Modules -> JavaScript Codes Management -> Make Sure it's On! -> Create new -> Select

Placment:
In the homepage
Title it "Category Toggle"
Paste the following code:

Code:

/***
 * Application: toggle Category
 * Description: Show/hide categories!
 * Version: 0.02632015-jq1.9.1
 *         RC1 (Release candidate 1!) - Invision
 * Author: JScript - 2015/03/26 - based on Invision.js
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 */
$(function() {
   ("JScript <jscriptbrasil at live dot com>, based on Invision.js");
   var style = document.createElement("style"),
      /* Versions:|phpBB2----------------------------------------| |phpBB3-------------|    |PunBB-----------------|   |Invision already have it!| */
      oCat = $('#content-container .three-col td:eq(1) .forumline, #main-content .forabg, #main-content .main-head'),
      oThis = null,
      oTemp = null,
      sEval = '';

   style.type = "text/css";
   style.innerHTML =
      '.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;' +
      ' margin-top: 3px;' +
      '}' +
      '.expand {' +
      ' background: url("http://illiweb.com/fa/invision/exp_plus.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);' +
      '}';
   document.getElementsByTagName("head")[0].appendChild(style);

   switch (oCat[0].className) {
      case 'forumline': //phpBB2
         sEval = "oTemp = oThis.find('tr').first();oTemp.addClass('title-bar');" +
            "oTemp.find('th:last').append('<div onclick="toggleCategory(\\'c' + i + '\\');" id="bc' + i + '" class="contract" style="margin-top: -15px;">&nbsp;&nbsp;&nbsp;</div>');" +
            "oThis.find('tr').not('.title-bar').addClass('c' + i);";
         break;
      case 'forabg': //phpBB3
         sEval = "oThis.find('ul.topiclist:first dl.icon').append('<div onclick="toggleCategory(\\'c' + i + '\\');" id="bc' + i + '" class="contract">&nbsp;&nbsp;&nbsp;</div>');" +
            "oThis.find('ul.topiclist.forums').attr('id', 'c' + i);";
         break;
      case 'main-head': //PunBB
         sEval = "oThis.find('h2').append('<div onclick="toggleCategory(\\'c' + i + '\\');" id="bc' + i + '" class="contract">&nbsp;&nbsp;&nbsp;</div>');" +
            "oThis.next().attr('id', 'c' + i);";
         break;
   }
   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
}

/*
▲ -> contract
▼ -> expand
*/

Note: No need for any CSS as this is already saved in the JavaScript Code
To make a change to the placements and Icons please find the following part of the code

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;' +
  ' margin-top: 3px;' +
  '}' +
  '.expand {' +
  ' background: url("http://illiweb.com/fa/invision/exp_plus.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);' +
  '}';

Result:
Expand->


Contract ->



Last edited by APE on January 17th 2017, 2:36 am; edited 6 times in total (Reason for editing : Code Change as old Codes was messing about and messed up toolbar)
avatar
MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1836
Language : test

http://test.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum