Programming4us
         
 
 
Programming

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>
</div>

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);
$container.empty();
});
});

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
 
 
Most View
- Building Android Apps : Animation - Adding the New Entry Panel
- Windows Server 2008 R2 : Installing Windows SharePoint Services (part 1)
- Managing an Exchange Server 2003 Cluster
- Manage Windows Server 2008 Using Remote Desktop
- Windows Phone7: Deleting a Contact
- jQuery 1.3 : AJAX - Keeping an eye on the request
- Windows Phone 7 Game Development : Orthographic Projection (part 2) - Isometric Projection & Pixel-Aligned Projection
- SOA with .NET and Windows Azure : Service Contracts with WCF (part 3)
- SQL Server 2008 : Data Encryption - SQL Server Key Management
- SharePoint 2010 : Use the Ribbon
Top 10
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 3) - Configuring Recipient Filtering
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 2)
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 1)
- Implementing Edge Services for an Exchange Server 2007 Environment : Installing and Configuring the Edge Transport Server Components
- What's New in SharePoint 2013 (part 7) - BCS
- What's New in SharePoint 2013 (part 6) - SEARCH
- What's New in SharePoint 2013 (part 6) - WEB CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 5) - ENTERPRISE CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 4) - WORKFLOWS
- What's New in SharePoint 2013 (part 3) - REMOTE EVENTS