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

Board Index » Forumotion » Tutorials  »  [OLD] Tutorials & Codes »[Javascript] toggle Category (Hide/Show)

Foto

[Javascript] toggle Category (Hide/Show)

by ,


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

1
Offline

  Shadow

Shadow
Administrator
Administrator
2015-03-27, 12:24

[Javascript] toggle Category (Hide/Show) Alerte10
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)



1º - 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://2img.net/i/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://2img.net/i/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
    }


2º - Preview
[Javascript] toggle Category (Hide/Show) L3B8pyn
[Javascript] toggle Category (Hide/Show) CrYM1zf



© PunBB Design


[Javascript] toggle Category (Hide/Show) Act_bottom 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

Andrei34
Punbb Rookie
Punbb Rookie
2016-05-19, 16:29
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

 

About PunBB Design

PunBB Design (ex. PunBB Community) Forum is Forumotion hosted forum created 2012 as a test forum for helping out members and improving design and quality of the Forumotion forums. Over the time it became bigger and bigger in term of content, members and activity. That's why several times Forumotion offered us a free domain name for our community (www.punbb.biz). Today we want to back it's old activity and make it even better! In 2013 PunBB Design is awarded for best Forumotion forum.

General Links

Forum Resources

Forumotion Links

BtT
  • This skin is designed by Shadow for PunBB Design™.