Ryan Florence Online

• Articles
• Projects
• Contact

News Feed Ticker With MooTools SlideShow

By Ryan Florence, published 2010-06-08

Part of the issue Migrated Articles From Original Site Structure..

Creating an animated news feed, or ticker as they are often called, is a snap with SlideShow.

Skip to the demo!

HTML

First we need to set up the html. Ideally you could generate a feed of articles from a blog, an rss feed, twitter, etc. In the end, keep the HTML simple. I’m going to use my MooTools For Beginners series.

SlideShow takes as it’s first argument an element, and then simply uses every direct child of the element as a slide, we’ll start with a parent DIV and then some anchors as the children.

<div id=articles>

	<a class=article href="http://ryanflorence.com/mootools-for-beginners-part-1-the-basics/">
		<h1>MooTools for Beginners Part 1 – The Basics</h1>
		<p class=date>December 28, 2009</p>
		<p class=content>This is basic tutorial to help get you started with mootools. We’ll be manipulating elements, adding and removing event listeners, and playing with magic.</p>
		<span>Learn More »</span>
	</a>

	<a class=article href="http://ryanflorence.com/mootools-for-beginners-part-2-instantiating-objects-and-managing-state/">
		<h1>MooTools for Beginners Part 2 – Instantiating objects and managing state</h1>
		<p class=date>December 29, 2009</p>
		<p class=content>In part one we made use of Element.tween. A lot of the mootools classes have what I call element shortcuts that look like $('el').tween(), .morph(), .load() etc. Instead of using these shortcuts you can create an instance of these classes in an object and open up a lot more control.</p>
		<span>Learn More »</span>
	</a>
	...
	
</div>

CSS

Style this however you want–but there is one thing to note: you want your slideshow parent element to have overflow: hidden.

body {
	font-family: 'Cantarell', helvetica, arial;
	font-size: 14px;
	background: #fff;
}

#articles {
	/* this is important */
	overflow: hidden;
	
	width: 600px;
	height: 225px;
	background: #eee;
	border: solid 1px #888;
	margin: 55px auto auto;

  background-image: -moz-linear-gradient(top, #f0f0f0, #cccccc); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0f0f0),color-stop(1, #cccccc)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#f0f0f0', EndColorStr='#cccccc'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f0f0f0', EndColorStr='#cccccc')"; /* IE8 */

     -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
          border-radius: 6px;
}

#articles:hover {
	background: #fff;
}

.article {
	/* block level a tags #ftw! */
	display: block;
	text-decoration: none;
	color: #333;
	padding: 10px;
}

.article h1 {
	font-size: 14px;
}

.article span {
	text-decoration: underline;
	color: #027AD7;
	display: block;
}

.article p,
.article h1 {
	margin-top: 8px;
	margin-bottom: 8px;
}

.date {
	font-size: 10px;
}

MooTools JavaScript

SlideShow does all the low level slide show stuff for you, so this JavaScript task is ridiculously simple.

var ticker = new SlideShow('articles', {
	transition: 'pushUp',
	autoplay: true,
	delay: 5000
});

First you pass in the parent element. SlideShow grabs all the children of #articles and makes them the slides. Then pass in a few options. Most notable is the transition ‘pushUp’. That’s what gives it the scroll-down feel.

JavaScript frameworks have made adding interactivity super easy. Unfortunately many webmasters don’t pay much attention to usability. This ticker needs one more block of code to not be irritating. At the moment, the user may hover the ticker to read what the article is about, but if they take too long it’ll switch slides on them. A better experience would be for the slideshow to pause when it is hovered.

$(ticker).addEvents({
	mouseenter: function(){
		ticker.pause();
	},
	mouseleave: function(){
		ticker.showNext().play();
	}
});

First, SlideShow utilizes toElement, which means you can use $(mySlideShowInstanceObject) to access the main element of the slideshow–it’s equivalent to doing $('articles') in this case. Check out Three Things You Should do with an Element-based MooTools Class for more about that.

Second, we add the mouseenter and mouseleave events to the element. Dead simple stuff. Note that on mouseleave we first call showNext. From a usability standpoint, if the user leaves the element they’ve probably spent a few seconds on it already. When the loop starts over again, it’s going to wait the full 5 seconds defined in the options–and that’s annoying. It also provides an interface to quickly move through the slides. Though mousing in and out of an element to navigate is admittedly janky, the user will feel cool that they figured out how it “thinks.” Of course, the best implementation would be to install a timer to see how long they hovered before doing anything to prevent nicking the corner and causing some animation, but that’s for another post.

View the demo, Download SlideShow from the forge or check out his very own website.