AJAX Labels Script

[cuteboytm]

Copy the following script and insert into your template just above the </head> section

<!-- Begin AJAX Categories -->
<style type="text/css">
/* SEARCH/CATEGORY STYLES
----------------------------------------------- */
#indicator {
position: absolute;
z-index: 10000;
padding: 15px 0;
top: 22em;
background-color: #FFFFFF;
border: 1px solid #AAAAAA;
width: 176px;
left: 50%;
margin-left: -88px;
text-align: center;
}

#search-result    {
 border: 1px solid #AAAAAA;
 padding: 10px;
 padding-bottom:30px;
 font-size:85%;
}
.search-result-meta {
 background: #EFEFEF;
 padding: 2px;
}
.search-result-meta img {
 border-width:0;
 vertical-align:text-bottom;
}
.search-title {
 font-size:1em;
 padding-bottom:3px;
 font-weight:bold;
 text-align:left;
 text-decoration:underline;
}
.search-cat {
 display:block;
 padding:3px;
 font-size:1em;
 margin-top:5px;
 margin-bottom:5px;
 border-bottom:1px solid #C0C0C0;
 font-weight:bold;
}
.search-close {
 color:silver;
 float:right;
 border:1px solid #F5F5F5;
 margin-top:10px;
 cursor:pointer;
} 
</style>
<script type='text/javascript'>
//<![CDATA[
var gCat;
function getCat(cat) {
 var url= '/feeds/posts/summary/-/' + cat + '?max-results=5&alt=json';
 var pars = '';
 gCat = cat;
 
 new Ajax.Request(
 url,
 {
 method: 'get',
 parameters: pars,
 onLoading: function(){Element.show('indicator')},
 onSuccess: showCat,
 onFailure: showFail
 });
}

function showCat(output){
 Element.hide('indicator');
 Element.show('search-result');
 $('search-result').innerHTML="";
 var main = string2JSON(output.responseText);
 var xtitle, xcat, xcontent;
 
 var meta = document.createElement('div');
 meta.className="search-result-meta";
 
 var link = document.createElement('a');
 link.href="/feeds/posts/summary/-/"+gCat;
 link.innerHTML = "<img src=\"http://i15.photobucket.com/albums/a355/deepakr/feed-icon.gif\" title=\"Subscribe to this category\" /> Subscribe To " + gCat;
 meta.appendChild(link);
 
 $('search-result').appendChild(meta);
 
 for (i=0; main.feed.entry[i]; i++) {
 xentry = main.feed.entry[i];
 catdisplay = "<div class=\"search-cat\"><span style=\"color:silver;\"> Sorted into:<\/span> ";
 for (var j=0;xentry.category[j];j++) {
      catdisplay = catdisplay + xentry.category[j].term;
 if(j<xentry.category.length-1)
 catdisplay = catdisplay + " , ";
 }
 xtitle=xentry.title.$t;    
 xcontent=xentry.summary.$t;
 xlink=xentry.link[0].href;
 $('search-result').innerHTML = $('search-result').innerHTML + "<h3 class=\"search-title\"><a href=" + xlink + ">" + xtitle + "<\/a><\/h3>";
 $('search-result').innerHTML = $('search-result').innerHTML + xcontent + "...";
 $('search-result').innerHTML = $('search-result').innerHTML + catdisplay + "<\/div>";
 }
 $('search-result').innerHTML = $('search-result').innerHTML + "<div class=\"search-close\" onclick=\"javascript:Element.hide('search-result')\">Click to close<\/div>";
 $('search-result').style.display="block";
}

function string2JSON(str){
 var n;
 //We have to do exception handling here because eval might not work in all cases
 try {
 eval("n="+str);
 }
 catch (e) {
 n= null;
 }
 return n;
}

function showFail(){
 Element.hide('indicator');
 $('search-result').innerHTML="Sorry! The page cannot be loaded.";
 $('search-result').style.display="block"
}
//]]>
</script>
<!-- End AJAX Categories -->

[Derek]

Nice script.