categories in blogger

Blogger doesn't know categories by itself but after 150 posts I felt the need to categorize a bit.
A simple approach would be to reserve a few labels and provide some hand coded navigation in a widget.
That would work fine but the pseudo-categories would mix up with the other labels in the labels widget.

One solution would be to mark the labels that serve as a category with an extra character, say by putting an asterix in front.

filling the categories widget

Now putting an asterix in front makes our categories unique and with a bit of jquery we can make them look like real categories.

Here is wat needs to be done:

• select the labels with an asterix
• remove them from the labels list
• remove the asterix
• append them in another widget

Now that didn't prove to be very difficult. I my template the labels are in a ul within a div with id 'Label1'.
I do not use asterixes in my labels so we can safely use jquery ':contains()' in the selector, like this $('#Label1 li:contains(*)') , this returns our categories.
To remove them from the labels list we simply tell jquery to do so with 'remove()', this gives us
$('#Label1 li:contains(*)').remove()Now we are ready to process our selection by using 'each()'.

To list the categories I added a html/javascript widget, I put a div and an empty ul in it.

<div id="cat"><ul></ul></div>

Before we can process we need to know what is in our selection. For my template there are two possibilities.

A list element containing an anchor and a span for the number of posts:

<li>
<a dir="ltr" href="http://beat-net.blogspot.com/search/label/*lost%2Bfound?max-results=7">*lost+found
</a>
<span dir="ltr">(64)</span>
</li>

Or a list element containing two spans:

<li>
<span dir="ltr">*lost+found</span>
<span dir="ltr">(64)</span>
</li>

In both cases the asterix needs to be removed before the list element can be appended to the ul.

To solve this I use two variables, one to hold the original text and one for the new text.
First I try to find the text in the anchor. We can use 'find()' for that, otherwise the number of posts would be included.

var orgtxt = $(this).find('a').text();

If orgtxt is not empty we can set our newtxt variable, using javascript 'slice()'

newtxt = orgtxt.slice(2);

If orgtxt is empty we must look for the first span element, using jquery ':first()'

orgtxt = $(this).find('span:first').text();

To replace the original text we use jquery 'html()':

$(this).find('span:first').html(newtxt);

Finally append to the ul of he categories widget:

$(this).appendTo('#cat ul');

It comes all toghether like this:

<script type="text/javascript">
$(document).ready(function() {

$('#Label1 li:contains(*)').remove().each(function(){

var newtxt = '';

var orgtxt = $(this).find('a').text();
if (orgtxt){
newtxt = orgtxt.slice(2);
$(this).find('a').html(newtxt);
}
else
{
orgtxt = $(this).find('span:first').text();
newtxt = orgtxt.slice(1);
$(this).find('span:first').html(newtxt);
}

$(this).appendTo('#cat ul');
})

});
</script>

one step further

All this works very well but I have some form of breadcrumbs in my template and there of coarse the asterixes pop up.
I fixed that like this, the breadcrumbs are in a div with id 'spaces' which holds another div with class 'breadcrumbs'. We select the html of the div with class 'breadcrumbs and put that in a variable.

var txt = $('.breadcrumbs').html();

Now we can apply javascript 'replace()', we replace with label <b>* with 'in category <b>', the asterix must be escaped hence the backslash.

var bt = txt.replace(/with label <b>\*/,'in category <b>');

Now we let jquery replace the complete html string:

$('.breadcrumbs:contains(*)').html(bt);

a final touch

Loading the page and executing the scripts takes some time and you could actually see jquery change the text. To conceal this I put 'display: none;' in the css for '#spaces' and let jquery fade in the breadcrumbs.

$('#places').fadeIn(2000);

Now all I have to do when I want a new category is to put an asterix in front of the label and there it is .

Thanks John, Brandon, Ariel and Jörn!

breadcrumbs in blogger
javascript reference
jquery