Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2008
    Location
    North Carolina
    Posts
    58
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Question Display info based on day

    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>

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    Invert the list

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

    Code:
    $(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();
    		  } 
      	});
    	
     });

  • Users who have thanked Lerura for this post:

    bigalo (08-31-2010)

  • #3
    New Coder
    Join Date
    Apr 2008
    Location
    North Carolina
    Posts
    58
    Thanks
    17
    Thanked 0 Times in 0 Posts
    This worked perfectly!!! Exactly what I was looking for!!!

    Thanks so much lerura!!!!!


    Cheers!!!

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Or you could continue to write them in correct order and use jQuery to reverse them:

    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">
    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>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    bigalo (09-01-2010)

  • #5
    New Coder
    Join Date
    Apr 2008
    Location
    North Carolina
    Posts
    58
    Thanks
    17
    Thanked 0 Times in 0 Posts
    This is great as well harbingerOTV! I think I will put them back in regular order and reverse.


    Thank you so much!

  • #6
    New Coder
    Join Date
    Apr 2008
    Location
    North Carolina
    Posts
    58
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Question Parsing data from an xml file

    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.

    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>

  • #7
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    each() includes an index parameter.

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

    Code:
    $(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));
    });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •