AdaWiki

==== 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|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.

<code php>
<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>
</code>

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 **div**s 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

<code css>
opacity: 0;
display: none;
</code>

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

<code css>
height: 15px
</code>


==== 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's looks like
<code javascript>

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';
	}

}
</code>
AdaWiki

User Tools

Site Tools

Page Tools
