SimplePie RSS News Ticker with Fade Effect

Here is a method for creating a (random) news ticker that ‘fades’.

Refer to “Simple Way to Random Display or Rotate Content Using JavaScript and CSS”.

In the first section of the article, the script’s author explains how ‘randomly displayed content’ is to be placed ‘into [an] unordered list’.

By modifying the way SimplePie displays a feed, resulting items can be output to an unordered list (vs. paragraph line items).  This is key.

For example:

<div id="ticker">

<?php if ($success): ?>
<? $itemlimit=0; ?>

<ul id="tips">
<?php foreach($feed->get_items() as $item): ?>
<? if ($itemlimit==32) { break; } ?>

<li>
<a href="<? echo $item->get_permalink(); ?>">
<? echo $item->get_title(); ?>
</a>
</li>

<? $itemlimit++ ?>
<?php endforeach; ?>
</ul>

<?php endif; ?>

</div>

You can also style the containing div to prevent content directly below the ticker from shifting up and down on the page:

<style type="text/css">

#ticker {
height:100px;
}

</style>

Here is a related script:

“Easy Slider 1.7 – Numeric Navigation jQuery Slider”

 

Posted in response to: “Looking for a snazzy ticker”

Advertisements

Tags:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: