Hi there!


I am new to Drupal, but have spent the day installing and messing around.


I have 3 content sites that I would like to consolidate into one drupal site. Each site has several subcategories, so for lack of better knowledge, I thought the easiest way to do it in Drupal is to create 4 categories (aka "vocabulary") and underneath each one the subcategories (aka "terms").


Then I wanted to have them displayed in their own box as headers ("vocabulary") only, which would then upon click on the header dynamically (via Javascript) open the "terms" underneath, each term linked to the actual subsection, and close it again upon another click on the header - a toggle, so to say.

It took me a while, but now it's working nicely, and I'd like to share the results with you. If you think it's not so clean or there is a better way, please let me know. I'm keen to learn. :)

Instructions:


  1. Save this as menu-builder.inc in your /includes directory
    
    <?php
    
    $js="
    
    <SCRIPT LANGUAGE=\"JavaScript\"><!--
    function ShowHide(divId, divId2, divId3) {
    	var id = document.getElementById(divId); 
    	var id2 = document.getElementById(divId2); 
    	var id3 = document.getElementById(divId3);
    
    	if (id.style.display == \"none\") {
    		eval(\"id.style.display = 'block'\"); 
    		eval(\"id2.style.display = 'none'\"); 
    		eval(\"id3.style.display = 'block'\");
    	}
    	else {
    		eval(\"id.style.display = 'none'\"); 
    		eval(\"id2.style.display = 'block'\"); 
    		eval(\"id3.style.display = 'none'\");
    	}
    }
    
    //-->
    </script>
    
    ";
    
    $group="";
    $vid=0;
    $id=1;
    $get_tax="
    SELECT v.name AS name, t.tid AS tid, t.name AS item 
      FROM  vocabulary AS v 
      LEFT JOIN term_data AS t ON v.vid=t.vid 
      ORDER BY v.name, t.item";
    $result=mysql_query($get_tax);
    while($row=mysql_fetch_object($result)) {
    
    if($group!="" && $group!=$row->name)  {
    $cat="</div>\n";
    $cat.="</div>\n\n";
    $id++;
    $list.=$cat;
    }
    
    if($group!=$row->name) {
    $group=$row->name;
    $cat="<div id=\"content-block\"> 
    <a href=\"javascript:ShowHide('ID".$id."', 'ID".$id."_m', 'ID".$id."_p', 'ID".$id."_t');\"><b>";
    $cat.=$row->name;
    $cat.="</b></a>\n";
    $cat.="<div id=\"ID".$id."\" style=\"display:none;\">\n";
    $list.=$cat;
    }
    $list.="<li class=\"leaf\">
    <a href=\"?q=taxonomy/page/or/".$row->tid."\">".$row->item."</a>\n";
    
    }
    $cat="</div>\n";
    $cat.="</div>\n";
    $list.=$cat;
    $construct_menu=$js.$list;
    
    mysql_free_result($result);
    
    ?>
    
    

  2. In your custom box edit dialog, enter:
    include('./includes/menu-builder.inc');
    return $construct_menu;
    

  3. Set it from HTML to PHP
  4. Save it.
  5. Activate your custom box and place it wherever you like.

Hope you like it.


What I haven't yet figured out is how to get Drupal to display the taxonomy header and their respective terms (and even the content underneath) as content pages. Example: Tax: Marketing; Term:CRM; Content:Blah Blah So if you click on Marketing, you will see the term CRM, and the content Blah Blah in hierarchical order. Same for all other vocabulary, terms and content. Any ideas?

Helmar


PS: There isn't a working example of it yet for you to check, but if you have a taxonomy tree, you can try this right away. A screenshot can be found here . Feedback welcome.

Comments

Helmar’s picture

I would like to add that I have created stylesheet definitions that indent the terms. As I was messing with a chameleon based theme, the <LI class="leaf"> appears. Change it to your liking. :)

Also, I noticed that the last javascript call parameter , 'ID".$id."_t' can be removed as it doesn't do anything.

kc’s picture

It is a great idea, i needed exactly that. Thanks.
I ran into a problem with it though.
In IE6 when I click the vocabulary to expand it, I get this Internet explorer script error:
An error has occured in this script on this page

Line 160
Char 3
Error Object required
Code 0

do you wwant to continue running....

When you say YES it still works though. If you want to collapse the expanded menu, then you get the same error with error line 165 this time.

There is not that many lines in the code though. how does that happen?

Another note:
It works good without errors with Mozilla Firefox, but then it does not add the bullets.

Thanks again
KC

Helmar’s picture

It is a great idea, i needed exactly that. Thanks.

It's a pleasure.

I must admit that I only tested it with Opera 7 (I don't use anything else, but do have IE6). I loaded it with IE and it did work despite spewing out the error message. I'll have a look...

.... ahh... it's obious. The JS passes on three parameters, where it only needs one. It used to require three, because the last two would toggle a small +/- image, on which you'd click to expand/collapse. But since the vocabulary doesn't really work as a top container page, I put the link onto it and removed the +/- image toggle. As a result you only need one parameter. This also means you can remove the respective lines in the Javascript itself. IE then works without problems.

It looks like this:


<SCRIPT LANGUAGE=\"JavaScript\"><!--
function ShowHide(divId) {
	var id = document.getElementById(divId); 
	if (id.style.display == \"none\") {
		eval(\"id.style.display = 'block'\"); 
	}
	else {
		eval(\"id.style.display = 'none'\"); 
	}
}

//-->
</script>

and in the PHP code...

<a title=\"Click here to expand/collapse ".$row->name."\"  href=\"javascript:ShowHide('ID".$id."');\"><b>";

Regarding the bullet. No, you wouldn't get it unless you used the theme I am using. So the "li class="leaf"" would have to be changed to something else.

Helmar

Update: ITM I have figured out how to display entire vocabulary lists, ie: ?q=taxonomy/view/or/1,2,3,4. As a result I have added the +/- images to expand/collapse the list, and placed the taxonomy list link onto the vocabulary header (realising that this can result in rather large pages, so if someone knows how to limit the display of vocabulary lists, please let me know). In short: now we have the best of both worlds.

To make it easier for you, the file and the images can be found here. You obviously have to rename the menu-builder.inc.html file after downloading/saving it.

If anybody knows how to get vocabulary headers into the top of the page, ie home - marketing competence - editorials or home - marketing competence - advanced articles, please let me know. thanks!!

To answer my own question: thread on taxonomy

kc’s picture

Fixing the JS fixed the problem. Thanks again.

KC

pss0ft’s picture

Hi,

It works, but all I get is a menu structure with information listed. Not the contents. Could you change this to accessing the contents?

Another idea was to change this in a menu structure to configure by the sysop. Just reading the menustructure from an extarnal file. How about this idea? I like the working of this structure better than the one of the systen irself.

Grtz. Henk

WebSite powered by Drupal: http://pd5dp.ham-radio.ch
Other WebSite : http://www.qsl.net/pd5dp

Email:
pd5dp@amsat.org

bharanikumariyerphp’s picture

removed

bharanikumariyerphp’s picture

removed

bharanikumariyerphp’s picture

Hi this code sufficient for only two hierarchy,

But am using multiple hierarchy..

Any idea for this situation

kenorb’s picture