Friday, December 15, 2006

Behind the script

Okay I've just altered my template and checked out the result and it seems to work. I'll try and stay non-technical, but this is how it works.

Firstly you need to store the information somewhere, the easiest way for something this small would be a small XML document organised like so:

<book>
<title>My Current book</title>
<author>The author</author>
</book>

However you can't add your own files to blogger, so that's out. So the next best thing is to add this to an existing blog entry. That would work great if the pages were formatted correctly - they're not.

So what I've had to do is read in the entire blog entry, hold it in memory as text, then search it for special key phrases. I can then extract the text between them and just poink it onto the sidebar.

Here's the code for the side bar entry:

<div class="sidebar">
<div class="box"><div class="box2"><div class="box3">
<h2 class="sidebar-title">Current Reading</h2>
<span id="xhead"<</span>
</div></div></div></div>

This has been formatted as per my template, if anyone wants to copy it they'd best look at their own template code for names. I've put it just under my profile, but it can go anywhere you like.

So here's the script, which can be placed just above the body tag in the template

<script type="text/javascript">
function GetCurrent()
{
var xmlhttp=false;
var xdoc="";
var MyCurrentBook="";
var MyCurrentAuthor="";
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}
if (!xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp=false;
}
}

xmlhttp.open("GET", "/2006/12/current-stuff.html",true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
xdoc=xmlhttp.responseText;
MyCurrentBook = String(xdoc.slice(xdoc.indexOf("<currentbook>")+13, xdoc.indexOf("</currentbook>")));
MyCurrentAuthor = String(xdoc.slice(xdoc.indexOf("<currentauthor>")+15, xdoc.indexOf("</currentauthor>")));

aCurrentBook = "<a href='http://www.blogger.com/profile-find.g?t=b&q=" + MyCurrentBook.replace(/ /g,"+") + "'>" + MyCurrentBook + "</a>" + " by " + MyCurrentAuthor;

document.getElementById("xhead").innerHTML=aCurrentBook;

}
}
xmlhttp.send(null);
xmlhttp.close();
}

</script>

Most of that you don't need to worry about, the bits you do need to look at are:

xmlhttp.open("GET", "/2006/12/current-stuff.html",true);

This obviously needs to be replaced with the entry you're storing your information and

MyCurrentBook = String(xdoc.slice(xdoc.indexOf("<currentbook>")+13, xdoc.indexOf("</currentbook>")));
MyCurrentAuthor = String(xdoc.slice(xdoc.indexOf("<currentauthor>")+15, xdoc.indexOf("</currentauthor>")));

this contains the tags that you're looking for; in this case currentbook and currentauthor. To add in your own stuff just alter the names, remembering to add var MyName="" next to the others at the top of the function, and to count the number of letters in it (add 2 for the < and > signs). Then add it as you wish to the end of aCurrentBook and that should be it.

Finally to get the code running add onload="GetFunction()" to the <body> tag

Republish your blog and that should be it.

Now to update your current stuff you just need to edit that one entry and not mess with the sidebar any more.

2 comments:

Suzie Q said...

Thanks! If I ever go back to blogger, I'll know what to do! :)

FlipC said...

No problem, but it should work in Wordpress too. Wordpress seems to use a 2006/12/18/file-name approach, so it depends on what happens when you edit an existing entry (does it move up the timeline or stay where it is). The styles would need changing, but copying one of the 'sideitem' div's and doing a quick edit looks an easy matter. Of course this presupposes that you have access to the template in the first place.

It's really a very simple script, get this page, strip out what you want, paste it here. Provided where you get the page and where you're calling the script from are in the same domain then there's no security restrictions.