Recent Topics

[HACK] - make categories expand and contract

Started by on Jul 28, 2005 – Contents updated: Jul 28, 2005

Jul 28, 2005 18:34    

Scroll Down for hack

I am almost there in creating a hack that makes the catigories expand and contract. (Like the front page of b2evolution.net) but my problem is that i cant find a way to make the _catigories.php script realize when a category has no subcatigories or not. In other words it looks like all categories expand when only a few do. Has anybody found a variable that passes if a category has subcatigories or not. This would be really helpful in freeing up some real estate on my menu bar. If anybody else has a better solution please feel free to perk up.

Aug 18, 2005 22:55

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

Code

<SCRIPT SRC="mktree.js" LANGUAGE="JavaScript"></SCRIPT>

Code

<LINK REL="stylesheet" HREF="mktree.css">

then you go to your skins directory and open the file _categories.php

Then you enter where it is declaring variables (around line 20)

Code

# Category delimiters:  //RH
  if(!isset($maincat_group_start)) $maincat_group_start = '<ul CLASS="mktree">';
  if(!isset($maincat_group_end)) $maincat_group_end = '</ul>';

This will add the class "mktree" to the head of all ul tags

now you scroll down to around line 97 where it says

Code

// Start global list:
  echo $cat_main_start;
  if( $blog > 1 )
  {  // We want to display cats for one blog
    echo "\n",$cat_group_start,"\n";

and change

Code

$cat_group_start

to

Code

$maincat_group_start

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

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.

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.

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.

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

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:

Code

<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

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?

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]

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

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:

Code

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

Code

if(!isset($cat_main_start)) $cat_main_start = '';
  if(!isset($cat_main_end)) $cat_main_end = '';

and change it to

Code

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:

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

Code

# 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:

http://telarus.23ae.com/media/aggregate.mktree.scrncap.jpg

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 !

Aug 29, 2005 15:46

your issue seems to be that you are calling the

Code

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

Aug 29, 2005 16:09

hey !
sorry, but I don't have this problem...
here's my code from categories.php :

Code

# 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 :

Code

/* 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...

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

Code

# 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

Code

/* 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"

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:

Code

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

Code

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.

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

<?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:

PHP

# 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:

PHP

if( $blog == ) {     // 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:

PHP

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_IDNULL'cat_list_before_first''cat_list_before_each''cat_list_after_each''cat_list_after_last');
        }
    }
    
    // End global list:

Find

PHP

echo $cat_blog_end;
and comment it out
so it looks like:

PHP

//  echo $cat_blog_end;

now 4 line down you see:

PHP

// run recursively through the cats
            cat_children$cache_categories$curr_blog_IDNULL'cat_list_before_first''cat_list_before_each''cat_list_after_each''cat_list_after_last');
        }

Add

PHP

echo $cat_blog_end;

so it looks like this:

PHP

// run recursively through the cats
            cat_children$cache_categories$curr_blog_IDNULL'cat_list_before_first''cat_list_before_each''cat_list_after_each''cat_list_after_last');
                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

<?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 == ) {     // 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 ) 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_paramget_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 ) echo $cat_group_end,"\n";
    }
    
    // Start global list:
    echo $cat_main_start;
    if( $blog )
    {    // 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$blogNULL'cat_list_before_first''cat_list_before_each''cat_list_after_each''cat_list_after_last');
 
        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_IDNULL'cat_list_before_first''cat_list_before_each''cat_list_after_each''cat_list_after_last');
                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

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.

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:

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?

Nov 14, 2005 22:34

Nevermind, figured out. Duh, "checkbox = true" instead of "false".

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!

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.

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

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?

¥

Jan 25, 2006 13:21

balupton wrote:

y not?

Because it's superfluous code.

¥

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?

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

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 ;)

¥

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

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

Code

<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).

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.

Code

<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.

Aug 06, 2006 03:40

Is this compatible with 1.8

Jan 19, 2007 19:12

Would this hack work with 1.9.1?

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">':

Code

$Plugins->call_by_code( 'evo_Cats', array(  // Add parameters below:
'list_start' => '<ul CLASS="mktree">'
) );

It works for me!

Hope that helps

Momo

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?

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.

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

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

Code

<SCRIPT SRC="mktree.js" LANGUAGE="JavaScript"></SCRIPT>
  <LINK REL="stylesheet" HREF="mktree.css">

3- I changed this:

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 ----------------------------------
  ?>

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:

Code

<!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:

Code

<link rel="stylesheet" href="mktree.css" type="text/css" />

instead of the:

Code

<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

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?

Feb 01, 2007 16:39

I changed both lines to use absolute URL like this but still does not work:

Code

<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" />

Feb 03, 2007 04:30

I finally got it working,

Thank you all.

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

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.

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! :)

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:

Code

<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

Sep 27, 2007 12:59

I don't see any zipfile attached - could you post a link?

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.

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

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?

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

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:

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:

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?

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):

Code

//-------------- 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):

Code

<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).

Code

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,

Code

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

Nov 29, 2007 17:01

Thanks to both talisman-studios and Cindy Rae for your feedback.

In the mktree.css file I made this:

Code

/* 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

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

Mar 31, 2008 00:12

in skins/custom/_categories.php

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>&nbsp;</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

PHP

$r .= '<a href="';

replace with:

PHP

$r .= '<a id="cat_'.$cat_ID.'" href="';

blog_cat_expand.css

Code

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

Code

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

PHP

<?
$catID '';
 
if ($_REQUEST['cat']) {
    $catID $_REQUEST['cat'];
}
else if ($_REQUEST['p']) {
    $postdata get_postdata($_REQUEST['p']);
    $catID $postdata['Category'];
}
?>
<body onload="winOnLoad(<?= $catID?>)">


Form is loading...

blog tool – This forum is powered by b2evolution CMS, a complete engine for your website.