A project on which I've been working required some nifty trickery and I thought it was something worth sharing. I bet one could easily add some transition effects to make it more nice-looking but the idea's pretty simple; rotate the titles of the articles you want displayed in a handy-dandy little auto-rotator as links to the article content. The code for this view is below.
<style>
#newsBox
{
width: 300px;
vertical-align: bottom;
border: dotted 1px #eee;
padding: 2px;
}
</style>
<div id="newsBox"></div>
<script language="javascript" type="text/javascript">
var NewsArticle = Class.create({
initialize: function(title, url)
{
this.Title = title;
this.Url = url;
}
});
var NewsArticleRotator = Class.create({
initialize: function()
{
this.Articles = new Array();
#foreach($post in $data.PostsByCategory("news",10))
this.Articles.push( new NewsArticle("$post.Title","$post.Url") );
#end
},
rotate: function()
{
var rnd = Math.floor(Math.random()*this.Articles.length);
$('newsBox').innerHTML = '<a onmouseover=\'toggleNewsLink();\' onmouseout=\'toggleNewsLink()\' href=\'' + this.Articles[rnd].Url + '\'>' + this.Articles[rnd].Title + '</a>';
}
});
var isNewsLinkHot = false;
function toggleNewsLink()
{
isNewsLinkHot = !isNewsLinkHot;
if(!isNewsLinkHot)
rotateNews();
}
function rotateNews()
{
if(isNewsLinkHot) return;
var rttr = new NewsArticleRotator();
rttr.rotate();
window.setTimeout(rotateNews, 3000);
}
rotateNews();
</script>
Happy Coding!
Note - Syntax Highlighter is busted and I'm sleepy so it'll look better tomorrow.
Further update - I touched a few files and all seems well again.