Coding an animated news ticker with jquery and CSS
January 20th, 2010
Alright, about time that I’m back with a new post! For this tutorial, I’m going to breakdown creating an animated news ticker using a little jquery and CSS. The tutorial is based on a jquery plugin developed by textotela.co.uk, and I recently built it into the homepage of recork.org. If you head over to textotela.co.uk, you’ll notice there are some instructions on installing this plugin. The problem is (being a beginner at jquery), I had a hard time filling in all the blanks that are not described on his website. Therefore, I thought I would break it down for beginners to make it easier to understand and install.
What you’ll need
Download the jquery source files from github.com. Once you’ve downloaded the javascript file (jquery.newsticker.pack.js), upload it to your server. For the purposes of this demo, let’s just upload the file to your root folder and keep everyting in the same directory. Also, if you don’t have jquery on your server, you’ll need to download it from jquery.com. Once you download the file, rename it it jquery.js and place it in your root directory.
Setting up the HTML
Once you’ve uploaded your files, let’s create a new HTML file called index.html. Inside that file, paste the following code into the <head> of your file:
<html>
<head>
<title>ticker</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.newsticker.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#news").newsticker();
});
</script>
</head>
Now head down to the <body> of your file and insert the following code:
<body>
<div id="ticker">
<ul id="news">
<li>News item 1</li>
<li class="loud">News item 2</li>
<li>News item 3</li>
</ul>
</div>
</body>
</html>
HTML explained
These are the main points to keep in mind with the HTML:
- The wrapping
<div id="ticker">can be used if you’d like to give your ticker a background, margin, dimensions. The ticker will still work without this<div>, but you’ll most likely want to leave it in for layout reasons. - Each
<li></li>refers to one news item. Within the<li></li>you can add text, links, etc… They’ll appear in the order you enter them, and you can have as many as you like. The one I setup for recork.org uses 23 different lines. - Once the last item on the list is displayed, it will loop around and start over with the first item.
Adding the CSS
There are a number of ways you can choose to style your ticker. I’ve setup a few basic layout styles here, but please feel free to play around with it. I’m going to keep it simple and do all my backgrounds with css. You might want to try using an image for a background, or perhaps add an icon to the left of your ticker. Also, make sure you paste this code into the <head> of ticker.html, after the javascript links.
<style type="text/css">
#ticker {
background-color: #ebebeb;
border: 1px solid #ccc;
padding: 20px;
}
ul#news {
list-style: none;
margin: 0;
padding: 0;
}
ul#news li {
margin: 0;
}
ul#news li.loud {
font-weight: bold;
}
</style>
CSS explained
I’ve tried to keep the CSS here pretty simple. Here’s a few notes on what I’ve got going on:
- #ticker is the wrapper for the ticker which has a grey background, grey border and is padded 20 pixels.
- ul#news is the unordered list for the ticker. You’ll want to leave those styles as they are, so there is no unwanted margin or bullet points. If you want bullet points, simply change up the list-style: selector to a different value.
- ul#news li are the styles for each individual bullet point. You might want to add some color, or other font styles here.
- ul#news li.loud is a class I setup for news items that you want to stand out more. Adding the class loud to your
<li>will currently make that item bold.
Summary
Once you have all your code setup in index.html, upload the file to your root directory. At this point, it would also be a good idea to move the CSS to your external stylesheet. I wanted to keep this tutorial straight forward, for beginners, so I left everything in one HTML file. That’s it. I’ve shown you how to put together an animated news ticker with a little bit of jquery and CSS. If you have any questions about customizing the ticker further, please feel free to leave them in the comments. Once again, I’d like to thank textotela.co.uk for designing a great plugin. The source files for this tutorial are available from the link below.
Print This Post
Share this post
14 Comments on “Coding an animated news ticker with jquery and CSS”
admin
Thanks, that was kinda my angle with this one. I also found it hard to locate instructions so I thought I would do a post.
March 1, 2010 » 3:02 pm
Sel
Is there any way to have it vertically scroll the text if it is over a given width?
Good example is http://www.spotify.com and their twitter ticker.
April 16, 2010 » 7:31 pm
admin
I’m sure you probably can but unfortunately, I’m not really sure how to do that coding.
April 17, 2010 » 11:51 am
Sel
Dang because your script is REALLY close to being able to do the exact same thing except it just keeps displaying the text instead of scrolling it within a set width.
April 17, 2010 » 11:53 am
Mike
Here’s my issue, everything seems to be working perfectly but when the page loads all of my news articles I want it to cycle through flash on the page for a second and then disappear. Any suggestions?
April 21, 2010 » 10:58 am
Mike
By flash I mean that all of my list content (5 news articles) is briefly visible while the page (I’m guessing) finishes loading. Then once the page is fully loaded the list content disappears and the ticker displays only one article just it’s meant to.
Also, I thought it could be because of the code placement but I’ve tried both having it in the and directly before the but neither fixes it. Interesting!
April 21, 2010 » 12:47 pm
Mike
Sorry, correction…
I’ve tried both having it in the HEAD and directly before the UL but neither fixes it. Interesting!
April 21, 2010 » 12:48 pm
admin
Yep, you’re right. Position of the code in your html file is the cause of this. Mind sending me the link?
April 21, 2010 » 1:09 pm
Mike
It’s hosted on a local testing server. No way to send a link right now. I’ll keep messing with it. Any suggestions where to place the code if not in the HEAD or before the UL?
April 21, 2010 » 1:40 pm
admin
I’d go with putting it in the head so it loads sooner. However, many people will recommend you put your javascript in the footer, right before the </body> tag. This is a special case because you want it to load quickly. Are you loading any other javascript in your head? If so, try putting the link to the ticker js at the top of the list of links.
April 21, 2010 » 2:24 pm
Mike
Alright, I tried putting it at the top of the HEAD and still had the same issue.
Found an easy fix for now using CSS. On the containing div just set overflow: hidden; and voilà! Loads beautifully. Thanks for all your help!
April 21, 2010 » 2:55 pm
Comments
CSS3 Handbook iPhone App
10 tutorials to get you started with CSS3. Topics covered include: round corners, opacity, shadow, shapes, backgrounds, custom border, custom font, text effects, and fading. There is also a comprehensive list of CSS3 properties and which browsers support them.
Available for iPhone, iPad, and iPod Touch for only $2.99 $0.99 SALE. Learn More
Get a Quote
Cardeo is proud to offer custom WordPress theme design & coding. As well as, regular website design services. Click the button below if you'd like a quote.
Categories
Follow me
Mailing List
Stay up to date with all the latest news, apps, and tutorials by joining the mailing list.
me2
excellent direction on how to implement the code. Such a life saver especially after I tried to follow a similar code on a UK site which offers vague instruction and unusable code… Thank you!!
February 28, 2010 » 5:36 pm