Recent Topics

SOLVED - Drop down category list

Started by on Sep 02, 2007 – Contents updated: Feb 03, 2014

Sep 02, 2007 09:09    

My b2evolution Version: 1.10.x

Hi!

I'd love it if someone could give me some advice on how to make a dropdown menu list of my categories.

I have seen the collapsible archives/categories hack, and have tried it but don't like the look - I'm hoping to add a blogroll to my side menu, and I have a very long list of categories at the moment. Adding the blogroll would just make the menu way too long for my liking.

Anyway, I know that using a dropdown list might be tricky, so I'd really appreciate it if anyone has any ideas.

Thanks in advance,

Na3

Sep 02, 2007 14:38

You could just use a toggled div that shows/hides the category list.
Eg:

Code

<h3><label title="Show Categories"><a onclick="toggle('cats')" style="cursor: pointer;"><?php echo T_('Categories') ?></a></label></h3>
<div id="cats" style="display:none">
<?php // -------------------------- CATEGORIES INCLUDED HERE -----------------------------
    // Call the Categories plugin:
    $Plugins->call_by_code( 'evo_Cats', array(  // Add parameters below:
      ) );
    // -------------------------------- END OF CATEGORIES ---------------------------------- ?>
</div>

In the Head tags add this pointing to rsc/js folder for your skin.

Code

<script type="text/javascript" src="rsc/js/toogle.js"></script>

and the toogle.js is as follows..

Code

function toggle(div) {
 
    if (document.getElementById(div).style.display=='') {
 
      document.getElementById(div).style.display = 'none';
 
      return
 
    } document.getElementById(div).style.display = '';
 
  }

You may have to slightly edit the categories plugin, but it shouldn't need much tinkering.

Sep 02, 2007 15:20

Thanks for the suggestions. I'll have a tinker and see how it goes; I'm not sure it's quite what I want.

If anyone still has any info on a hack using a dropdown list, please let me know!

Cheers,

Na3

Sep 05, 2007 15:07

I've added the above javascript as suggested, but I'm getting a 'toggle is not defined' error message when I try clicking on the show categories link. Is there something I need to fiddle with in the categories plugin for it to work?

Thanks,

Na3

Sep 06, 2007 04:18

Thanks John for providing the code. I finally got it working!

I used this code in my skin's _main.php:

Code

<h3><label title="Show Categories"><a onclick="toggle('cats')" style="cursor: pointer;"><?php echo T_('Categories') ?></a></label></h3>
<div id="cats" style="display:none">
<?php // -------------------------- CATEGORIES INCLUDED HERE -----------------------------
      // Call the Categories plugin:
      $Plugins->call_by_code( 'evo_Cats', array(   // Add parameters below:
         ) );
      // -------------------------------- END OF CATEGORIES ---------------------------------- ?>
</div>

But had to replace the javascript code (your suggested toogle.js) with the following in the head section of the _main.php:

Code

<script type="text/javascript">
//<![CDATA[
function toggle(o)
{
var e = document.getElementById(o);
e.style.display = (e.style.display == 'none') ? 'block' : 'none';
}
//]]>
</script>

It now works like a charm!

www.thepromptcopy.com/pip if you want a look

Thanks for the help![/code]

Sep 06, 2007 05:18

Glad it solved your problem.

Sep 06, 2007 06:43

Thanks again! I've now happily got the code working on all my blog pages and for archives, categories, and linkblog.

Sep 07, 2007 04:54

Strangely enough, when I try this, all I get is the word "categories," and when I click on it, all that happens is that it disappears.

Sep 07, 2007 04:57

cslepage, can you provide a link to your site? Maybe I can have a look and compare notes with what I did to make it work.

Sep 07, 2007 05:00

I'll try to add it back into my site.

Sep 07, 2007 05:07

Great, that would help. I'm no coding expert, so I'm going to take a stab at what's going wrong. I guess the first question is also: do you have the categories plugin file installed?

Sep 12, 2007 02:24

cslepage, did you have any luck adding the code?

Sep 16, 2007 09:47

Did you need any help still? If you provide a link I can take a look.

Sep 16, 2007 15:42

If I put it back in, I will send you a link. Or I may just forward a main.php and you can explain where the code should go. Thanks for following up!

Sep 16, 2007 16:03

No worries. Happy to help! :)

Sep 19, 2007 05:01

Thanks.

I thought it would be helpful to post exactly what my code is for the categories, so we can compare. So the following is what we both put in the header:

Code

<script type="text/javascript">
//<![CDATA[
function toggle(o)
{
var e = document.getElementById(o);
e.style.display = (e.style.display == 'none') ? 'block' : 'none';
}
//]]>
</script>

And this is what I have for my categories hack:

Code

<h3><label title="Show Categories"><a onclick="toggle('cats')" style="cursor: pointer;"><?php echo T_('Show All Categories') ?></a></label></h3>
<div id="cats" style="display:none">
<?php // -------------------------- CATEGORIES INCLUDED HERE -----------------------------
      // Call the Categories plugin:
      $Plugins->call_by_code( 'evo_Cats', array(   // Add parameters below:
 
'block_start'=>'',
                                       'block_end'=>'',
                                       'title'=>'',         // No title.
 
 
         ) );
      // -------------------------------- END OF CATEGORIES ---------------------------------- ?>
</div>

Your code is slightly different because you're not using the call to the plugins:

Code

<h3><label title="Show Categories"><a onclick="toggle('cats')" style="cursor: pointer;">Categories</a></label></h3>
<div id="cats" style="display:none">
<div class="bSideItem"><h3>Categories</h3><ul><li><a href="http://www.comiclist.com/index.php/links">All</a></li>
<li><a href="http://www.comiclist.com/index.php/links?cat=50">Anomalous</a> <span class="notes">(5)</span></li>
 
<li><a href="http://www.comiclist.com/index.php/links?cat=39">Blogosphere</a> <span class="notes">(18)</span></li>
<li><a href="http://www.comiclist.com/index.php/links?cat=44">Professionals</a> <span class="notes">(20)</span></li>
<li><a href="http://www.comiclist.com/index.php/links?cat=45">Publishers</a> <span class="notes">(47)</span></li>
<li><a href="http://www.comiclist.com/index.php/links?cat=43">Reviews</a> <span class="notes">(5)</span></li>
<li><a href="http://www.comiclist.com/index.php/links?cat=46">Shops</a> <span class="notes">(8)</span></li>
 
<li><a href="http://www.comiclist.com/index.php/links?cat=47">Software</a> <span class="notes">(5)</span></li>
<li><a href="http://www.comiclist.com/index.php/links?cat=18">Yard Sale</a> <span class="notes">(0)</span></li>
</ul>
</div>
</div>

The 'show categories' link disappears once you click it. ... But I have no idea what's wrong. I compared the code, and it seems fine. I copied your code and put it on my main.php and it worked fine. I'm really a novice at this stuff, so if anyone out there in b2evo can help, I think we'd both appreciate it.

Sorry cslepage, but if I think of anything I'll let you know.

Sep 19, 2007 20:14

na3 wrote:

Your code is slightly different because you're not using the call to the plugins:

Code

<h3><label title="Show Categories"><a onclick="toggle('cats')" style="cursor: pointer;">Categories</a></label></h3>
<div id="cats" style="display:none">
<div class="bSideItem"><h3>Categories</h3><ul><li><a href="http://www.comiclist.com/index.php/links">All</a></li>
<li><a href="http://www.comiclist.com/index.php/links?cat=50">Anomalous</a> <span class="notes">(5)</span></li>
 
<li><a href="http://www.comiclist.com/index.php/links?cat=39">Blogosphere</a> <span class="notes">(18)</span></li>
<li><a href="http://www.comiclist.com/index.php/links?cat=44">Professionals</a> <span class="notes">(20)</span></li>
<li><a href="http://www.comiclist.com/index.php/links?cat=45">Publishers</a> <span class="notes">(47)</span></li>
<li><a href="http://www.comiclist.com/index.php/links?cat=43">Reviews</a> <span class="notes">(5)</span></li>
<li><a href="http://www.comiclist.com/index.php/links?cat=46">Shops</a> <span class="notes">(8)</span></li>
 
<li><a href="http://www.comiclist.com/index.php/links?cat=47">Software</a> <span class="notes">(5)</span></li>
<li><a href="http://www.comiclist.com/index.php/links?cat=18">Yard Sale</a> <span class="notes">(0)</span></li>
</ul>
</div>
</div>

The code used by cslepage is not different from yout code, but you looked at the output (page source) and not at the _main.php (the second of your three code pieces above is from the _main.php).
Output page source from the na3 site is:

PHP

<h3><label title="Show Categories"><a onclick="toggle('cats')" style="cursor: pointer;">Show All Categories</a></label></h3>
 
<div id="cats" style="display: none;">
<h4><a href="http://thepromptcopy.com/pip//index.php">Puppets in Melbourne</a></h4>
<ul><li><a href="http://thepromptcopy.com/pip//index.php?cat=27">Builds/Shows</a> <span class="notes"></span><ul><li><a href="http://thepromptcopy.com/pip//index.php?cat=29">City Head</a> <span class="notes"></span><ul><li><a href="http://thepromptcopy.com/pip//index.php?cat=30">Lego city</a> <span class="notes"></span></li>
<li><a href="http://thepromptcopy.com/pip//index.php?cat=31">Moppets</a> <span class="notes"></span></li>
</ul>
</li>
[...]

I had a look at cslepages site but I couldn't find the error either. It's an oddity, but cslepage reported a few more of those :lol:

Good luck

Sep 19, 2007 20:20

Afwas wrote:

I had a look at cslepages site but I couldn't find the error either. It's an oddity, but cslepage reported a few more of those :lol:

Good luck

:) I am the reported oddity. :)

Sep 20, 2007 03:14

Well, if we're all stuck... How disappointing, because I really want to solve it now!

Sep 20, 2007 03:24

@cslepage: Can you try the code without the <div class="bSideItem"> and the corresponding </div>?
@cslepage: can you post the corresponding code from _main.php, I only want to look at the Categories part, like the second piece of code from na3 post

@na3: we never give up.
@na3: You can get rid of => in your post (see the codeblocks) if you edit your post and tick 'Disable smilies in this post' before submitting again.

Good luck

Sep 20, 2007 03:28

Oh, thanks Afwas. I didn't notice the smilies.
And I've only given up for the time being because I'm at work, and should probably be ... you know, working.

Sep 20, 2007 03:42

The code already didn't have the class bsideitem.

Code

<h3><label title="Show Categories"><a onclick="toggle('cats')" style="cursor: pointer;"><?php echo T_('Categories') ?></a></label></h3>
<div id="cats" style="display:none">
<?php // -------------------------- CATEGORIES INCLUDED HERE -----------------------------
      // Call the Categories plugin:
      $Plugins->call_by_code( 'evo_Cats', array(   // Add parameters below:
         ) );
      // -------------------------------- END OF CATEGORIES ---------------------------------- ?>
</div>

Sep 20, 2007 04:19

You may have a JS conflict going on.
You have a lot of other JS stuff on your page.

Sep 20, 2007 17:22

That took ages, but I found the solution. Luckily (!) my testblog showed the same error as cslepage, so I could tinker around.

Apparently toggle is used before. This was suggested by John, and I had the same idea.
(I always wonder how cslepages blog runs without an internal conflict) so I was surprised to see the same behaviour on my blog.

The solution: call the function 'toggle' in both the <script> in <head> and in the second part near the Categories anything but 'toggle'.

'toggle' Is mentioned in a dozen files. One of them being the gallery plugin.

Good luck

Sep 20, 2007 18:52

Anything but toggle... so what is it called?

Sep 20, 2007 18:59

Just replace 'toggle' in both instances with 'anything_but_toggle'.

Sep 20, 2007 19:02

In javaScript style it's 'anythingButToggle'. :p

Sep 21, 2007 12:28

For those who want an out of the box solution:
This hack provides an expandable Categories list. Click the link to expand or implode the list.
In ../blogs/skins/YOURSKIN/_main.php place between the head section (= between <head> and </head>):

PHP

<script type="text/javascript">
//<![CDATA[
function catToggle(o)
{
var document.getElementById(o);
e.style.display = (e.style.display == 'none') ? 'block' 'none';
}
//]]>
</script>

and replace the code for categories in the sidebar with:

PHP

<h3><label title="Show Categories"><a onclick="catToggle('cats')" style="cursor: pointer;">
<?php echo T_('Show / hide Categories'?></a></label></h3>
<div id="cats" style="display:none">
<?php // -------------------------- CATEGORIES INCLUDED HERE -----------------------------
      // Call the Categories plugin:
      $Plugins->call_by_code'evo_Cats'array(   // Add parameters below:
         ) );
      // -------------------------------- END OF CATEGORIES ---------------------------- ?>
</div>

You may want to do some styling on the header.

Good luck

May 27, 2008 12:39

Does anyone know how I could update this hack to work with b2evo version 2.4.1? Can this be done with a widget somehow - like how the expandable categories list has been done?

(No, I don't want the expandable categories widget. I need the categories to expand and show the posts within that category. And no, I don't want to use the tags widget either)

I'm happy to put the legwork in, if anyone could advise me on where to start.

Thanks,

Na3

Oct 04, 2008 15:56

Hhm... Where will i put this code? I really don't know where to put this code?

PHP

<h3><label title="Show Categories"><a onclick="catToggle('cats')" style="cursor: pointer;">
<?php echo T_('Show / hide Categories'?></a></label></h3>
<div id="cats" style="display:none">
<?php // -------------------------- CATEGORIES INCLUDED HERE -----------------------------
      // Call the Categories plugin:
      $Plugins->call_by_code'evo_Cats'array(   // Add parameters below:
         ) );
      // -------------------------------- END OF CATEGORIES ---------------------------- ?>
</div>

Oct 04, 2008 18:27

See the plugin thread:http://forums.b2evolution.net/viewtopic.php?p=81984#81984 I will look at it this weekend.

Oct 08, 2008 04:29

I'm trying to use this code on my page and am also getting just the heading categories...and a finger like it wants to go somewhere...and a label pops up to "Show Categories" but like the poster above...nothing after that. The code is active on the page I'm working on and would love if someone could help me get this working. Love the idea...I usually leave off categories because they get too messy...but if I could get this to work I'd be in heaven. THANKS

Oct 08, 2008 08:44

This is code for the 1.10 version of B2volution. For th current 2.4.x version please use the plugin two posts up.

Good luck

@swaitela: Please restate your question in that topic. From your blog I can't see what you want.


Form is loading...

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