jQuery 1.3 : Headline rotator (part1) - Setting up the page

11/28/2010 7:10:14 PM

For our first rotator example, we'll take a news feed and scroll the headlines, along with an excerpt of the article, into view one at a time. The stories will flow into view, pause to be read, and then slide up and off the page as if there were an infinite ribbon of information rolling over the page.

Setting up the page

At its most basic level, this feature is not very difficult to implement. But as we will soon see, making it production-ready requires a bit of finesse.

We begin, as usual, with a chunk of HTML. We'll place the news feed in the sidebar of the page:

<h3>Recent News</h3>
<div id="news-feed">
<a href="news/index.html">News Releases</a>

So far, the content area of our news feed contains only a single link to the main news page.

This is our graceful degradation scenario, in case the user does not have JavaScript enabled. The content we'll be working with will come from an actual RSS feed instead.

The CSS for this<div> is important as it will determine not only how much of each news item will be shown at a time, but also where on the page the news items will appear. Together with the style rule for the individual news items, the CSS looks like this:

#news-feed {
headline rotatorpage, setting upposition: relative;
height: 200px;
width: 17em;
overflow: hidden;
.headline {
position: absolute;
height: 200px;
top: 210px;
overflow: hidden;

Notice here that the height of both the individual news items (represented by the headline class) and their container is 200px. Also, since headline elements are absolutely positioned relative to #news-feed, we're able to line up the top of the news items with the bottom edge of their container. That way, when we set the property of #news-feed to hidden, the headlines are not displayed initially. overflow

Setting the position of the headlines to absolute is necessary for another reason as well: for any element to have its location animated on the page, it must have either or relative positioning, rather than the default static positioning. absolute

Now that we have the HTML and CSS in place, we can inject the news items from an RSS feed. To start, we'll wrap the code in a .each() method, which will act as an if statement of sorts and contain the code inside a private namespace:

$(document).ready(function() {
$('#news-feed').each(function() {
var $container = $(this);

Normally when we use the .each() method, we are iterating over a possibly large set of elements. Here, though, our selector #news-feed is looking for an ID, so there are only two potential outcomes. The factory function could make a jQuery object matching one unique element with the news-feed ID, or it could find no elements on the page with that ID and produce an empty jQuery object. The .each() call takes care of executing the contained code if, and only if, the jQuery object is non-empty.

At the beginning of our .each() loop, the news feed container is emptied to make it ready for its new content.

Other -----------------
- Benchmarking Current Rankingstages of SEO
- First Stages of SEO : Benchmarking Current Rankings
- First Stages of SEO : Benchmarking Current Indexing Status
- First Stages of SEO : Assessing Historical Progress
- First Stages of SEO : Determining Top Competitors
- Relevant IAM Standards and Protocols for Cloud Services (part 2)
- Relevant IAM Standards and Protocols for Cloud Services (part 1)
- Identity and Access Management : IAM Architecture and Practice
- Identity and Access Management : Why IAM?
- Identity and Access Management : Trust Boundaries and IAM
- Parallel Programming with Microsoft .Net : Parallel Tasks - The Default Task Scheduler
- Parallel Programming with Microsoft .Net : Parallel Tasks - Design Notes
- Parallel Programming with Microsoft .Net : Parallel Tasks - Anti-Patterns
- Parallel Programming with Microsoft .Net : Parallel Tasks - Variations (part 2)
- Parallel Programming with Microsoft .Net : Parallel Tasks - Variations (part 1)
- Parallel Programming with Microsoft .Net : Parallel Tasks - An Example
- Parallel Programming with Microsoft .Net : Parallel Tasks - The Basics
- jQuery 1.3 : The jQuery UI plugin library
- jQuery 1.3 : The Form plugin
- jQuery 1.3 : How to use a plugin
- First look: Apple Watch

- 10 Amazing Tools You Should Be Using with Dropbox

- Sigma 24mm f/1.4 DG HSM Art

- Canon EF11-24mm f/4L USM

- Creative Sound Blaster Roar 2

- Alienware 17 - Dell's Alienware laptops

- Smartwatch : Wellograph

- Xiaomi Redmi 2
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8