Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Javascript] toggle Category (Hide/Show)



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Shadow

avatar
Administrator
Administrator


Tutorial: toggle Category (Hide/Show)

This code will allow you to hide/show categories on all forum versions with cookies.

Created by @JScript


--> Tutorials, tips and tricks <--
toggle Category (Hide/Show)



- Javascript
Placement In home page
Code:
[panda=js]
    /***
    * 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() {
      var Autor = "JScript <jscriptbrasil at live dot com>, based on Invision.js";
          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;">  </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">  </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;</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
    }


- Preview






© PunBB Design


If you have any questions related to this topic create a topic with the following title:
toggle Category (Hide/Show)

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

2
Offline

  Andrei34

avatar
Punbb Rookie
Punbb Rookie
very good tuto thx

Powered by PunBB
Currently 0 users have thanked Andrei34 for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

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