Creating a news ticker
This recipe will show you how to create a simple news ticker with a stop/pause functionality. A news ticker is a great way to display a lot of information such as tweets, quotes, or general news items in a small space.
Getting ready
Once again, you are going to need to create three files. Create recipe-2.html
, recipe-2.css
, and recipe-2.js
in the same directory as the latest version of jQuery.
How to do it…
Carry out the following step-by-step instructions to create an animated news ticker:
Add the following HTML code to
recipe-2.html
to create a simple web page and content for our ticker:<!DOCTYPE html> <html> <head> <title>Chapter 6 :: Recipe 2</title> <link href="recipe-2.css" rel="stylesheet" type="text/css" /> <script src="jquery.min.js"></script> <script src="recipe-2.js"></script> </head> <body> <div class="header"> <h1>CONTENT TICKER</h1> </div> <...