General Support2 rhalevy Aug 18, 2005 22:55
b2evolution CMS Support Forums- b2evolution Support
- Plugins & Extensions
- [HACK] - make categories expand and contract
1 rhalevy Jul 28, 2005 18:34
3 edb Aug 18, 2005 23:50
Cool! A long time ago someone else made up a similar hack that seemed a lot more complicated than what you are doing. Got link where we can see this in action? I think back in the older version there were problems with either subcats or empty cats - I forget which. The solution, worked out mostly by Isaac, involved using the "dirty trick" of remembering the blog number and then temporarily faking it. Since you're successful without that trick I'd love to see it in action.
4 rhalevy Aug 19, 2005 15:26
I will try to setup a demo of this in action but right now im at work and they block access to my dedicated servers control panel. The installation i did this for is on my companies intranet so it wouldnt do to provide a link. The cool part about this hack is that it is autonomous all it does is convert ul tags that include a specific style class and have sub ul tags to expand and contract. This way you can in the recursive _categories.php handing in the skin folder you can set it to only give the main ul tags a expand and contract button.
If you know basic HTML and how to call CSS stylesheets than you can easily make this work
You can see it in action without B2evo on this page:
http://www.mattkruse.com/javascript/mktree/documentation.html
I just love how simple of a solution it is.
And for all the developers this is a free solution provided by mattkruse so maybe a simple integration into the next release would be nice. I love this feature now i can have a million subcategories without loosing precious sidebar real estate.
5 personman Aug 19, 2005 20:55
Rhalevy,
I posted this to the plugins repository:
http://plugins.b2evolution.net/index.php/2005/08/18/collapsible_categories
I didn't have a link for you, so if you me to add one, or change the wording of the description, then please let me know. I want you to get credit for this, including a link if you like. Good work.
Danny
6 edb Aug 19, 2005 21:50
I remember the hardship in the older hack now: the author of that hack wanted the bloglist to contain dropdown category links. That's why it was so hard - first getting the categories to drop down from the name of the blog then getting the categories for all the other blogs (since $blog was set and categories relate to a blog number).
Doing it at the category level (a) makes sense and (b) means a lot of hoop jumping isn't required. I think I'm going to do this to one of my installations and see how it feels.
7 re4med Aug 20, 2005 12:05
Okay...
I have a few questions:
1. Where do the image files go that you indicated need to be downloaded?
2. At line 20 or so do you replace anything before adding the code or do you insert the code above or below an existing line? If so, where exactly?
3. Do I need to make an addition to my skins CSS file? If so, what?
Sorry to sound ignorant...
Thanks for your help.
W. Hill
8 rhalevy Aug 22, 2005 15:24
re4med wrote:
Okay...
I have a few questions:
1. Where do the image files go that you indicated need to be downloaded?
2. At line 20 or so do you replace anything before adding the code or do you insert the code above or below an existing line? If so, where exactly?
3. Do I need to make an addition to my skins CSS file? If so, what?Sorry to sound ignorant...
Thanks for your help.
W. Hill
1) The image files need to go in the folder where you put the mktree.js and .css file
2) You can insert the code below or above it does not make a difference as long as it is below line 16 and before it includes the main _categories.php
3) You can add the styles in mktree.css to your skins css file or you can just do as i mentioned above and add an include of the css and js file in your skins _main.php file like this:
<SCRIPT SRC="mktree.js" LANGUAGE="JavaScript"></SCRIPT>
<LINK REL="stylesheet" HREF="mktree.css"> If you guys have any questions i would love to make this easier but i just havent had time to make a demonstration installation of this. I will do my best to have one tomorrow but no promises (dont have much free time at work)
my link address is www.viraldesigns.com but that website is in major need of repair and im looking into adding the template i created there as a B2evo skin.
All the best
9 telarus Aug 25, 2005 05:35
Tried this out, and it seems to work great on my sub-blogs, but it doesn't work at all in the main Blog1 (tracked this down to a difference in how the _categories.php file handles rendering categories on that blog, as it is supposed to list the categories for ALL blogs). Not sure how to fix it tho, or where to put any additional CLASS="mktree" in that file.
Any ideas?
10 rhalevy Aug 25, 2005 15:13
Just to understand so that i can help you. By your main blog1 do you mean the Blog Aggregator that aggregates all the blogs? is it that you want the blogs in the sidebar of the blog aggregator to expand and contract? be a bit more specific so i can help you out[/code]
11 telarus Aug 26, 2005 01:47
Hey, thanks for the reply so quick. ^_^
Yes, I do mean the Blog Aggregator that defaults to Blog 1.
The UL tags listed under each blog heading don't show the [+] or [-] gifs, and do not collapse. I would also be interested in code for the blog titles themselvs to have the same function, but those render wrapped in H5 tags (I think).
Thanks for the help.
-Telarus, KSC
12 rhalevy Aug 26, 2005 15:27
telarus wrote:
Hey, thanks for the reply so quick. ^_^
Yes, I do mean the Blog Aggregator that defaults to Blog 1.
The UL tags listed under each blog heading don't show the [+] or [-] gifs, and do not collapse. I would also be interested in code for the blog titles themselvs to have the same function, but those render wrapped in H5 tags (I think).Thanks for the help.
-Telarus, KSC
Glad to be able to help:
Your best option is to copy and paste another skin so that you have a copy of the skin you want to use. then you assign that skin to the blog aggregator.
then in the new skin folders _categories.php you remove the changes where you added the class tag to the <ul>.
and now you apply the hack in a new way:
see if these lines exist or add these lines to the skins _categories.php file:
if(!isset($cat_blog_start)) $cat_blog_start = '<li>';
if(!isset($cat_blog_end)) $cat_blog_end = '</li>';then scroll up to where it says
if(!isset($cat_main_start)) $cat_main_start = '';
if(!isset($cat_main_end)) $cat_main_end = '';
and change it to
if(!isset($cat_main_start)) $cat_main_start = '<ul CLASS="mktree" ID="topics">';
if(!isset($cat_main_end)) $cat_main_end = '</ul>';havent had a chance to test this out but it seems to work
hope that helps - tell me if it does not :lol:
13 telarus Aug 26, 2005 20:50
Ok, tried your suggestion [I can see why you need a copy of the skin ^_^], and after some tweaking around, came up with this:
_categories.php
# You can customize the following as you wish:
if(!isset($cat_all)) $cat_all = 'All'; // Set to empty to hide
# global category list delimiters:
if(!isset($cat_main_start)) $cat_main_start = '<ul CLASS="mktree" ID="topics">';
if(!isset($cat_main_end)) $cat_main_end = '</ul>';
# Category delimiters:
if(!isset($cat_line_start)) $cat_line_start = '<li>';
if(!isset($cat_line_end)) $cat_line_end = "</li>\n";
if(!isset($cat_line_checkbox)) $cat_line_checkbox = true;
# Category group delimiters:
if(!isset($cat_group_start)) $cat_group_start = '<ul CLASS="mktree">';
if(!isset($cat_group_end)) $cat_group_end = "</ul>\n";
# When multiple blogs are listed on same page:
if(!isset($cat_blog_start)) $cat_blog_start = '<li>';
if(!isset($cat_blog_end)) $cat_blog_end = "</li>\n";
Having the Class="mktree" only in the $cat_main_start didn't put bullets or [+] or[-] icons in the categories for each blog, just a bullet next to the blog name. I added CLASS="mktree" to the $cat_group_start and now everything has bullets, and the categories that have sub-cats collapse, but the blog titles don't, and I'm getting a really weird recursive error with the .gif files......Don't know if that makes sense, here's a screen cap:
14 piechdibi Aug 27, 2005 14:54
It's weird because I have a problem, but only under IE : apparently, it doesn't recognise the "list-style: none" code, so I have two bullets each time!
http://www.piechdibi.net/blog/site.gif
And of course, everything is fine with Firefox... What a pain in the ass this IE !
15 rhalevy Aug 29, 2005 15:46
your issue seems to be that you are calling the
CLASS="mktree"both in cat start and group start. the code only requires that you do it once so you can remove it from the second delimiter. if you do that it will remove the doubling up of the bullets
hope that helps
16 piechdibi Aug 29, 2005 16:09
hey !
sorry, but I don't have this problem...
here's my code from categories.php :
# Category delimiters: //RH
if(!isset($maincat_group_start)) $maincat_group_start = '<ul CLASS="mktree">';
if(!isset($maincat_group_end)) $maincat_group_end = '</ul>';
# You can customize the following as you wish:
if(!isset($cat_all)) $cat_all = 'All'; // Set to empty to hide
# global category list delimiters:
if(!isset($cat_main_start)) $cat_main_start = '';
if(!isset($cat_main_end)) $cat_main_end = '';
# Category delimiters:
if(!isset($cat_line_start)) $cat_line_start = '<li>';
if(!isset($cat_line_end)) $cat_line_end = '</li>';
if(!isset($cat_line_checkbox)) $cat_line_checkbox = false;
# Category group delimiters:
if(!isset($cat_group_start)) $cat_group_start = '<ul>';
if(!isset($cat_group_end)) $cat_group_end = '</ul>';
# When multiple blogs are listed on same page:
if(!isset($cat_blog_start)) $cat_blog_start = '<h4>';
if(!isset($cat_blog_end)) $cat_blog_end = '</h4>';now from mktree.css :
/* Turn off list bullets */
ul.mktree li { list-style: none; }
/* Control how "spaced out" the tree is */
ul.mktree, ul.mktree ul , ul.mktree li { margin-left:15px; }
/* Provide space for our own "bullet" inside the LI */
ul.mktree li .bullet { padding-left: 15px; }
/* Show "bullets" in the links, depending on the class of the LI that the link's in */
ul.mktree li.liOpen .bullet { cursor: pointer; background: url(minus.gif) center left no-repeat; }
ul.mktree li.liClosed .bullet { cursor: pointer; background: url(plus.gif) center left no-repeat; }
ul.mktree li.liBullet .bullet { cursor: default; background: url(bullet.gif) center left no-repeat; }
/* Sublists are visible or not based on class of parent LI */
ul.mktree li.liOpen ul { display: block; }
ul.mktree li.liClosed ul { display: none; }
/* Format menu items differently depending on what level of the tree they are in */
ul.mktree li { font-size: 1em; }
ul.mktree li ul li { padding-top: 1px; padding-bottom: 1px; padding-left: 0px; }
ul.mktree li ul li ul li { font-size: 8pt; }
ul.mktree li ul li ul li ul li { font-size: 6pt; }
}So it's pretty much exactly the same thing from the hack, that's why I don't understand the problem...
17 rhalevy Aug 29, 2005 16:39
that response before was for "telarus"
now this is how it looks on my files _categories.php looks like this
# You can customize the following as you wish:
if(!isset($cat_all)) $cat_all = 'All'; // Set to empty to hide
# global category list delimiters:
if(!isset($cat_main_start)) $cat_main_start = '';
if(!isset($cat_main_end)) $cat_main_end = '';
# Category delimiters:
if(!isset($cat_line_start)) $cat_line_start = '<li>';
if(!isset($cat_line_end)) $cat_line_end = '</li>';
if(!isset($cat_line_checkbox)) $cat_line_checkbox = true;
# Category delimiters: //RH
if(!isset($maincat_group_start)) $maincat_group_start = '<ul CLASS="mktree" ID="topics">';
if(!isset($maincat_group_end)) $maincat_group_end = '</ul>';
# Category group delimiters:
if(!isset($cat_group_start)) $cat_group_start = '<ul>';
if(!isset($cat_group_end)) $cat_group_end = '</ul>';
# When multiple blogs are listed on same page:
if(!isset($cat_blog_start)) $cat_blog_start = '<h4>';
if(!isset($cat_blog_end)) $cat_blog_end = '</h4>';and mktree.css looks like this
/* Put this inside a @media qualifier so Netscape 4 ignores it */
@media screen, print {
/* Turn off list bullets */
ul.mktree li { list-style: none; }
/* Control how "spaced out" the tree is */
ul.mktree, ul.mktree ul , ul.mktree li { margin-left:-10px; padding:0px; }
/* Provide space for our own "bullet" inside the LI */
ul.mktree li .bullet { padding-left: 10px; }
/* Show "bullets" in the links, depending on the class of the LI that the link's in */
ul.mktree li.liOpen .bullet { cursor: pointer; background: url(minus.gif) center left no-repeat; }
ul.mktree li.liClosed .bullet { cursor: pointer; background: url(plus.gif) center left no-repeat; }
ul.mktree li.liBullet .bullet { cursor: default; background: url(bullet.gif) center left no-repeat; }
/* Sublists are visible or not based on class of parent LI */
ul.mktree li.liOpen ul { display: block; }
ul.mktree li.liClosed ul { display: none; }
/* Format menu items differently depending on what level of the tree they are in */
/* ul.mktree li { font-size: 12pt; }
ul.mktree li ul li { font-size: 10pt; }
ul.mktree li ul li ul li { font-size: 8pt; }
ul.mktree li ul li ul li ul li { font-size: 6pt; }*/
}
Notice i commented out alot of the css file to remove features i didnt like in it. You also have to check that you changed the correct line in the main _categories.php in the skins folder to maincat_group_start
hope that helps "piechdibi"
18 piechdibi Aug 30, 2005 03:25
Oups, sorry, I first thought you were answering for both of us :roll:
Thanks for your quick answer!
Ok, I've double checked, and we both have the very same code in both mktree.css and _categories.php...
But I think I understand: It is probably because in my custom.css file, I already use images as bullet for my <ul> styles:
ul{
font-size: 0.8em;
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
list-style-image: url(../images/li_bullet.gif);
}
li {
margin-left: 40px;
}I tried removing
list-style-image: url(../images/li_bullet.gif);and it works fine
So now the question is: is there a way to "trick" IE to make it forgot this list-styl-image ? :p
Thank you very much,
Paul.
19 staypuft Aug 31, 2005 18:05
Post DELETED by StayPuft...
See [url=http://forums.b2evolution.net//viewtopic.php?p=25576#25576]The_Engineer's post[/url] below for (XHTML Valid) collapsable Blog Titles / Categories on the Aggregate Blog.
20 fraynelson Sep 06, 2005 13:33
I thank Mike and Rhalevy for this hack! :) Yet I've got a problem in Opera. In IE, it works fine, as expected:
http://fraynelson.com/banco_imagenes/i_explorer.jpg
But in Opera it messes all up:
http://fraynelson.com/banco_imagenes/opera.jpg
Any ideas?
21 the_engineer Sep 11, 2005 13:06
Ok, I liked what StayPuft came up with, but i wanted it to valid
so I started playing around and came up with this:
First this is to comment out the lines in your /skins/skin_name/_categories.php
So it look somewhat like this:
<?php
/*
* This is the template that displays (recursive) list of (sub)categories
*
* This file is not meant to be called directly.
* It is meant to be called by an include in the _main.php template.
*/
if(substr(basename($_SERVER['SCRIPT_FILENAME']),0,1)=='_')
die("Please, do not access this page directly.");
# You can customize the following as you wish:
#if(!isset($cat_all)) $cat_all = 'All'; // Set to empty to hide
# global category list delimiters:
#if(!isset($cat_main_start)) $cat_main_start = '';
#if(!isset($cat_main_end)) $cat_main_end = '';
# Category delimiters:
#if(!isset($cat_line_start)) $cat_line_start = '<li>';
#if(!isset($cat_line_end)) $cat_line_end = '</li>';
# Category group delimiters:
#if(!isset($cat_group_start)) $cat_group_start = '<ul>';
#if(!isset($cat_group_end)) $cat_group_end = '</ul>';
# When multiple blogs are listed on same page:
#if(!isset($cat_blog_start)) $cat_blog_start = '<h4>';
#if(!isset($cat_blog_end)) $cat_blog_end = '</h4>';
/*
* We now call the default categories handler...
* However you can replace this file with the full handler (in /blogs) and customize it!
*/
require get_path('skins').'/_categories.php';
?>
Then open up your /skins/_categories.php file
**** Warning: Back up your files first please ****
You will see what looks like this:
# You can customize the following as you wish:
if(!isset($cat_all)) $cat_all = /* TRANS: All categories, skin's categories list */ T_('All'); // Set to empty to hide
# global category list delimiters:
if(!isset($cat_main_start)) $cat_main_start = '';
if(!isset($cat_main_end)) $cat_main_end = '';
# Category delimiters:
if(!isset($cat_line_start)) $cat_line_start = '<li>';
if(!isset($cat_line_end)) $cat_line_end = '</li>';
if(!isset($cat_line_checkbox)) $cat_line_checkbox = true;
# Category group delimiters:
if(!isset($cat_group_start)) $cat_group_start = '<ul>';
if(!isset($cat_group_end)) $cat_group_end = '</ul>';
# When multiple blogs are listed on same page:
if(!isset($cat_blog_start)) $cat_blog_start = '<h4>';
if(!isset($cat_blog_end)) $cat_blog_end = '</h4>';
Remove that block and replace it with this:
if( $blog == 1 ) { // This is for Blog 1 only
# You can customize the following as you wish:
if(!isset($cat_all)) $cat_all = 'All'; // Set to empty to hide
# global category list delimiters:
if(!isset($cat_main_start)) $cat_main_start = '';
if(!isset($cat_main_end)) $cat_main_end = '';
# Category delimiters:
if(!isset($cat_line_start)) $cat_line_start = '<li>';
if(!isset($cat_line_end)) $cat_line_end = '</li>';
if(!isset($cat_line_checkbox)) $cat_line_checkbox = false;
# Category group delimiters:
if(!isset($cat_group_start)) $cat_group_start = '<ul>';
if(!isset($cat_group_end)) $cat_group_end = '</ul>';
# When multiple blogs are listed on same page:
if(!isset($cat_blog_start)) $cat_blog_start = '<ul class="mktree"><li>';
if(!isset($cat_blog_end)) $cat_blog_end = '</li></ul>';
}
else { // This is for all other Blogs
# You can customize the following as you wish:
if(!isset($cat_all)) $cat_all = 'All'; // Set to empty to hide
# global category list delimiters:
if(!isset($cat_main_start)) $cat_main_start = '';
if(!isset($cat_main_end)) $cat_main_end = '';
# Category delimiters:
if(!isset($cat_line_start)) $cat_line_start = '<li>';
if(!isset($cat_line_end)) $cat_line_end = '</li>';
if(!isset($cat_line_checkbox)) $cat_line_checkbox = false;
# Category group delimiters:
if(!isset($cat_group_start)) $cat_group_start = '<ul>';
if(!isset($cat_group_end)) $cat_group_end = '</ul>';
# When multiple blogs are listed on same page:
if(!isset($cat_blog_start)) $cat_blog_start = '';
if(!isset($cat_blog_end)) $cat_blog_end = '<br/>';
# Category delimiters: //RH
if(!isset($maincat_group_start)) $maincat_group_start = '<ul class="mktree">';
if(!isset($maincat_group_end)) $maincat_group_end = '</ul>';
} // End the hacking
Now scroll down almost to the bottom and you should see this block:
if( ($curr_blog_ID == 1) && empty( $cat_all ) ) continue; // Hide blog 1 if requested
echo $cat_blog_start;
?><a href="<?php blog_list_iteminfo('blogurl', 'raw') ?>"><?php blog_list_iteminfo('name', 'htmlbody') ?></a>
<?php
echo $cat_blog_end;
// run recursively through the cats
cat_children( $cache_categories, $curr_blog_ID, NULL, 'cat_list_before_first', 'cat_list_before_each', 'cat_list_after_each', 'cat_list_after_last', 1 );
}
}
// End global list:
Find
echo $cat_blog_end; and comment it out
so it looks like:
// echo $cat_blog_end;now 4 line down you see:
// run recursively through the cats
cat_children( $cache_categories, $curr_blog_ID, NULL, 'cat_list_before_first', 'cat_list_before_each', 'cat_list_after_each', 'cat_list_after_last', 1 );
}
Add
echo $cat_blog_end;so it looks like this:
// run recursively through the cats
cat_children( $cache_categories, $curr_blog_ID, NULL, 'cat_list_before_first', 'cat_list_before_each', 'cat_list_after_each', 'cat_list_after_last', 1 );
echo $cat_blog_end; //Moved here so expand/contract on Blog 1 works and is valid
}
And that should do it. Save the file and check it out.
This assumes you did the orignal hack and have the files uploaded.
If you want you could just replace the whole /skins/_categories.php file with this one:
<?php
/**
* This is the template that displays (recursive) list of (sub)categories
*
* This file is not meant to be called directly.
* It is meant to be called by an include in the _main.php template.
*
* b2evolution - {@link http://b2evolution.net/}
* Released under GNU GPL License - {@link http://b2evolution.net/about/license.html}
* @copyright (c)2003-2004 by Francois PLANQUE - {@link http://fplanque.net/}
*
* @package evoskins
*/
if( !defined('DB_USER') ) die( 'Please, do not access this page directly.' );
if( $blog == 1 ) { // This is for Blog 1 only
# You can customize the following as you wish:
if(!isset($cat_all)) $cat_all = 'All'; // Set to empty to hide
# global category list delimiters:
if(!isset($cat_main_start)) $cat_main_start = '';
if(!isset($cat_main_end)) $cat_main_end = '';
# Category delimiters:
if(!isset($cat_line_start)) $cat_line_start = '<li>';
if(!isset($cat_line_end)) $cat_line_end = '</li>';
if(!isset($cat_line_checkbox)) $cat_line_checkbox = false;
# Category group delimiters:
if(!isset($cat_group_start)) $cat_group_start = '<ul>';
if(!isset($cat_group_end)) $cat_group_end = '</ul>';
# When multiple blogs are listed on same page:
if(!isset($cat_blog_start)) $cat_blog_start = '<ul class="mktree"><li>';
if(!isset($cat_blog_end)) $cat_blog_end = '</li></ul>';
}
else { // This is for all other Blogs
# You can customize the following as you wish:
if(!isset($cat_all)) $cat_all = 'All'; // Set to empty to hide
# global category list delimiters:
if(!isset($cat_main_start)) $cat_main_start = '';
if(!isset($cat_main_end)) $cat_main_end = '';
# Category delimiters:
if(!isset($cat_line_start)) $cat_line_start = '<li>';
if(!isset($cat_line_end)) $cat_line_end = '</li>';
if(!isset($cat_line_checkbox)) $cat_line_checkbox = false;
# Category group delimiters:
if(!isset($cat_group_start)) $cat_group_start = '<ul>';
if(!isset($cat_group_end)) $cat_group_end = '</ul>';
# When multiple blogs are listed on same page:
if(!isset($cat_blog_start)) $cat_blog_start = '';
if(!isset($cat_blog_end)) $cat_blog_end = '<br/>';
# Category delimiters: //RH
if(!isset($maincat_group_start)) $maincat_group_start = '<ul class="mktree">';
if(!isset($maincat_group_end)) $maincat_group_end = '</ul>';
} // End the hacking
/*
* WARNING: the category list is displayed recursively.
* This is a little tricky. Don't modify below unless you really know what you're doing!
*/
// ----------------- START RECURSIVE CAT LIST ----------------
cat_query(); // make sure the caches are loaded
if( ! isset( $cat_array ) ) $cat_array = array();
/**
* callback to start sublist
*/
function cat_list_before_first( $parent_cat_ID, $level )
{ // callback to start sublist
global $cat_group_start;
if( $level > 0 ) echo "\n",$cat_group_start,"\n";
}
/**
* callback to display sublist element
*/
function cat_list_before_each( $cat_ID, $level )
{ // callback to display sublist element
global $blogfilename, $cat_array, $cat_line_start, $cat_line_checkbox;
$cat = get_the_category_by_ID( $cat_ID );
echo $cat_line_start;
if( $cat_line_checkbox )
{
echo '<label><input type="checkbox" name="catsel[]" value="'.$cat_ID.'"';
if( in_array( $cat_ID, $cat_array ) )
{ // This category is in the current selection
echo ' checked="checked"';
}
echo ' />';
}
echo '<a href="'.url_add_param( get_bloginfo('blogurl'), 'cat='.$cat_ID ).'">'.format_to_output($cat['cat_name'], 'htmlbody').'</a> <span class="dimmed">('.$cat['cat_postcount'].')</span>';
if( in_array( $cat_ID, $cat_array ) )
{ // This category is in the current selection
echo "*";
}
if( $cat_line_checkbox )
{
echo '</label>';
}
}
/**
* callback to display sublist element
*/
function cat_list_after_each( $cat_ID, $level )
{ // callback to display sublist element
global $cat_line_end;
echo $cat_line_end,"\n";
}
/**
* callback to end sublist
*/
function cat_list_after_last( $parent_cat_ID, $level )
{ // callback to end sublist
global $cat_group_end;
if( $level > 0 ) echo $cat_group_end,"\n";
}
// Start global list:
echo $cat_main_start;
if( $blog > 1 )
{ // We want to display cats for one blog
echo "\n",$maincat_group_start,"\n"; // Added (main) to the cat for blogs other than 1
if( !empty( $cat_all ) )
{ // We want to display a link to all cats:
echo $cat_line_start,"\n";
echo '<a href="',get_bloginfo('blogurl'),'">',$cat_all,'</a>';
echo $cat_line_end,"\n";
}
cat_children( $cache_categories, $blog, NULL, 'cat_list_before_first', 'cat_list_before_each', 'cat_list_after_each', 'cat_list_after_last', 0 );
echo "\n",$cat_group_end,"\n";
}
else
{ // We want to display cats for all blogs
for( $curr_blog_ID=blog_list_start('stub');
$curr_blog_ID!=false;
$curr_blog_ID=blog_list_next('stub') )
{ # by uncommenting the following lines you can hide some blogs
// if( $curr_blog_ID == 2 ) continue; // Hide blog 2...
if( ($curr_blog_ID == 1) && empty( $cat_all ) ) continue; // Hide blog 1 if requested
echo $cat_blog_start;
?><a href="<?php blog_list_iteminfo('blogurl', 'raw') ?>"><?php blog_list_iteminfo('name', 'htmlbody') ?></a>
<?php
// echo $cat_blog_end; commented out and moved down 4 lines
// run recursively through the cats
cat_children( $cache_categories, $curr_blog_ID, NULL, 'cat_list_before_first', 'cat_list_before_each', 'cat_list_after_each', 'cat_list_after_last', 1 );
echo $cat_blog_end; //Moved here so expand/contract on Blog 1 works and is valid
}
}
// End global list:
echo $cat_main_end;
// ----------------- END RECURSIVE CAT LIST ----------------
?>
Have fun
Jon
22 staypuft Sep 12, 2005 01:50
BINGO!
Thanx Jon for taking the time to reverse-"engineer" code (whereas I just patched together a lazy hack that sort of worked, but for all the wrong reasons).
And thanx Rhalevy for the original hack.
23 fraynelson Sep 12, 2005 02:21
The hack works fine with IE, and Firefox (therefore, I presume with Netscape-compatible browsers).
It is NOT working with Opera. Two posts ago, I displayed what I get in Opera. ANY IDEAS, PLEASE, StayPuft, The_Engineer??? :roll:
24 jddutt Nov 14, 2005 21:53
Okay, I've done both versions of these hacks. The first one doesn't affect the categories on Blog 1, but the second one does away with the checkboxes so someone can't check multiple categories and get a listing. Anyone worked out something that works on Blog 1 but keeps the checkboxes?
25 jddutt Nov 14, 2005 22:34
Nevermind, figured out. Duh, "checkbox = true" instead of "false".
26 darint Jan 15, 2006 15:51
Greetings:
I have tried all I know (which isn't much) to get this to work on my blog. When I view the source of the page it shows the tag with the class associated but the icons don't appear. I have placed the images every where I can think of, as well as the new class stuff (always keeping them together), but no joy.
Please help - Thanks!
27 kskhater Jan 20, 2006 17:11
I followed the hack in the second post but all I get is this
http://www.alkhater.net/blog/cap/cat_collapse.gif
My blog is at http://www.alkhater.net/blog/
I'm using \skins\kubrick2evo
As you can see from the blog: Ärticle by Others" I have a long list under category and would like to make it expand and contract.
Any ideas?
Thanks
28 balupton Jan 22, 2006 16:43
opera does not support live/realtime css changing, and it will never support it... Aparently it is against standards or some crap.
Most web developers including myself don't even try to support opera, if it works yay if it doesnt oh well.
What we do is just scan the user-agent and if it contains opera just say use your other browser. As anyone with opera is probz using another browser anyway.
29 yabba Jan 23, 2006 12:37
opera does not support live/realtime css changing
Really? It seems to cope quite well with the demonstration version of the script http://www.mattkruse.com/javascript/mktree/documentation.html
You might like to check the changes you made to _categories.php, your tags are totaly invalid.
¥
30 balupton Jan 24, 2006 19:31
but y dont u just use a div tag that contains the contents, and display:none; and display:block; or display:; to hide and show the contents
31 yabba Jan 25, 2006 01:02
balupton wrote:
but y dont u just use a div tag that contains the contents, and display:none; and display:block; or display:; to hide and show the contents
Why wrap the ul in a div?
¥
32 balupton Jan 25, 2006 12:16
y not?
33 yabba Jan 25, 2006 13:21
balupton wrote:
y not?
Because it's superfluous code.
¥
34 personman Feb 14, 2006 22:51
I hate to interupt the love-fest here, but what's the verdict on this hack? Does it work? And yes, for the love of Pete, I need it to work in Opera and support standards and crap like that. So, what's the verdict? If someone has it working, could they post updated instructions, or (even better) a plugin?
35 ginocote1 Jun 06, 2006 05:09
Hi,
Sometime i wonder if i have the same website as you all, i never, never have all the code you say to change,
Like the code for _categories at line 97
I don't have this code line and the code finish at line 57
I just download B2 one week ago, i should have the lattest version no?
Thank
36 yabba Jun 06, 2006 10:22
I'm betting that the last line says something like include dirname(__FILE__).'/../_categories.php'; ? In which case, you need to make the changes to /skins/_categories.php instead ;)
¥
37 lexagon Jun 12, 2006 16:36
hey, crowd;
Duh, "checkbox = true" instead of "false".
okay, nice to know. But, just to make that complete, what would I have to do to offer my visitor/s a "get selection" button in oder to actually retrieve the content from all the checked cats? I tested "checkbox = true" and couldn't get the getting right, so to say, ;)
thx, 'lex
38 lexagon Jun 16, 2006 15:45
just leave a dumb user alone long enough and he'll come up with a solution -- sometimes ;) Just for the record, in case someone has the same question like my dumbo self: I found the right way to do it in the TicTac skin. The portion needed in _main.php should look like
<form action="<?php bloginfo('blogurl', 'raw') ?>" method="get">
<?php // -------------------------- CATEGORIES INCLUDED HERE -----------------------------
require( dirname(__FILE__)."/_categories.php");
// -------------------------------- END OF CATEGORIES ---------------------------------- ?>
<br />
<input type="submit" value="<?php echo T_('Get selection') ?>" />
<input type="reset" value="<?php echo T_('Reset form') ?>" />
</form>
and it walks (provided checkboxes are set to 'true' in _categories.php).
39 input Jun 22, 2006 13:25
I can't seem to get the hack working to get expandable/collapsable categroies in my blog.
After applying the hack and reloading this is the part of the code i get in my browser.
I use the "custom" skin and when applying the hack nothing changes visually.
<div class="bSideItem">
<h3>Categories</h3>
<form action="http://localhost/blogs/index.php" method="get">
<ul CLASS="mktree">
<li>
<a href="http://localhost/blogs/index.php">All</a></li>
<li><label><input type="checkbox" name="catsel[]" value="18" /><a href="http://localhost/blogs/index.php?cat=18">Mobile</a> <span class="dimmed">(0)</span></label></li>
<li><label><input type="checkbox" name="catsel[]" value="14" /><a href="http://localhost/blogs/index.php?cat=14">Web 2.0</a> <span class="dimmed">(1)</span></label>
<ul>
<li><label><input type="checkbox" name="catsel[]" value="16" /><a href="http://localhost/blogs/index.php?cat=16">AJAX</a> <span class="dimmed">(1)</span></label></li>
<li><label><input type="checkbox" name="catsel[]" value="17" /><a href="http://localhost/blogs/index.php?cat=17">Blogging</a> <span class="dimmed">(0)</span></label></li>
<li><label><input type="checkbox" name="catsel[]" value="15" /><a href="http://localhost/blogs/index.php?cat=15">Social Networking</a> <span class="dimmed">(0)</span></label></li>
</ul>
</li>
</ul>Can somebody help ? Thanks.
40 carringt Aug 06, 2006 03:40
Is this compatible with 1.8
41 kskhater Jan 19, 2007 19:12
Would this hack work with 1.9.1?
42 momo Jan 30, 2007 16:03
Hello,
I'm not a specialist but I could make this hack work with 1.9.2.
In order to do that, follow the instructions, but instead of modifying the "_categories.php" file, give to the parameter 'list_start' in the evo_Cats calling instruction the value '<ul CLASS="mktree">':
$Plugins->call_by_code( 'evo_Cats', array( // Add parameters below:
'list_start' => '<ul CLASS="mktree">'
) );
It works for me!
Hope that helps
Momo
43 kskhater Feb 01, 2007 06:25
Thanks Mome, But where do you insert this code? Do you insert it _main.php for the skin and where?
Also, there is no file called "mktree.js, is it the same as clickable_cats.js?
44 kskhater Feb 01, 2007 07:08
I figure out that by myself but the hack does not seem to work. I'm also using 1.9.2 and the steps I took are as follow:
1- I copied all the hack files to the skin I' using directory, i.e where _main.php is located.
Instead of changing _categories.php I added the line suggested above by Mome.
45 momo Feb 01, 2007 09:14
Hi kskhater,
As I said, you have to perform the first steps, described at the top of this topic:
-
download the CSS, JS, and image files
insert the code in the HEAD part of your _main.php in order to include the CSS and JS files (did you do that?)
[/list:u]
And then, adapt the "evo_Cats calling" instruction as mentioned
Hope this helps
Momo
46 kskhater Feb 01, 2007 09:26
Here is what I did:
1- I copied the .js, .css, and images to:
/blog/skins/nifty_corners
2- I added this just after the <head> in _main.php
<SCRIPT SRC="mktree.js" LANGUAGE="JavaScript"></SCRIPT>
<LINK REL="stylesheet" HREF="mktree.css">3- I changed this:
<?php
// -------------------------- CATEGORIES INCLUDED HERE -----------------------------
// Call the Categories plugin:
$Plugins->call_by_code( 'evo_Cats', array( // Add parameters below:
) );
// -------------------------------- END OF CATEGORIES ----------------------------------
?>to this:
<?php
// -------------------------- CATEGORIES INCLUDED HERE -----------------------------
// Call the Categories plugin:
$Plugins->call_by_code( 'evo_Cats', array( // Add parameters below:
'list_start' => '<ul CLASS="mktree">'
) );
// -------------------------------- END OF CATEGORIES ----------------------------------
?>47 momo Feb 01, 2007 13:23
Hi kskhater,
I looked at your code on your blog and it seems that the mktree.css file is not found:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML><HEAD>
<TITLE>404 Not Found</TITLE>
</HEAD><BODY>
<H1>Not Found</H1>
The requested URL /blog/mktree.css was not found on this server.<P>
<P>Additionally, a 404 Not Found
error was encountered while trying to use an ErrorDocument to handle the request.
<HR>
<ADDRESS>Apache/1.3.37 Server at www.alkhater.net Port 80</ADDRESS>
</BODY></HTML>Use maybe the the following instruction:
<link rel="stylesheet" href="mktree.css" type="text/css" />instead of the:
<LINK REL="stylesheet" HREF="mktree.css">I don't know the difference. In all case, check the path.
For the mktree.js, it is OK...
Good luck
Momo
48 kskhater Feb 01, 2007 16:03
I did that and checked all URL and there are OK. It still does not work.
Just to make sure we are using the same mktree.js The one I'm using have one the 2nd. & 3rd. lines:
// Author: Matt Kruse <matt@mattkruse.com>
// WWW: http://www.mattkruse.com/
Is yours the same?
49 yabba Feb 01, 2007 16:18
Your css and js links come before the <base> tag for your skin, you either need to move the files to /blog/ folder or make the paths absolute in your calls ( ie/ http://www.alkhater.net/blog/skins/nifty_corners/mktree.js )
¥
50 momo Feb 01, 2007 16:24
Sorry kskhater,
But mktree.css is not reachable on your site. Try: http://www.alkhater.net/blog/mktree.css: it doesn't work. But http://www.alkhater.net/blog/plugins/starrating_plugin/stars.css shows his code: it's reachable.
I don't know why your file is not reachable... maybe is there some restriction.
But that's not a b2evolution problem.
Momo
51 kskhater Feb 01, 2007 16:39
I changed both lines to use absolute URL like this but still does not work:
<SCRIPT type="text/javascript" SRC="http://www.alkhater.net/blog/skins/nifty_corners/rsc/mktree.js" LANGUAGE="JavaScript"></SCRIPT>
<link rel="stylesheet" href="http://www.alkhater.net/blog/skins/nifty_corners/rsc/mktree.css" type="text/css" />52 kskhater Feb 03, 2007 04:30
I finally got it working,
Thank you all.
53 constance Mar 20, 2007 01:48
I've followed the instructions posted by Rhalevy for collapsible categories, but it's not working. I also read all of the discussion about this hack, but none of the suggestions there have helped.
Does this hack work with 1.8?
Is there anything I need to do differently if I'm using the Melbourne skin?
thank you,
constance
54 xapiens Jun 14, 2007 18:51
Could someone please post instructions for how to make this work in 1.9.3? Pretty please? And please consider the newbie Factor.
55 digitalsoapbox Aug 05, 2007 07:09
xapiens wrote:
Could someone please post instructions for how to make this work in 1.9.3? Pretty please? And please consider the newbie Factor.
Seconded. How did you get it working, kskhater? Please share! :)
56 afwas Aug 05, 2007 20:40
Here is a step by step guide to make the expandable tree for Categories.
The Categories imploded and exploded:
http://www.blog.hemminga.net/cat.png
Note: these instructons are tested in B2evo version 1.10.2. If you haven't got that version yet, please [url=http://b2evolution.net/news/2007/08/05/1_10_upgrade_now]upgrade[/url] as soon as possible.
1. Download and extract the zipfile attached to this message. Copy the content (five files) to the folder of your skin. In my example the skin is 'custom' so I copy the files to ../blog/skins/custom.
2. In this folder you find the file _main.php. Open it and add somewhere between <head> and </head> (for example after <link rel="stylesheet" href="custom.css" type="text/css" />) these lines:
<link rel="stylesheet" href="mktree.css" type="text/css" />
<script src="mktree.js" language="JavaScript"></script>Because of the download you just did, you needn't alter the _categories.php. I did that for you.
If you have any questions left or if the layout is not what you expected, please report back to this topic.
Good luck
57 talisman_studios Sep 27, 2007 12:59
I don't see any zipfile attached - could you post a link?
58 afwas Sep 27, 2007 19:01
talisman-studios wrote:
I don't see any zipfile attached - could you post a link?
Due to the fact attachements were removed recently, you couldn't find the zip file. You can now find it [url=http://www.blog.hemminga.net/mktree.zip]here[/url].
Good luck
59 talisman_studios Sep 28, 2007 12:02
Cheers for the link but I've hit a problem - and it is not limited to just this script I've hit this a bunch of times recently.While I was upgrading my b2evolution version as so rightly encouraged to do so I hit it again. I've got the new files on my server, I go to mydomain/install I get an error.
Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.Please contact the server administrator, --ME-- and inform them of the time the error occurred, and anything you might have done that may have caused the error.
More information about this error may be available in the server error log.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
The error logs on my server show:
File does not exist: /wah/wah/dev/500.shtml
Premature end of script headers:/wah/wah/dev/install/index.php
So I check the permission on the files in install, set them all to be executable and still the problem continues.
Like I say I get this with any script I try to run and previously this hasn't been a problem as I've found other ways around but it would be seriously handy to actually be able to run some of these as per the instructions.
Any help from anyone is greatly appreciated. Google doesn't seem to be working its usual magic for enlightening me any.
EDIT:
Got it! Okay so it looks really silly that I posted this then nearly instantly found the answer, but after the amount I had searched before I just wasn't expecting to. Turns out it is to do with the mode my hosting(lunar pages if you are interested) runs in and I needed file permissions set to 755.
60 afwas Sep 28, 2007 12:15
The 500 error is indeed probably a permission issue. Other than normal execution, the install from B2evolution needs a 666 permission on ../blogs/conf/_basic_conf.php (write permission) unless you fill in the (seven) variables yourself. I think the script didn't come this far. The ../install/index.php didn't start at all.
What are / were the permissions before you changed them. Common is 755 for folders and 644 for files.
I advise you to contact your host. I have this feeling they recently changed something on your server and they will know what it was. Do provide them the information you provided us.
Good luck
61 talisman_studios Sep 28, 2007 14:34
okay so I got on to installing the drop down lists thing. Everything seems to be in, but nothing has changed. Looking at the page source the change in the <head> section is there but the <ul> for categories is NOT showing <ul class="mktree">
I put _categories.php in my skin directory (also custom) and in the level above i.e. /skins which is where I assume it is meant to be put, still nada. Has one of us missed a step or file somewhere?
62 afwas Sep 28, 2007 20:18
I just re-installed the package succesfully on my testblog.
Do check the sourcecode of the page: both new lines should show up and the categories should show up with class="mktree". If you are in doubt, leave a link to your site and I will have a look.
The difference between _categories.php in ../blogs/skins/ folder and ../blogs/skins/YOURSKIN/ is the following: the defaultfile is in ../blogs/skins/. If you want something particular on a skin, you place the file in it's skinfolder. It will now override the default file. Wit this hiercharchy it is possible to make changes on al levels: global for every skin and on a per skin basis.
Good luck
63 talisman_studios Sep 29, 2007 10:14
The answer was in one of the earlier posts, once I made this chane main.php it worked just fine:
Code:
<?php
// -------------------------- CATEGORIES INCLUDED HERE -----------------------------
// Call the Categories plugin:
$Plugins->call_by_code( 'evo_Cats', array( // Add parameters below:
) );
// -------------------------------- END OF CATEGORIES ----------------------------------
?>to this:
Code:
<?php
// -------------------------- CATEGORIES INCLUDED HERE -----------------------------
// Call the Categories plugin:
$Plugins->call_by_code( 'evo_Cats', array( // Add parameters below:
'list_start' => '<ul CLASS="mktree">'
) );
// -------------------------------- END OF CATEGORIES ----------------------------------
?>One of the first things I did was start fooling around with the css though, for my need giving the subcategories a slight indent looks much better than a smaller font.
Thanks for the continued input Afwas - it has been helpful and welcome.
There is something would love to see added to this and to save myself the time of looking into how it all works and figuring out how do-able it is I'm gonna ask you :)
Would it be possible to add state persistence to the drop down list? My user wants something that can basically act like a contents page for a book and if you navigate down a a few steps to get to a section of interest it would be nice to at least keep that section 'open' for reference and to make it quicker and easier to look at other bits in the same parent section. What is your opinion on it?
64 cindyrae Nov 29, 2007 16:46
Example sites, code using the mktree collapsible categories
Hopefully, someone will find this helpful. I use collapsible categories with version 1.10 and my own skin.
My sites using the collapsible categories described in this thread:
http://www.thewildlifeporch.com*
http://www.softwarefemme.com
http://www.bloggerwithaplan.com
* The code below is for this blog
The mktree files are located in the same folder as my own skin. I've listed the modfications I made (to the best of my memory) below.
1. Code in my own skin (just add to your skin wherever you want the categories to appear, like _main.php):
//-------------- MAIN BLOG CATEGORIES AND POSTS --------------------
# You can customize the following as you wish:
if(!isset($cat_all)) $cat_all = /* TRANS: All categories, skin's categories list */ T_('All'); // Set to empty to hide
# global category list delimiters:
if(!isset($cat_main_start)) $cat_main_start = '<ul class="mktree">' . "\n";
if(!isset($cat_main_end)) $cat_main_end = "</ul>\n";
# Category delimiters:
if(!isset($cat_line_start)) $cat_line_start = "<li>\n";
if(!isset($cat_line_end)) $cat_line_end = "</li>\n";
if(!isset($cat_line_checkbox)) $cat_line_checkbox = false;
# Category group delimiters:
if(!isset($cat_group_start)) $cat_group_start = "<ul>\n";
if(!isset($cat_group_end)) $cat_group_end = "</ul>\n";
# When multiple blogs are listed on same page:
if(!isset($cat_blog_start)) $cat_blog_start = '<h2>';
if(!isset($cat_blog_end)) $cat_blog_end = '</h2>';
// Call the Categories plugin:
$Plugins->call_by_code( 'evo_Cats', array(
'block_start'=>'',
'block_end'=>'',
'title'=> "<h1>Categories</h1>\n",
'list_start'=>$cat_main_start,
'list_end'=>$cat_main_end,
'line_start'=>$cat_line_start,
'line_end'=>$cat_line_end,
'form'=>$cat_line_checkbox,
'group_start'=>$cat_group_start,
'group_end'=>$cat_group_end,
'coll_start'=>$cat_blog_start,
'coll_end'=>$cat_blog_end,
) );
// -------------------------- ARCHIVES INCLUDED HERE -----------------------------2. Code at the top of _main.php in your skin, just before the end of the head section (your head section may look slightly different):
<link rel="alternate" type="application/atom+xml" title="Atom" href="<?php $Blog->disp( 'atom_url', 'raw' ) ?>" />
<link rel="pingback" href="<?php $Blog->disp( 'pingback_url', 'raw' ) ?>" />
[b] <link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="../../rsc/js/mktree.js"></script>
<link rel="stylesheet" href="../../rsc/css/mktree.css" type="text/css" />
[/b] <?php
$Blog->disp( 'blog_css', 'raw');
$Blog->disp( 'user_css', 'raw');
?>
</head>The order is important to make sure styles get overridden the right way between the skin, mktree, and whatever is in your media/blogs directory, if anything.
3. In the stylesheet with my skin, I have the following. This should be optional step for you, but I've included it for the benefit of the margins and paddings used (it's also a good example of using a graphic for a bullet in an unordered list).
ul {
margin: 0; padding: 0;
list-style-type: none;
}
ul li {
margin: 2px 0 2px 0; padding: 2px 2px 2px 18px;
list-style-type: none;
background: url(../../rsc/icons/bullet.gif) no-repeat 0% .5em;
}
4. In my media/blogs directory,
ul li {
margin: 2px 0 2px 7px; padding: 2px 2px 2px 18px;
background-image: url(small_square.gif);
}
ul.mktree li .bullet { padding-left: 19px; }
ul.mktree li.liBullet .bullet {
background-image: url(small_square.gif);
margin-left: 7px;
padding-left: 12px;
}
where "small_square.gif" accompanies the stylesheet in the same folder.
This ensures the same bullet is used for all unordered lists, including the collapsible categories.
Hope this helps someone save some time,
Cindy Rae
65 afwas Nov 29, 2007 17:01
Thanks to both talisman-studios and Cindy Rae for your feedback.
In the mktree.css file I made this:
/* Format menu items differently depending on what level of the tree they are in */
ul.mktree li { font-size: 100%; }
ul.mktree li ul li { font-size: 90%; }
ul.mktree li ul li ul li { font-size: 80%; }
ul.mktree li ul li ul li ul li { font-size: 70%; }
The font gets smalles at every branch. This is not the most beautiful solution, but I dId it so you guys and gals can easily find the styling and change it to your wishes.
I made a new hack for 2.1 and it works. It's in some other topic in the forum. Once I've polished it I will make a neat package out of it.
Good luck
66 liphtier Mar 30, 2008 16:53
http://www.drugusers.ru/cd/disanons/
it's in Russian, but you can figure out what is done there
It's a 1.6a. the engine used primarily as CMS.
I've made an expandable tree that shows all blogs and categories , there are also lots of modifications to categories view.
For instance, if a category contains sub categories but no posts, then it look like table of contents for itself
now I'm going to rebuild all that features in 2.41 (it is not "migratable"))
I could share the 1.6 modifications code if anybody interested
67 sam2kb Mar 30, 2008 18:01
There is a [url=http://forums.b2evolution.net/viewtopic.php?t=14953]Collapsible Categories [/url]plugin for 2.4.1, but it doesn't like Opera :), while your code works well.
Share your code please ;)
68 liphtier Mar 31, 2008 00:12
in skins/custom/_categories.php
if(!isset($cat_all)) $cat_all = ''; // Set to empty to hide
# global category list delimiters:
if(!isset($cat_main_start)) $cat_main_start = "\n<ul class=\"cat_UL\">\n";
if(!isset($cat_main_end)) $cat_main_end = "</ul>\n";
# Category delimiters:
if(!isset($cat_line_start)) $cat_line_start = "\n<li class=\"cat_LI\"><span> </span>\n";
if(!isset($cat_line_end)) $cat_line_end = "</li>\n";
if(!isset($cat_line_checkbox)) $cat_line_checkbox = false;
# Category group delimiters:
if(!isset($cat_group_start)) $cat_group_start = "\n<ul class=\"sub_cat_UL\" >\n";
if(!isset($cat_group_end)) $cat_group_end = "</ul>\n";
# When multiple blogs are listed on same page:
if(!isset($cat_blog_start)) $cat_blog_start = '';
if(!isset($cat_blog_end)) $cat_blog_end = '';
if(!isset($notes_disp)) $notes_disp = false;
Also it is necessary to modify plugins/categories.plugin.php
so that each link to category will have id
line 270
$r .= '<a href="';
replace with:
$r .= '<a id="cat_'.$cat_ID.'" href="';blog_cat_expand.css
ul.cat_UL {
background: none;
margin: 0;
padding: 0;
list-style-type:none;
}
ul.cat_UL li {
background: none;
margin: 0;
padding: 0;
list-style-type:none;
}
ul.cat_UL li a {
background: none;
margin: 0;
padding: 0;
text-decoration: none;
}
ul.cat_UL li a:visited {
text-decoration: none;
}
ul.cat_UL li a:hover {
text-decoration: none;
}
ul.sub_cat_UL {
background: none;
margin: 0;
padding: 0;
display: none;
position: relative;
top: 0px;
left: 10px;
}
.cat_LI a {
word-wrap: normal;
}
.cat_LI a,
.cat_LI img {
vertical-align: bottom;
}
blog_cat_expand.js
function winOnLoad(catID) {
findSubs ();
if (catID) {
ExpandCurrent(catID);
}
}
function findSubs () {
var bloglist = document.getElementById('bloglist');
var bluls = bloglist.getElementsByTagName('UL');
var blulslength = bluls.length;
for (i=0; i<blulslength; i++) {
if (bluls[i].className == 'sub_cat_UL') {
makeBranch(bluls[i]);
}
}
}
function makeBranch(sub_UL) {
parent_LI = sub_UL.parentNode;
the_span = parent_LI.getElementsByTagName('SPAN')[0];
the_span.innerHTML='<img src="plus.gif" alt="+" />';
the_span.style.cursor = 'pointer'
the_span.onclick = ToggleSubs;
}
function ToggleSubs(catUL) {
var parent_LI = this.parentNode;
if (parent_LI) {
var itemNeigh = parent_LI.childNodes;
var itemNeighLen = itemNeigh.length;
var curSubsUL;
for( i=0; i < itemNeighLen; i++) {
if(itemNeigh[i].className == 'sub_cat_UL') {
curSubsUL = itemNeigh[i];
if(curSubsUL.style.display != 'block') {
this.innerHTML = '<img src="minus.gif" alt="-" />';
curSubsUL.style.display = 'block';
}
else {
this.innerHTML = '<img src="plus.gif" alt="+" />';
curSubsUL.style.display = 'none';
}
}
}
}
else if (catUL) {
var the_span = catUL.parentNode.getElementsByTagName('SPAN')[0];
if(catUL.style.display != 'block') {
the_span.innerHTML = '<img src="minus.gif" alt="-" />';
catUL.style.display = 'block';
}
else {
the_span.innerHTML = '<img src="plus.gif" alt="+" />';
catUL.style.display = 'none';
}
}
}
function ExpandCurrent(catID) {
var bloglist = document.getElementById('bloglist');
var bluls = bloglist.getElementsByTagName('UL');
var blulslength = bluls.length;
var branchULs = new Array();
var the_cat = document.getElementById('cat_'+catID);
var currentCat = the_cat;
while (currentCat.parentNode && currentCat.parentNode.parentNode != bloglist) {
if (currentCat.parentNode.nodeName == 'UL') {
branchULs.push(currentCat.parentNode);
}
currentCat = currentCat.parentNode;
}
for (i=0;i<branchULs.length; i++) {
ToggleSubs(branchULs[i]);
}
}in skins/custom/_main.php
<?
$catID = '';
if ($_REQUEST['cat']) {
$catID = $_REQUEST['cat'];
}
else if ($_REQUEST['p']) {
$postdata = get_postdata($_REQUEST['p']);
$catID = $postdata['Category'];
}
?>
<body onload="winOnLoad(<?= $catID?>)">
Collapsible categories Hack
first of all reference yourself with this tutorial on how to make collapsable categories with just a css tag
http://www.mattkruse.com/javascript/mktree/index.html
Follow the directions there and download the CSS, JS, and two image files linked at the top of the link below
http://www.mattkruse.com/javascript/mktree/source.html
Now all you do is include them in the head of the _main.php file in your skin folder
then you go to your skins directory and open the file _categories.php
Then you enter where it is declaring variables (around line 20)
This will add the class "mktree" to the head of all ul tags
now you scroll down to around line 97 where it says
and change
to
upload to your webserver skins directory and enjoy your expanding categories
Post if you have any questions
ENJOY! I know ive been waiting to be able to do this