Drop Down Menu For Categories

Update April 11, 2007 - This methods/scripts etc described in this post are obsolete. Do Not Use Them! They relate to a category method for Blogger BEFORE Blogger introduced their labels. Use New Blogger, Use Labels. This is just up for historical reasons, or if someone using the code already needs it. Comments are now Closed. Thanx.

Since I've had a few questions on it, I thought I would post the code for getting a drop down menu listing of the categories used with my category method. This is only useful if you are using that method which is outlined in this post(Part One). Thanks to Marcos from Oracle Data Mining and Analytics for revamping the code so it works in a drop down menu.

<div id="delicious">
   <noscript>Javascript must be enabled for Categories</noscript>
</div>
<script type="text/javascript" src="http://del.icio.us/feeds/json/tags/XXXXXXX"></script>
<script type="text/javascript">
   var sel = document.createElement('select');
   sel.setAttribute('target','_blank');
   sel.setAttribute('width','200');
   sel.setAttribute('style','width: 172px');  
   sel.setAttribute("onChange","location.href=this.options[this.selectedIndex].value");
   sel.options[0] = new Option('- Categories -','/');
   var i=1;
   for (p in Delicious.tags){
         tagURL =encodeURIComponent(p);
         var strip = p.replace(/_/g,' ');
         var otext = strip +' ('+Delicious.tags[p]+')';
         var ourl = delTagPost+'?'+tagURL;
         sel.options[i] = new Option(otext,ourl);
         i=i+1;
         }                    
    document.getElementById('delicious').appendChild(sel);
</script>

The instructions are the same as for the original flat listing of the categories. The only thing that has to be modified is your delicious username put in place of the XXXXXX at the beginning of the script. This code can be used with the code for the "Category Cloud" (Tag Cloud 9) so you can have both, but don't use it in conjuction with the flat listing of the categories.

Update: Now seems a good enough time to also add the code to hide the category post/archive when the recent posts/archive lists are also in a drop down menu.

Here is the sample code from Blogger Help for getting the 'Recent Posts' lists in a dropdown.

<h2 class="sidebar-title">Recent Posts</h2>
<select id="posthide" name="archivemenu" onchange="document.location.href=this.options[this.selectedIndex].value;">
  <option selected>- Recent Posts -</option>
     <BloggerPreviousItems>
  <option value="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></option>
     </BloggerPreviousItems>
</select>

The part highlighted in red is an id that needs to be added if you already have the menu for the following code to work. And to hide the category post in that listing paste the following code unchanged after the recent posts listing.

<script type="text/javascript">
// Cloak the Delicious Tag Post - Drop Down List
      rec = document.getElementById('posthide');
      for(i=0; i < rec.options.length; i++){
            value = rec.options[i].value;
            if(value == delTagPost){
                  rec.options[i] = null;
               }
           }
</script>

Here's the default code for creating an archive listing with a drop down, again the id that needs to be added if you already have a drop down listing is highlighted in red.

<h2 class="sidebar-title">Archives</h2>
<select id ="archivehide" name="archivemenu" onchange="document.location.href=this.options[this.selectedIndex].value;">
  <option selected>- Archives -</option>
    <BloggerArchives>
  <option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
    </BloggerArchives>
</select>
 

And here is the code that needs to be placed unchanged after the archive drop down listing.

<script type="text/javascript">
// Cloak the Delicious Archive Post - Drop Down List
      rec = document.getElementById('archivehide');
      for(i=0; i < rec.options.length; i++){
            value = rec.options[i].value;
            if(value == delArchivePost){
                  rec.options[i] = null;
               }
           }
</script> 

With both of those in place, the category post and archive containing the post will also be hidden in the drop down menus. I had to change the original way I came up with for hiding the select option because apparently IE and Opera don't allow a style="display:none" for a option tag while Firefox does. So changed it to set the option to null which seems to work in all 3. I'm assuming it's ok in other browsers, but if you run into any issues with it lemme know.

My Technorati : Blogger | Del.icio.us | Blogger Categories | phydeaux3