Thursday, March 15, 2007

Expanding The Blogger Hierarchy

Blogger/blogspot, where my blog is hosted, recently did an upgrade. One of the new features is the ability to display archived posts in a hierarchical tree. Unfortunately this archive tree displays links to just the last few posts and I want it to display more. If you look at the raw HTML you will find that in fact links the last 40 or so posts have been preloaded but are hidden by default. I wrote this little bit of javascript, which you put just before the end body tag of your template, to display those hidden post links.

<!-- A small script that expands all collapsed items in the blog archive -->
<script type='text/javascript'>
function getElementsByClassName(oElm, strTagName, oClassNames) {
var arrElements = (strTagName == &#39;*&#39; &amp;&amp; oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
var arrRegExpClassNames = new Array();
if (typeof oClassNames == &#39;object&#39;) {
for(var i=0; i < oClassNames.length; i++){
arrRegExpClassNames.push(new RegExp(&#39;(^|\\s)&#39; + oClassNames[i].replace(/\-/g, &#39;\\-&#39;) + &#39;(\\s|$)&#39;));
arrRegExpClassNames.push(new RegExp(&#39;(^|\\s)&#39; + oClassNames.replace(/\-/g, &#39;\\-&#39;) + &#39;(\\s|$)&#39;));
var oElement;
var bMatchesAll;
for(var j=0; j &lt; arrElements.length; j++){
oElement = arrElements[j];
bMatchesAll = true;
for(var k = 0; k &lt; arrRegExpClassNames.length; k++){
if (!arrRegExpClassNames[k].test(oElement.className)) {
bMatchesAll = false;
if (bMatchesAll) {
return (arrReturnElements)

var listItems = getElementsByClassName(document, &#39;li&#39;, &#39;archivedate collapsed&#39;);
for (var i = 0; i &lt; listItems.length; i++) {
listItems[i].className = &#39;archivedate expanded&#39;;

NOTE: The above javascript is in a valid XML format since blogger now XML validates any changes you make to your blogger template.

No comments: