Copy the following script and insert into your template just above the </head> section
Code:
<!-- 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 -->