...

View Full Version : Display info based on day



bigalo
08-31-2010, 04:13 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>
<!--<li class="tipItem" style="display: none;">08/06/2010</li>
<li class="tipItem" style="display: none;">08/07/2010</li>
<li class="tipItem" style="display: none;">08/08/2010</li>
<li class="tipItem" style="display: none;">08/09/2010</li>
<li class="tipItem" style="display: none;">08/10/2010</li>
<li class="tipItem" style="display: none;">08/11/2010</li>
<li class="tipItem" style="display: none;">08/12/2010</li>
<li class="tipItem" style="display: none;">08/13/2010</li>
<li class="tipItem" style="display: none;">08/14/2010</li>
<li class="tipItem" style="display: none;">08/15/2010</li>
<li class="tipItem" style="display: none;">08/16/2010</li>
<li class="tipItem" style="display: none;">08/17/2010</li>
<li class="tipItem" style="display: none;">08/18/2010</li>
<li class="tipItem" style="display: none;">08/19/2010</li>
<li class="tipItem" style="display: none;">08/20/2010</li>
<li class="tipItem" style="display: none;">08/21/2010</li>
<li class="tipItem" style="display: none;">08/22/2010</li>
<li class="tipItem" style="display: none;">08/23/2010</li>
<li class="tipItem" style="display: none;">08/24/2010</li>
<li class="tipItem" style="display: none;">08/25/2010</li>
<li class="tipItem" style="display: none;">08/26/2010</li>
<li class="tipItem" style="display: none;">08/27/2010</li>
<li class="tipItem" style="display: none;">08/28/2010</li>
<li class="tipItem" style="display: none;">08/29/2010</li>
<li class="tipItem" style="display: none;">08/31/2010</li>
<li class="tipItem" style="display: none;">08/31/2010</li>-->
</ul>
</body>
</html>

Lerura
08-31-2010, 05:54 PM
Invert the list


<li class="tipItem" style="display: none;">08/31/2010</li>
<li class="tipItem" style="display: none;">08/30/2010</li>
<li class="tipItem" style="display: none;">08/29/2010</li>
.......
<li class="tipItem" style="display: none;">08/03/2010</li>
<li class="tipItem" style="display: none;">08/02/2010</li>
<li class="tipItem" style="display: none;">08/01/2010</li>

and use this function


$(document).ready(function() {

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

$(tips).each(function(i) {
if (curr_date+i < tl){
$(this).hide();
} else {
$(this).show();
}
});

});

bigalo
08-31-2010, 07:00 PM
This worked perfectly!!! Exactly what I was looking for!!!

Thanks so much lerura!!!!!


Cheers!!!

harbingerOTV
08-31-2010, 07:17 PM
Or you could continue to write them in correct order and use jQuery to reverse them:



<!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">
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
now = new Date( );
curYear = now.getFullYear();
curMonth = now.getMonth() + 1;
curDay = now.getDate();
eachDay = daysInMonth(curMonth, curYear);

$(document).ready(function() {
for (var i=0;i<eachDay + 1;i++) {
$('.tipItem').each(function(i){
if(i >= curDay){
$(this).hide();
} else {
$(this).show();
}
});
}
var elems = $('ul#tips li');
var arr = jQuery.makeArray(elems);
arr.reverse();
$(arr).appendTo($('ul#tips'));
});
</script>
<style>
.tipItem {border:1px solid #000; background:#ccc; width:300px;height:100px; margin-bottom:10px; list-style:none; padding:10px;}
.hide { display: none; }
</style>
<ul id="tips">
<li class="tipItem">08/01/2010</li>
<li class="tipItem">08/02/2010</li>
<li class="tipItem">08/03/2010</li>
<li class="tipItem">08/04/2010</li>
<li class="tipItem">08/05/2010</li>
<li class="tipItem">08/06/2010</li>
<li class="tipItem">08/07/2010</li>
<li class="tipItem">08/08/2010</li>
<li class="tipItem">08/09/2010</li>
<li class="tipItem">08/10/2010</li>
<li class="tipItem">08/11/2010</li>
<li class="tipItem">08/12/2010</li>
<li class="tipItem">08/13/2010</li>
<li class="tipItem">08/14/2010</li>
<li class="tipItem">08/15/2010</li>
<li class="tipItem">08/16/2010</li>
<li class="tipItem">08/17/2010</li>
<li class="tipItem">08/18/2010</li>
<li class="tipItem">08/19/2010</li>
<li class="tipItem">08/20/2010</li>
<li class="tipItem">08/21/2010</li>
<li class="tipItem">08/22/2010</li>
<li class="tipItem">08/23/2010</li>
<li class="tipItem">08/24/2010</li>
<li class="tipItem">08/25/2010</li>
<li class="tipItem">08/26/2010</li>
<li class="tipItem">08/27/2010</li>
<li class="tipItem">08/28/2010</li>
<li class="tipItem">08/29/2010</li>
<li class="tipItem">08/30/2010</li>
<li class="tipItem">08/31/2010</li>
</ul>
</body>
</html>

bigalo
09-01-2010, 01:42 PM
This is great as well harbingerOTV! I think I will put them back in regular order and reverse.


Thank you so much!

bigalo
09-06-2010, 08:02 PM
Hello,

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>

Spudhead
09-07-2010, 10:33 AM
each() includes an index parameter (http://api.jquery.com/each/).

You could look at that, and output different HTML if the index is 0:


$(d).find('book').each(function(index, element){

var $book = $(this);
var title = $book.attr("title");
var description = $book.find('description').text();
var imageurl = $book.attr('imageurl');
if (index == 0){
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>';
}else{
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));
});



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum