Categories hide/show
5 posters
Page 1 of 1
Categories hide/show
PunBB:
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?
- 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?
Last edited by Tonight on March 27th 2015, 11:56 pm; edited 1 time in total
Tonight- Forumember
- Posts : 312
Reputation : 80
Language : Estonian, English, Russian
Location : Estonia
Re: Categories hide/show
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.
// And also, that tutorial's script conflicts with one of my important JS, so I can't use that.
Tonight- Forumember
- Posts : 312
Reputation : 80
Language : Estonian, English, Russian
Location : Estonia
Tonight- Forumember
- Posts : 312
Reputation : 80
Language : Estonian, English, Russian
Location : Estonia
Re: Categories hide/show
@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:
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
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
Re: Categories hide/show
I'm not sure about Invision classnames, don't have a test site for testing that. I'm using phpBB3.
Tonight- Forumember
- Posts : 312
Reputation : 80
Language : Estonian, English, Russian
Location : Estonia
Re: Categories hide/show
@Tonight
Ok, no problem!
Here is the code for phpBB3, placement only "In the home page":
Result:
Expand->
Contract ->
Edit:
Below is a code for all versions, except the Invision because it already has this system:
So long,
JS
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"> </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->
Contract ->
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;\"> </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\"> </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 March 26th 2015, 11:10 pm; edited 1 time in total (Reason for editing : Added a code for all versions!)
Re: Categories hide/show
Thank you, script works great. Solved.
Tonight- Forumember
- Posts : 312
Reputation : 80
Language : Estonian, English, Russian
Location : Estonia
Re: Categories hide/show
@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
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
Re: Categories hide/show
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
Re: Categories hide/show
@niquon715
Observe the CSS of my code:
And see the difference in your CSS forum:
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:
Result:
JS
Observe the CSS of my code:
And see the difference in your CSS forum:
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:
JS
Re: Categories hide/show
This is one of the reasons why I add the CSS in JavaScript code!niquon715 wrote:my fault i left the css from another show/hide tutorial i used in there
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
Similar topics
» How can I hide forum categories from guests like this?
» How to show/hide who is online?
» How to show the forums and Categories in the portal
» hide and show password
» Transition on show/hide JQ
» How to show/hide who is online?
» How to show the forums and Categories in the portal
» hide and show password
» Transition on show/hide JQ
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum