Hi,
I am following a tutorial on jQuery and somehow I could not understand
why this one does not work:
$(document).ready(function() {
$('#news-feed').each(function() {
var $container = $(this);
$container.empty();
$.get('news/feed.xml', function(data) {
$('rss item', data).each(function() {
//The link in h5
var $link = $('<a></a>')
.attr('href', $('link',this).text())
.text($('title', this).text());
var $headline = $('<h5></h5>').append($link);
//The publication date
var pubDate = new Date($('pubDate',
this).text());
var pubMonth = pubDate.getMonth() +1;
var pubDay = pubDate.getDate();
var pubYear = pubDate.getFullYear();
var $publication = $('<div></div>')
.addClass('publication-date')
.text(pubMonth +'/'+ pubDay +'/'+
pubYear);
//The publication summary
var $summary = $('<div></div>')
.addClass('summary')
.html($('description', this).text());
$('<div></div>')
.addClass('headline')
.append($headline, $publication,
$summary)
.appendTo($container);
//Setting up the rotator
//$('.headline').eq(0).css('top', 0);
});
});
});
$('div.headline').eq(0).css('top', 0); //THIS DOES NOT WORK
});
whereas this work:
$(document).ready(function() {
$('#news-feed').each(function() {
var $container = $(this);
$container.empty();
$.get('news/feed.xml', function(data) {
$('rss item', data).each(function() {
//The link in h5
var $link = $('<a></a>')
.attr('href', $('link',this).text())
.text($('title', this).text());
var $headline = $('<h5></h5>').append($link);
//The publication date
var pubDate = new Date($('pubDate',
this).text());
var pubMonth = pubDate.getMonth() +1;
var pubDay = pubDate.getDate();
var pubYear = pubDate.getFullYear();
var $publication = $('<div></div>')
.addClass('publication-date')
.text(pubMonth +'/'+ pubDay +'/'+
pubYear);
//The publication summary
var $summary = $('<div></div>')
.addClass('summary')
.html($('description', this).text());
$('<div></div>')
.addClass('headline')
.append($headline, $publication,
$summary)
.appendTo($container);
//Setting up the rotator
//$('.headline').eq(0).css('top', 0);
});
$('div.headline').eq(0).css('top', 0); //THIS WORKS
});
});
});
The HTML source is this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Rotator and Shufflers</title>
<link rel="stylesheet" href="headlineRotator.css" media="screen"
type="text/css">
<script src="jquery.js" type="text/javascript"></script>
<script src="headlineRotator.js"
type="text/javascript"></script>
</head>
<body>
<h3>Recent News</h3>
<div id="news-feed">
<a href="news/index.html">News Release</a>
</div>
</body>
</html>
