The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Categories hide/show

5 posters

Go down

Solved Categories hide/show

Post by Tonight Sun Mar 15, 2015 7:46 pm

PunBB:
Code:
$(function(){$('.main-head:has(.page-title)').prepend('<a class="collapse tcatCollapse" id="collapse_c_cat1" href="#top" style="visibility:hidden;float: right;margin-top: -3px;"><img src="http://i.imgur.com/d7jXnmJ.png" alt=""></a>');$('.main-head:has(.page-title)').mouseover(function(){$(this).find('a.collapse[id]').css('visibility','visible')});$('.main-head:has(.page-title)').mouseout(function(){$(this).find('a.collapse[id]').css('visibility','hidden')});$('.main-head a.collapse[id]').click(function(e){e.preventDefault()});$('.main-head a.collapse[id]').attr('onclick'," if($(this).closest('.main-head').next('.main-content:first').css('display')=='none') {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','0',10,0); $(this).closest('.main-head').next('.main-content:first').slideDown(500);$(this).find('img').attr('src','data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASBAMAAACk4JNkAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKlBMVEX///8dNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlJSZn16ip3k6/JkLhjLAAAACnRSTlMACkVWWZerzdXxurlICgAAAF5JREFUCNdjYGAQDp9ZasgABExZq1atWqYAZHmsAoEWoFAXmLVCgUFsFQQkMlhBWYsZoqCspQxVUNZyhlmrVt29e2fVqpUg1pkzp0EshCxCB8IUhMkI2xAuQHIVzKUAh8ZUIpv14jgAAAAASUVORK5CYII=');$(this).closest('.main-head');$(this).closest('.main-head').removeClass('collapsed')} else {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','1',10,0); $(this).closest('.main-head').next('.main-content:first').slideUp(500);$(this).find('img').attr('src','http://i78.servimg.com/u/f78/18/17/62/92/cat_ma10.png'); $(this).closest('.main-head').addClass('collapsed');}");$(document).ready(function(){$('.main-head a.collapse[id]').closest('.main-head').each(function(){if(my_getcookie($(this).find('.page-title').text()+'_ct')=='1'){$(this).next('.main-content:first').css('display','none');$(this).find('a.collapse[id] img').attr('src','http://i78.servimg.com/u/f78/18/17/62/92/cat_ma10.png');$(this).closest('.main-head').addClass('collapsed')}else{$(this).next('.main-content:first').css('display','block');$(this).find('a.collapse[id] img').attr('src','data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASBAMAAACk4JNkAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKlBMVEX///8dNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlIdNlJSZn16ip3k6/JkLhjLAAAACnRSTlMACkVWWZerzdXxurlICgAAAF5JREFUCNdjYGAQDp9ZasgABExZq1atWqYAZHmsAoEWoFAXmLVCgUFsFQQkMlhBWYsZoqCspQxVUNZyhlmrVt29e2fVqpUg1pkzp0EshCxCB8IUhMkI2xAuQHIVzKUAh8ZUIpv14jgAAAAASUVORK5CYII=');$(this).closest('.main-head').removeClass('collapsed')}})})});

I want to change this JScript code so that it would work with phpBB3.
I guess I have to change .main-content:first -> .forabg:first, but what else? Smile


Last edited by Tonight on Fri Mar 27, 2015 5:56 pm; edited 1 time in total
Tonight
Tonight
Forumember

Male Posts : 312
Reputation : 80
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

Solved Re: Categories hide/show

Post by _Twisted_Mods_ Mon Mar 16, 2015 1:32 pm

_Twisted_Mods_
_Twisted_Mods_
Helper
Helper

Male Posts : 2108
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Categories hide/show

Post by Tonight Mon Mar 16, 2015 2:34 pm

Yes, but it has a cookie problem. It doesn't save user's preference.

// And also, that tutorial's script conflicts with one of my important JS, so I can't use that. :/
Tonight
Tonight
Forumember

Male Posts : 312
Reputation : 80
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

Solved Re: Categories hide/show

Post by Tonight Tue Mar 17, 2015 3:23 pm

Bump.

@JScript?
Tonight
Tonight
Forumember

Male Posts : 312
Reputation : 80
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

Solved Re: Categories hide/show

Post by JScript Wed Mar 18, 2015 10:43 am

@Tonight
I'm very happy that you have ability to change the codes according to your need!

I've done one, but there is "a great code" of Invision version entitled invision.js in which content is one below:
Code:

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)
                }
            }
        }
    }
}
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
}
function togglePopUpMenu(id) {
    var popUpMenu = document.getElementById(id);
    if (popUpMenu.style.display == 'none') {
        popUpMenu.style.display = '';
        if (openedPopUp) {
            document.getElementById(openedPopUp).style.display = 'none'
        }
        openedPopUp = id
    } else {
        popUpMenu.style.display = 'none';
        openedPopUp = false
    }
    return false
}
function toggleDiv(id) {
    var obj = document.getElementById(id);
    obj.style.display = obj.style.display == 'none' ? '' : 'none'
}
function togglePoll() {
    if (document.getElementById('poll_on') && document.getElementById('poll_off')) {
        toggleDiv('poll_on');
        toggleDiv('poll_off')
    }
    return false
}
function getElementsByClassName(className, tag) {
    var elements = document.getElementsByTagName(tag);
    var returnElements = [
    ];
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].className == className) {
            returnElements.push(elements[i])
        }
    }
    return returnElements
}
function initProfilePopUps() {
    if (window.jQuery) {
        divs = $('div.postprofile-head, div.post-header');
        $.each(divs, function (key, htmlElement) {
            if (htmlElement.style) {
                htmlElement.style.position = 'relative'
            }
        })
    } else {
        divs = getElementsByClassName('postprofile-head post-header', 'div');
        for (var i = 0; i < divs.length; i++) {
            if (divs[i].style) {
                divs[i].style.position = 'relative'
            }
        }
    }
}
var openedPopUp = false;
initSetFunction(initCategories);
initSetFunction(togglePoll);
initSetFunction(initProfilePopUps);

Note the structure of it and modify "according to the selectors" on your version, it is quite easy, but if you can not, I'll post the same code with the changes already made ok?

The important thing is that you also learn!

So long,

JS
JScript
JScript
Forumember

Male Posts : 741
Reputation : 175
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: Categories hide/show

Post by Tonight Thu Mar 19, 2015 11:34 am

I'm not sure about Invision classnames, don't have a test site for testing that. :/ I'm using phpBB3.
Tonight
Tonight
Forumember

Male Posts : 312
Reputation : 80
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

Solved Re: Categories hide/show

Post by JScript Thu Mar 26, 2015 11:03 am

@Tonight
Ok, no problem!

Here is the code for phpBB3, placement only "In the home page":
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();

Result:
Expand->
Categories hide/show YBzX0os

Contract ->
Categories hide/show AeF0s4F

Edit:

Below is a code for all versions, except the Invision because it already has this system:
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() {
   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;\">&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
}

So long,

JS


Last edited by JScript on Thu Mar 26, 2015 5:10 pm; edited 1 time in total (Reason for editing : Added a code for all versions!)
JScript
JScript
Forumember

Male Posts : 741
Reputation : 175
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: Categories hide/show

Post by Tonight Fri Mar 27, 2015 5:54 pm

Thank you, script works great. Solved.
Tonight
Tonight
Forumember

Male Posts : 312
Reputation : 80
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

Solved Re: Categories hide/show

Post by JScript Fri Mar 27, 2015 7:40 pm

@Tonight
Hello, I'm glad it worked out!

It would be nice if my code was accepted for a tutorial, since it works in all versions, including phpBB2!

JS
JScript
JScript
Forumember

Male Posts : 741
Reputation : 175
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: Categories hide/show

Post by niquon715 Tue Mar 31, 2015 2:15 am

for whatever reason this tutorial doesnt work on my forum the old tutorial causes my toolbar to dissapear and the buttons don't show up on this one http://prntscr.com/6nld7x
niquon715
niquon715
Forumember

Posts : 83
Reputation : 10
Language : english

http://celestialfireacademy.forumotion.com/forum

Back to top Go down

Solved Re: Categories hide/show

Post by JScript Tue Mar 31, 2015 6:45 am

@niquon715

Observe the CSS of my code:
Categories hide/show XH4jjIb

And see the difference in your CSS forum:
Categories hide/show VQGkJMT

If you have not edited my code, then the CSS of your forum already had what I scored on the image above!

Well, regardless of what was done, to fix this just add the following CSS:
Code:

.contract, .expand {
  position: relative !important;
}

Result:
Categories hide/show 9cA7oGT

JS
JScript
JScript
Forumember

Male Posts : 741
Reputation : 175
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: Categories hide/show

Post by niquon715 Wed Apr 01, 2015 2:18 am

my fault i left the css from another show/hide tutorial i used in there
niquon715
niquon715
Forumember

Posts : 83
Reputation : 10
Language : english

http://celestialfireacademy.forumotion.com/forum

Back to top Go down

Solved Re: Categories hide/show

Post by JScript Wed Apr 01, 2015 4:51 am

niquon715 wrote:my fault i left the css from another show/hide tutorial i used in there
This is one of the reasons why I add the CSS in JavaScript code!

I'll give you three main reasons:
1- There can never be this mistake you made;
2- You will never have trouble adding the CSS;
3- The tutorials are more practical and easy because you do not need to manually add the CSS.

JS
JScript
JScript
Forumember

Male Posts : 741
Reputation : 175
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: Categories hide/show

Post by Ange Tuteur Mon Apr 13, 2015 12:41 am

Topic archived

Thanks for opening a new topic for your own problems.. Wink
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

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