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!

Code:

<!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>

**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:

Code:

$(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.

Code:

<?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>

Code:

<!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/s...377#post236377

Thread: Display info based on day

Thread Tools

Search Thread

Display info based on day

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions