Qot[SLoT] 'Widget' - Custom Quotes in Blogger

I've been building a collection of random, off-beat quotations ever since I first sold my soul to Rupert Murdoch and begrudgingly erected a MySpace page. So when I started toying around with Blogger, of course I just had to create a 'widget' (or at least a widget-ish, widgety, widget-like, javascript dealio) that would display my quote collection, one at a time, in the side panel.

First I went searching for pre-existing 'Quote of the Day'-style blogger widgets, but quickly found they were all javascript implementations that demanded either an off-site text file containing the list of quotes, or a hard-coded, in-line version of the same. Neither of these fit my fancy. The first one, after all, would require the author to have a web account somewhere where they could host the file containing the quotes. The second meant hand-coding every quote into a javascript array which - if, like me, you mean to keep adding to your quote collection over time - certainly seems an ugly implementation and a hassle on all fronts. Finally, neither of these solutions provided a reasonable means of displaying the whole collection of quotes at any one time; A feature I felt was sorely lacking.

So I present to you my horrific creation, born of hubris gone awry:

Qot[SLoT]
Quote(s) of the [Some Length of Time]

<div id="QOTSLOT">
<script type="text/javascript">
/* 
Qot[SLoT] - 'Quote(s) of the [Some Length of Time]'
This code scraped together by Roy Tousignant.
Origin: Tuesday, October 21st, 2008.
Last Update: Wednesday, October 28th, 2008.
Stole some code from: www.w3schools.org

I HATE JAVASCRIPT.
*/

// -------------USER CONFIGURED VARIABLES-------------
var quotesPage = 
"http://sortbyz.blogspot.com/2008/10/quotes-of-some-length-of-time.html";
var numBreaks = 2;
// ---------------------------------------------------


var xmlhttp;
function loadXMLDoc(url) {
xmlhttp=null;
if (window.XMLHttpRequest) {
// code for Firefox, Opera, IE7, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject) {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null) {
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else {
document.getElementById('QOTSLOT').innerHTML="Your browser does not support 
XMLHTTP.<br>This application cannot run.";
}
}

function state_Change() {
if (xmlhttp.readyState==4) { // 4 = "loaded"
if (xmlhttp.status==200) { // 200 = "OK"
var quotes = parseData(xmlhttp.responseText);
var ran = Math.floor(Math.random() * quotes.length);

document.getElementById('QOTSLOT').innerHTML=quotes[ran];
}
else {
document.getElementById('QOTSLOT').innerHTML="Problem retrieving data:" + 
xmlhttp.statusText;
}
}
}

function parseData(dataIn) {
var listStart = String.fromCharCode(60)+"div class='post-body entry-content'>";
var listEnd = String.fromCharCode(60)+"div style='clear: both;'>";
var quoteSeperator = String.fromCharCode(60)+"br />";

for(i=1; i!=numBreaks; i++) {
quoteSeperator+=quoteSeperator;
}

var startPos = dataIn.lastIndexOf(listStart) + listStart.length;
var endPos = dataIn.lastIndexOf(listEnd);
var content = dataIn.slice(startPos, endPos);
var quotesArray = content.split(quoteSeperator);
return(quotesArray);
}

loadXMLDoc(quotesPage);

</script>

<i>
Qot[SLoT] is either loading the quote or being viewed in preview mode.
</i>

</div>

<div id="QOTSLOT-footer" style="text-align:right;">
<script type="text/javascript">
var str = "view all"
document.write(str.link(quotesPage));
</script>
</div>

Okay, honestly the name Qot[SLoT] is slightly misleading since, in its unaltered state, the widget just randomly selects a quote to display on each page request. So, in that regard it's more of a 'Quote of the Page Request' widget. But, you know what, it's my widget and I'll name it as I please, damn you!

Instead of pulling its list of quotes from a server-side text file or an in-line javascript array, the QotSlot looks to a post on your Blogger site to generate the content. The idea is: You create a new post on blogger containing all the quotations you want displayed. Once the QotSlot widget is in place and properly configured, each time someone visits your page, QotSlot will fetch the content of that new post you made, parse the data into an array of individual quotations, select one at random, and write it to the page.

Instructions

1.) Create a New Post on your Blogger account and copy and paste your list of quotes into the 'Compose' field. How you layout your quotes in the post is important to how QotSlot will determine where one quote ends and the next one begins. In the default configuration, QotSLoT looks for all quotes to be seperated by two line breaks. For example:

"This is my first quote. If I hit enter twice..."

"That produces two line breaks, resulting in one empty line between quotes."

For another example, you can look at the page containing my list of quotes posted here.

2.) Once the source page is setup you'll need to add the gadget to your site's layout. To add the Qot[SLoT] widget, go to Layout -> Page Elements and click 'Add a Gadget.' From the gadget list, select and add an 'HTML \ Javascript' gadget. Copy and paste the QotSlot code into the 'Content' section of the gadget.

3.) Now locate the 'USER CONFIGURED VARIABLES' section of the code you just pasted and change the 'quotesPage' variable to the address of the blog entry containing your quotes.

4.) The other variable here is the 'numBreaks' variable. 'numBreaks' tells QotSlot how many xml line breaks(<br />) to expect between quotes. If your quotes, themselves, contain grouped line breaks, then you may need to increase the numBreaks value so QotSlot doesn't cut them in half. Bear in mind, of course, that if you tell QotSlot to expect more line breaks - for example three line breaks - between quotes, then your list of quotes will have to reflect that, and each quote will need to be seperated from the next by three breaks (two empty lines) in the body of the post.

5.) Johnny Five is alive.

Things to know

QotSlot will not display quotes when you are viewing your page through one of Blogger's preview windows. Instead it will display the text, "Qot[SLoT] is either loading the quote or being viewed in preview mode." This is by design.

If, at any time, you think the Qot[SLoT] isn't working, the most likely culprit is simply that you came to your page from a part of the Blogger editing console. When you are viewing the live version of your site the 'preview text' should only display momentarily while QotSlot retreives the data from your list of quotes.

That's all I've got for now. Leave me a comment if you're using it, if you encounter an error, or if you update the code.