Spry Quote of The Day
I've been on vacation and have enjoyed spending time away from everything programming related (as best I can, which by the way isn't very good), but Monday is back-to-work day for me, but I thought I would get back into it a bit early.
On my iGoogle home page I have a quote of the day widget and I kind of like it but it only displays 3 quotes and it's pretty much static the whole day through. I thought I would create a quote of the day using spry and CF. I could have just pointed spry at the RSS feed but the website specifically asks not to hit it more than once every two hours.
Thats where CF comes in, I will read the rss feed and then write the xml (after a little massaging) to a file on the server and use that file for the rest of the day to serve the quotes. We will output a single quote of the day and rotate through all of the quotes using Spry to get the quote data from CF and Spry effects to fade from one quote to the other.
The idea for this came from the Spry homepage, I saw a rotating quotes from different people on Spry. I thought it would be cool to have the quotes of the day instead.
I got the URL to the QOTD feed and just grabbed the feed, and wrote out only what I wanted to a file on the server.
<cffeed source = "http://feeds.feedburner.com/quotationspage/qotd"
properties = "feedProperties"
query = "qotd">
<cfsavecontent variable="qotdFileXML">
<quotes>
<cfoutput query="qotd">
<quote>
<text>
#mid(content,1,find('"',content,2))#
</text>
<author>
#title#
</author>
<id>
#id#
</id>
</quote>
</cfoutput>
</quotes>
</cfsavecontent>
<cffile action="write" file="#xmlFilePath#qotd.xml" output="#qotdFilexml#">
Since they asked nicely enough not to bombard their server with requests I do a little test first to see if the file exists on the server before doing the cffeed.
<cfset xmlFilePath=expandpath("#application.approot#assets/xml/")>
<cfif not fileExists("#xmlFilePath#qotd.xml") or (datecompare(getFileInfo("#xmlFilePath#qotd.xml").lastmodified,now(),"d") eq 1)>
Otherwise I read the file from the server and return the XML using the returntype="xml" on the cffunction.
The Spry code is pretty simple (and honestly I got most of it from an example on labs).
You will need the following Spry library files in order for this to work.
<script language="JavaScript" type="text/javascript" src="assets/js/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="assets/js/SpryData.js"></script>
<script type="text/javascript" src="assets/js/SpryEffects.js"></script>
<script type="text/javascript" src="assets/js/SpryDOMUtils.js"></script>
and then you only need the following javascript code.
<script language="javascript">
var dsQuotes = new Spry.Data.XMLDataSet("/spry/com/gg/qotd.cfc?method=getQuotes","/quotes/quote");
rotateInterval = 6000;
function rotateQOTD(){
//don't go any further is there aren't any quotes
if (!quotes|| quotes.length < 1)
return;
//create a variable that will point to the current quote element
var curEle;
/*we are add a current index property to our quotes only once since the next time
the function is called it will exist*/
if (typeof quotes.curIndex == "undefined")
quotes.curIndex = quotes.length - 1;
else
curEle = quotes[quotes.curIndex];
//here we increment the current index by one using mod
quotes.curIndex = (quotes.curIndex+1)%quotes.length;
var nextEle = quotes[quotes.curIndex];
//run the fade effect on the current and next element and prepare the timer to run on the next element.
if (curEle)
Spry.Effect.DoFade(curEle, { from: 100, to: 0 });
Spry.Effect.DoFade(nextEle, { to: 100, finish: function(){ setTimeout(function(){ rotateQOTD(); }, rotateInterval); } });
}
function dateLoadedCallback(notificationType, notifier, data)
{
//this observer function is called for every type of notification but we are only interested in the onPostUpdate
if (notificationType =="onPostUpdate"){
//we grab the number of quote div's (this is only available after the data is finished loading)
quotes = Spry.$$(".quote");
//call our rotate function
rotateQOTD();
}
}
//set up an observer to run on the databound region
Spry.Data.Region.addObserver("QOTDRegion",dateLoadedCallback);
</script>
Finally we create our Spry region.
<div spry:region="dsQuotes" spry:repeatChildren="dsQuotes" id="QOTDRegion">
<div class="quote"><em>{text}</em><br>-<a href="{id}">{author}</a></div>
</div>
Oh I almost forgot the style.
<style>
.quote{
width:150px;
background-color:#FFFFCC;
position:absolute;
top:0;
left:0;
opacity: 0;
filter: alpha(opacity=0);
padding:3px;
}
</style>
And that's it you get a rotating quote of the day. I have included the qotd.xml as an enclosure (download icon) if you would like to try it out with a static xml file.
Subscribe
Subscribe via RSS
Follow me on Twitter
Or, Receive daily updates via email.
Tags
adobe air ajax apple cf community cfml coldfusion examples ext flash flex google javascript max2007 max2008 misc open source programming railo software technology ui
Recent Entries
Converting structkeys to lowercase
Blogroll
An Architect's View
CFSilence
Rey Bango
TalkingTree
Wish List
There are no comments for this entry.
[Add Comment]