How to get Category Toggle working on PHPBB3?

First topic message reminder :

Hi dear Forumotioners,

I'm working on an upgrade to PHPBB3 for our official PBPBB2 forum, so I made a testforum for it which you can find Here !

I've added the Category Toggle from this tutorial: https://help.forumotion.com/t102749-category-toggle-all-forums#668821

But it doesn't work, the pictures don't show up and nothing happens as you can see there..
Does anyone have an idea how to get this in working order?

Thanks for your time in advance
Kind Regards,
Tonny Kamper

APE wrote:Just an update on test done by me.

Turned off templates 
Turned off CSS files 
Turned off Widgets 
Turned off JavaScripts 

Installed the full forum on my test forum and did not have a problem with it so I am really lost on to why this will not show up on the forum.

Although the problem is not solved I am very grateful for your help and your time @APE it's much appreciated, thank you very much
I hope eventually someone comes along who might have a clou how to fix this..

Kind regards,
Tonny Kamper.

You are so welcome just sorry i could not work out why it's not working..

and yes my wife is ok she just had to stay in hospital over night she is having my baby and she had braxton hicks but really bad so they wanted to keep an eye on her but she is fine now and is telling me to get to bed lol so this Monkey is off to bed now Night night

APE wrote:You are so welcome just sorry i could not work out why it's not working..

and yes my wife is ok she just had to stay in hospital over night she is having my baby and she had braxton hicks but really bad so they wanted to keep an eye on her but she is fine now and is telling me to get to bed lol so this Monkey is off to bed now Night night

Oooh then you have to be nice to her @APE and do what she wants thanks again and good night

I know you do not what to hear this, but remove all the things you have added and start again.

SLGray wrote:I know you do not what to hear this, but remove all the things you have added and start again.

Thank you @SLGray every idea is welcome by me, do you mean start over fresh with a standard skin from Hitskin, default templates and remove all javascripts first?

The strange thing is I have an older phpbb3 testsite and the category toggler isn't working on that one too, so I'm beginning to wonder if it could be related to the Dutch boardlanguage I have, because APE took all my css, js and templates into his testforum and everything worked fine overthere..

Kind regards,
Tonny Kamper.

Yes, I mean start from scratch.

after having a good sleep and Christmas shopping with the wife I am now thinking the same thing as you TonnyKamper BUT the thing is the CSS and the Templates are all in English no matter what language you set your forum.

Maybe install a basic skin with No CSS or Templates then install the javascript just for the toggle and see if it comes back then one by one install the rest of the stuff you want on your forum.

Tell you the truth I'm really stumped on this one my head hurts

SLGRAY wrote:Yes, I mean start from scratch.

Okay, thank you @SLGray I'll give that a try

APE wrote:after having a good sleep and Christmas shopping with the wife I am now thinking the same thing as you TonnyKamper BUT the thing is the CSS and the Templates are all in English no matter what language you set your forum.

Maybe install a basic skin with No CSS or Templates then install the javascript just for the toggle and see if it comes back then one by one install the rest of the stuff you want on your forum.

Tell you the truth I'm really stumped on this one my head hurts

Thank you @APE I am as much stumped as you are on this.. maybe it's a dumb question but how do I become just a basic skin?
Would it suffice to force the default templates, take out all the css and the javascripts and then start over? Or do I need to go to hitskin and install a fresh prosilver standard skin from there?

Kind regards,
Tonny Kamper

Is the name of the theme you are using something like Waves of Stars?  I seems to remember that I tried the theme once and had trouble with this tutorial.

SLGray wrote:Is the name of the theme you are using something like Waves of Stars?  I seems to remember that I tried the theme once and had trouble with this tutorial.

Yes it is based on that @SLGray but I only used the images from it, the skin itself was installed originally on my official forum, last year I installed a new skin on there but used the same images, so the forum would still be recognizable for our members and that's what I did now too, I used the same images and the css for the header background in a slightly adjusted form.. my testforum used to be a phpbb2 version, so I turned it to a phpbb3 version in the ACP and choose to keep the standard skin that came with the change.. and from there put all the images and JS's back in..
Was that the proper way to do the conversion you think? Or should it be done through Hitskin?

Kind regards,
Tonny Kamper

It is best to exactly install a phpBB 3 theme from Hitskin then modify it.

SLGray wrote:It is best to exactly install a phpBB 3 theme from Hitskin then modify it.

Okay thank you for your advice @SLGray I will backup everything, take it out and then go to Hitskin to install a theme from there and then as first step install the toggle javascript to see if it will work that way and then build everything up again..
I will report the result of this back here when I'm done..

Kind regards,
Tonny Kamper

Okay @APE and @SLGRAY here is the result, I did exactly what you adviced me to do, I took out everything deleted the template edits and started from scratch again, went to hit skin and installed a skin from there then right after that installed the category toggle script to no avail, I tried 3 different skins, repeated the same steps, but the script just won't work on my end, every other script I have works just fine and I have quite a few made by Ange, they all work excellent except for this script..

When I look at the selectors for phpbb3 in the script then I see a difference between those and the ones I can find on my forum when I click Inspect element, so I even tried to put those in the script but again to no avail, so I really don't know what else I can do to get this to work...
Have you any idea ?

Kind regards,
Tonny Kamper

Did you try the one you tried first?

Hello,
What is your forum link?

SLGray wrote:Did you try the one you tried first?

Yes I did @SLGray after that I tried a skin made by Ange himself, thinking that might help, but it made no difference, I kept the third one, because I lost the energy to search for the first one again seeing it made no diffence at all..

Van-Helsing wrote:Hello,
What is your forum link?

Thank you for asking @Van-Helsing , SLGray already mentioned it, it's http://leroy.actieforum.com/

Kind regards

Hi,
Can you install the below javascript code:

Code:

        /**************************************************************************
        Category Toggle
        ***************************************************************************/
       
                 
                 
                 
                /***
                * 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() {
                  if (_userdata.page_desktop) return;
                  ("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("https://i.servimg.com/u/f35/13/25/37/43/mine10.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);' +
                      '  cursor: pointer;' +
                      '  float: right;' +
        '  padding-right: 55px;' +
        '  padding-top: 10px;' +
        '  padding-bottom: 19px;' +
                      '  margin-top: -35px;' +
                      '}' +
                      '.expand {' +
                      '  background: url("https://i.servimg.com/u/f35/13/25/37/43/add10.png") 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
                */
       

It is a universal code, please install it to check if it is needing any corrections.

Van-Helsing wrote:Hi,
Can you install the below javascript code:

Code:

        /**************************************************************************
        Category Toggle
        ***************************************************************************/
       
                 
                 
                 
                /***
                * 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() {
                  if (_userdata.page_desktop) return;
                  ("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("https://i.servimg.com/u/f35/13/25/37/43/mine10.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);' +
                      '  cursor: pointer;' +
                      '  float: right;' +
        '  padding-right: 55px;' +
        '  padding-top: 10px;' +
        '  padding-bottom: 19px;' +
                      '  margin-top: -35px;' +
                      '}' +
                      '.expand {' +
                      '  background: url("https://i.servimg.com/u/f35/13/25/37/43/add10.png") 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
                */
       

It is a universal code, please install it to check if it is needing any corrections.

Thank you very much @Van-Helsing I installed it but it doesn't work.. I believe if I'm not mistaken that it's the same script I already had installed, but I have installed your code now and the toggle still isn't showing up

Kind regards,
Tonny Kamper

Have you set the placement of this javascript in home page and subforums? I can't locate it from my js console.

Van-Helsing wrote:Have you set the placement of this javascript in home page and subforums? I can't locate it from my js console.

It was set to Indexpage only @Van-Helsing but now I added the subforums to it, but it still isn't working..

Try to replace the javascript with the below javascript and set the placement only in the homepage

Code:

       
        $(function() {
          var style = document.createElement("style"),
              oCat = $('#main-content .forabg'),
              oThis = null;
       
          style.type = "text/css";
          style.innerHTML =
              'div.forabg .contract, div.forabg .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;' +
              '}' +
              'div.forabg .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);
       
          for (var i = 0, len = oCat.length; i < len; i++) {
              oThis = $(oCat[i]);
              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);
          }
        });
        // 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
        function toggleCategory(id) {
          var obj = document.getElementById(id);
          var button = document.getElementById('b' + id);
          var toggle = obj.style.display == 'none';
          obj.style.display = toggle ? '' : 'none';
          button.className = toggle ? 'contract' : 'expand';
          my_setcookie('_' + id, toggle ? '' : '1', true);
          return false
        }
        initCategories();

Van-Helsing wrote:Try to replace the javascript with the below javascript and set the placement only in the homepage

Code:

       
        $(function() {
          var style = document.createElement("style"),
              oCat = $('#main-content .forabg'),
              oThis = null;
       
          style.type = "text/css";
          style.innerHTML =
              'div.forabg .contract, div.forabg .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;' +
              '}' +
              'div.forabg .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);
       
          for (var i = 0, len = oCat.length; i < len; i++) {
              oThis = $(oCat[i]);
              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);
          }
        });
        // 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
        function toggleCategory(id) {
          var obj = document.getElementById(id);
          var button = document.getElementById('b' + id);
          var toggle = obj.style.display == 'none';
          obj.style.display = toggle ? '' : 'none';
          button.className = toggle ? 'contract' : 'expand';
          my_setcookie('_' + id, toggle ? '' : '1', true);
          return false
        }
        initCategories();

WOW that did the trick @Van-Helsing you're a genius !! Is there any chance to place the pictures a little bit lower and a little bit to the left, because they are sharp in the corners now?

Kind regards

Yes sure,

Replace you javascript with the below:

Code:

             
                $(function() {
                  var style = document.createElement("style"),
                      oCat = $('#main-content .forabg'),
                      oThis = null;
             
                  style.type = "text/css";
                  style.innerHTML =
                      'div.forabg .contract, div.forabg .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: 5px;' +
                      '  margin-right: 5px;' +
                      '}' +
                      'div.forabg .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);
             
                  for (var i = 0, len = oCat.length; i < len; i++) {
                      oThis = $(oCat[i]);
                      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);
                  }
                });
                // 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
                function toggleCategory(id) {
                  var obj = document.getElementById(id);
                  var button = document.getElementById('b' + id);
                  var toggle = obj.style.display == 'none';
                  obj.style.display = toggle ? '' : 'none';
                  button.className = toggle ? 'contract' : 'expand';
                  my_setcookie('_' + id, toggle ? '' : '1', true);
                  return false
                }
                initCategories();

@TonnyKamper Code updated! I was forgot to move it a little bit left replace it with the above code again. Sorry.

@Ape I was found a little bit different code in my archive in my dropbox.

Van-Helsing wrote:Yes sure,

Replace you javascript with the below:

Code:

             
                $(function() {
                  var style = document.createElement("style"),
                      oCat = $('#main-content .forabg'),
                      oThis = null;
             
                  style.type = "text/css";
                  style.innerHTML =
                      'div.forabg .contract, div.forabg .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: 5px;' +
                      '}' +
                      'div.forabg .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);
             
                  for (var i = 0, len = oCat.length; i < len; i++) {
                      oThis = $(oCat[i]);
                      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);
                  }
                });
                // 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
                function toggleCategory(id) {
                  var obj = document.getElementById(id);
                  var button = document.getElementById('b' + id);
                  var toggle = obj.style.display == 'none';
                  obj.style.display = toggle ? '' : 'none';
                  button.className = toggle ? 'contract' : 'expand';
                  my_setcookie('_' + id, toggle ? '' : '1', true);
                  return false
                }
                initCategories();

You're a lifesaver @Van-Helsing it's picture perfect Thank you so much, I'm so grateful also to @SLGray and @APE for all their assistence

Kind regards,
Tonny Kamper

can i ask what you changed to make it work @Van-Helsing ?

Is it absolutely solved?

Van-Helsing wrote:Is it absolutely solved?

Yes I am completely satisfied, thank you very much

You are welcome.

Thanks for letting us know and for your help @Van-Helsing and your welcome @TonnyKamper

So glad you got this fixed in the end.

Happy Holidays to you Both.

Problem solved & topic archived. Please read our forum rules: ESF General Rules