User Tools

Site Tools


tutorials:zencartmods:blog_ticker.html

This is an old revision of the document!


Create a Blog Ticker on your homepage

If you have a blog that generates an rss feed, you can use the rss feed to pull in recent blog posts and post them to your home page.

For this example we'll be using our rss that is generated automatically from Wordpress (http://www.adafruit.com/blog/feed).

PHP DOM

Add this to your template, wherever you'd like to see the ticker. We chose includes/templates/YOUR_TEMPLATE/templates/tpl_index_default.php around line 1.

<div id="ticker" >
<?php
	// Begin blog ticker mod
    	$url = 'http://www.adafruit.com/blog/feed/';    // Change this to your own rss feed
    	$num_posts = 5; // change this to the number of posts that you would like to show
 
	$doc = new DOMDocument();
	$doc->load($url);
	$arrFeeds = array();
	foreach ($doc->getElementsByTagName('item') as $node) {
		$itemRSS = array ( 
			'title' => substr($node->getElementsByTagName('title')->item(0)->nodeValue, 0, 100), // truncate the title to 100 character to fit in our layout
			'link' => $node->getElementsByTagName('link')->item(0)->nodeValue
			);
		$arrFeeds[] = $itemRSS;
		if (count($arrFeeds) >= $num_posts)
			continue;
	}
 
	for ( $i = 0; $i < $num_posts; $i++)  
	{?>
 
		<div class="tickerText" id="tickerText<?php echo $i; ?>">
		Latest Blog Posts: <a href="<?php echo $arrFeeds[$i]['link']; ?>"><?php echo $arrFeeds[$i]['title']; ?></a>
		</div>
	<?php	
	}
?>
<script language="javascript">
tickerFade(<?php echo $num_posts; ?>);
</script>
</div>

Note that for now, you will have a javascript error since tickerFade() hasn't been defined. You could also use jQuery to call tickerFade() on page load, but its important that you call it AFTER the divs are created

Upload it and make sure that you're getting all the posts you want displayed in a row.

CSS

You'll need to CSS the divs so that they fit in to your own template, but if you want it fading in and out you should add to .tickerText

opacity: 0;
display: none;

This way they will all start out on top of each other, and invisible. display:none takes the object out of the css flow, so they'll also all take up 0 space. To combat this, add some height to #ticker

height: 15px

Javascript

We need to make the tickerFade() function now, which we can place in a new files called includes/templates/YOUR_TEMPLATE/jscript/jscript_ticker.js

Here's what our (slightly hacky) code looks like

ticker = 0;
function tickerFade(num_posts)
{
	for( i = 0; i < num_posts; i++)	{
		stringName = 'tickerText' + i ;
		document.getElementById(stringName).style.display = 'none';
	}
	tickerCycle(num_posts);
}
function tickerCycle(num_posts)
{
	fade(ticker, num_posts);
	ticker++;
	ticker = ticker%num_posts;
	setTimeout("tickerCycle()", 5000);
}
 
function fade(tickerNum, num_posts)
{
	fadeIn(tickerNum);
	if(ticker == 0)	{
		fadeOut(num_posts-1);
		outString = "tickerText" + num_posts - 1;
	}
	else	{
		fadeOut(tickerNum-1);
		outString = "tickerText" + (tickerNum-1);
	}
	inString = "tickerText" + tickerNum;
	document.getElementById(inString).style.display = 'inline';
}
alpha = 0;
beta = 100;
function fadeIn(tickerNum)
{
     if( alpha < 100)	{
		alpha += 10;
		thing = "tickerText" + tickerNum;
		document.getElementById(thing).style.opacity = alpha/100;
		document.getElementById(thing).style.filter = 'alpha(opacity=' + alpha + ')';
 
 
		setTimeout("fadeIn("+ tickerNum +")", 50);
	}
	else	{
		alpha = 0;
	}
 
}
function fadeOut(tickerNum)
{
	if( beta > 0 )	{
		beta -= 10;
		thing = "tickerText" + tickerNum;
		document.getElementById(thing).style.opacity = beta/100;
		document.getElementById(thing).style.filter = 'alpha(opacity=' + beta + ')';
		setTimeout("fadeOut("+ tickerNum +")", 50);
	}
	else	{
		beta = 100;
		thing = "tickerText" + tickerNum;
		document.getElementById(thing).style.display = 'none';
	}
 
}
/home/ladyada/public_html/wiki/data/attic/tutorials/zencartmods/blog_ticker.html.1312225319.txt.gz · Last modified: 2016/01/28 18:05 (external edit)