Display info based on day [Archive]

View Full Version : Display info based on day

bigalo

08-31-2010, 02:16 PM

Hello,

I need some help. I'm writing a script to display information daily for everyday of the month. Each day it will display a new item (<li>). I have it pretty much working, however, I would like the order to be top down with the latest on the top for ex:

Displayed on webpage:
Info for 08/03/2010
Info for 08/02/2010
Info for 08/01/2010

Any help will be appreciated!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");

var d = new Date();
/*var curr_date = d.getDate();*/
var curr_date = 2;
var curr_month = d.getMonth();
var curr_year = d.getFullYear();

/*document.write(curr_date + "-" + m_names[curr_month] + "-" + curr_year); Print Date*/
/*console.log(curr_month);*/

$(document).ready(function() {

var tips = $('#tips .tipItem');
var incrRel = 1;

$(tips).each(function(){
$(this).attr('rel',incrRel++);
});

$(tips).each(function(i) {
if (curr_month == 7 && curr_date <= i){
$(this).hide();
} else {
$(this).show();
}
});

});

</script>
<style>
.tipItem {border:1px solid #000; background:#ccc; width:300px;height:100px; margin-bottom:10px; list-style:none; padding:10px;}
</style>
<ul id="tips">
<li class="tipItem" style="display: none;">08/01/2010</li>
<li class="tipItem" style="display: none;">08/02/2010</li>
<li class="tipItem" style="display: none;">08/03/2010</li>
<li class="tipItem" style="display: none;">08/04/2010</li>
<li class="tipItem" style="display: none;">08/05/2010</li>

</ul>
</body>
</html>

jscheuer1

09-01-2010, 07:01 AM

In an unrelated matter, since tips is already a jQuery object, there's no need to use $(tips). to preface your each functions, tips. will do just fine. Using $(tips). there is OK, just extra work for the browser.

Later, after I turn it into a true array for the purpose of using the reverse() method on it, $(tips). is required in order for it to be treated as a jQuery object and accept the jQuery appendTo() method. Additions/changes highlighted:

$(document).ready(function() {

var tips = $('#tips .tipItem');
var incrRel = 1;

tips.each(function(){
$(this).attr('rel',incrRel++);
});

tips.each(function(i) {
if (curr_month == 7 && curr_date <= i){
$(this).hide();
} else {
$(this).show();
}
});

tips = $.makeArray(tips);
tips.reverse();
$(tips).appendTo(document.getElementById('tips'));
});

Note: Using jQuery appendTo() or append() with an element already in the DOM moves, rather than copies it.

bigalo

09-01-2010, 11:40 AM

This is great jscheuer1! That is a great point about the $(tips) function. Make perfect sense.

Thanks so much!

bigalo

09-06-2010, 06:04 PM

I'm trying to parse my data from an xml file now and print it out on the page based on date from my existing code. I have that working, with each item formatted the same way on the page What I'd like to do now is alter it a bit to make the most recent (the item listed on the top of the page) formatted differently and the rest of them as it is now. Something like - (if 1st <li> then build html like this else build html like that) I hope this makes sense.

<?xml version="1.0" encoding="utf-8" ?>
<books>
<book title="CSS Mastery" imageurl="http://cdn.net.tutsplus.com/045_LoadXMLWithJquery/images/css.jpg">
<description>
08/01/2010 - Content
</description>
</book>

<book title="Professional ASP.NET" imageurl="http://cdn.net.tutsplus.com/045_LoadXMLWithJquery/images/asp.jpg">
<description>
08/02/2010 - Content
</description>
</book>

<book title="Learning jQuery" imageurl="http://cdn.net.tutsplus.com/045_LoadXMLWithJquery/images/lj.jpg">
<description>
08/03/2010 - Content
</description>
</book>

<book title="Learning jQuery" imageurl="http://cdn.net.tutsplus.com/045_LoadXMLWithJquery/images/lj.jpg">
<description>
08/04/2010 - Content
</description>
</book>

<book title="Learning jQuery" imageurl="http://cdn.net.tutsplus.com/045_LoadXMLWithJquery/images/lj.jpg">
<description>
08/05/2010 - Content
</description>
</book>

</books>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Load XML With jQuery</title>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

$(document).ready(function()
{

/*Gets current date*/
var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");

var date = new Date();
/*var curr_date = d.getDate();*/
var curr_date = 3;
var curr_month = date.getMonth();
var curr_year = date.getFullYear();

$.get('myData.xml', function(d){
/* $('body').append('<h1> Title</h1>');*/
$('#col-a').append('<ul id="tips"/>');

$(d).find('book').each(function(){

var $book = $(this);
var title = $book.attr("title");
var description = $book.find('description').text();
var imageurl = $book.attr('imageurl');

var html = '<li class="tipItem" style="list-style:none;display: none; li">';
html += '<img class="bookImage" alt="" src="' + imageurl + '" /> ';
html += '<p class="title">' + title + '</p>';
html += '<p> ' + description + '</p>' ;
html += '</li>';

$('ul').append($(html));

});

var tips = $('#tips .tipItem');

tips.each(function(i) {
if (curr_month == 8 && curr_date <= i){
$(this).hide();
} else {
$(this).show();
}
});

tips = $.makeArray(tips);
tips.reverse();
$(tips).appendTo(document.getElementById('tips')
);

});
});

</script>

</head>
<body>
<div id="col-a"></div>
</body>
</html>

jscheuer1

09-07-2010, 01:42 AM

See:

http://www.dynamicdrive.com/forums/showthread.php?p=236377#post236377