www.webdeveloper.com
Results 1 to 5 of 5

Thread: Looking for help with the date object

  1. #1
    Join Date
    Jul 2009
    Posts
    2

    Looking for help with the date object

    I'm not a js pro. I know how to display the date, even yesterday's date. But I'm struggling with a more advanced issue (advanced in relation to my meager level of javascriptness).

    I want to use the date for today as well as past dates to load images from our server.

    On the server, we have images named by the date, and this is the convention: 090721.jpg

    So the year, month, day.

    I'd like to put together a script that will dive into the server and pull out the last 10 images by date, display those images as well as their corresponding date. A new image is generated every day.

    Is anyone aware of a script that already exists that will do that? Or can anyone point me in the right direction?

    Thanks

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Code:
    Date.prototype.rollBack = function(days){
      this.setTime(this.getTime() - (1000 * 60 * 60 * 24 * (days||1) ) );
     return this;
    }
    
    function addImages(targ) {
    	function pad (n) {
    	  return ("000" + n).slice(-2);
    	}
    	var d = new Date, t = d.getDate();
    	for (var i = 0; i < 10; i++) {
    	  d.rollBack();
    	  var paf = d.getFullYear().toString().slice(-2) + pad(d.getMonth() + 1) + pad(d.getDate());
    	  var img = new Image;
    	  img.src = paf;
    	  targ.appendChild(img);
    	}//nxt
    }//end addIamges()
    
    //usage:
    addImages(document.body);
    change document.body to the element where you want the images...

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,380

    Lightbulb

    I hate it when someone (rnd_me) types faster than me.

    Anyway, so the script doesn't go to waste, here's an alternate version.

    Looks like 'rnd_me's version is a little more compact.

    Code:
    <html>
    <head>
    <title>Last 10 Days Images</title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?p=1022661#post1022661
    
    var DaysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
    
    function SetImages() {
      var now = new Date();
    //  var now = new Date('2009','0','5');			// for testing purposes
      var mm = now.getMonth();      var smm = '';
      var dd = now.getDate();       var sdd = '';
      var yy = now.getFullYear();   var syy = '';
      var then = new Date();
      var imgID = '';
      var imgFile = '';
    //  var imgFiles = [];					// for testing purposes
      for (var i=0; i<10; i++) {
        smm = pad(mm+1);    sdd = pad(dd);    syy = pad(yy);
        imgID = 'img'+i;
        imgFile = (''+syy).substring(2)+smm+sdd+'.jpg';
    //    imgFiles.push(imgID+' : '+imgFile);		// for testing purposes
        document.getElementById(imgID).src = imgFile;
        document.getElementById(imgID).alt = imgFile;
        then = new Date(yy,mm,dd);
        mm = then.getMonth();    dd = then.getDate()-1;    yy = then.getFullYear();
        if (mm < 0) { mm = 11; } 
        if (dd <= 0) { dd = DaysInMonth[mm];  mm--; }
        if (mm < 0) { mm = 11;  yy--; } 
      }
    //  alert(imgFiles.join('\n'));				// for testing purposes
    }
    function pad(value) {
        return value=(value < 10)?'0'+value:value;
    }
    
    </script>
    </head>
    <body onload="SetImages()">
    <div>
     <img id="img0" src="" alt="" height="100" width="100">
     <img id="img1" src="" alt="" height="100" width="100">
     <img id="img2" src="" alt="" height="100" width="100">
     <img id="img3" src="" alt="" height="100" width="100">
     <img id="img4" src="" alt="" height="100" width="100">
    <br>
     <img id="img5" src="" alt="" height="100" width="100">
     <img id="img6" src="" alt="" height="100" width="100">
     <img id="img7" src="" alt="" height="100" width="100">
     <img id="img8" src="" alt="" height="100" width="100">
     <img id="img9" src="" alt="" height="100" width="100">
    </div>
    </body>
    </html>
    Maybe off once every 4 years around February.
    Could add a 'leap year' function check if really necessary.

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there eddiejgonzalez,

    and a warm welcome to these forum.

    Here is my little effort for you to try...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>display images</title>
    
    <style type="text/css">
    
    /*  .image_div applies attributes to all divs that contain the images  */
    
    .image_div {
        width:300px;
        border:1px solid #000;
        text-align:center;
     }
    
    /*   #d0 to #d9  are the individual divs that contain the images  */
    
    #d0 {
        width:150px;
        margin-bottom:5px;
        background-color:#f00;
     }
    #d9 {
        width:450px;
        margin:10px auto;
        background-color:#0f0;
     }
    
    /*  .pics applies attributes to all  the images  */
    
    .pics {
        display:block;
        padding-bottom:10px;
        margin:auto;
     }
    /*   #i0 to #i9  are the attributes for each image  */
    #i3 {
        padding:5px;
        border:3px double #000;
        background-color:#f0f;
     }
    
    /*   #s0 to #s9  are the attributes for each span  */
    
    #s4 {
        color:#00f;
     }
    </style>
    
    <script type="text/javascript">
    
    function displayImages() {
    
       pic=new Array(10);
       imagename=[];
       dv=[];
       sp=[];
       dt=[];
    
       imageDir='images/';       /*  change this value to the appropriate directory  */
    
       d=new Date();
       month=String(d.getMonth()+1);
       day=String(d.getDate());
       year=String(d.getUTCFullYear());
     
    for(c=0;c<pic.length;c++){
    if((month)<10){
       imagename[c]='0'+month; 
       dt[c]='0'+month+' - ';
     }
    else {
       imagename[c]=month; 
       dt[c]=month+' - ';
     }
    if(d.getDate()<10){
       imagename[c]=imagename[c]+'0'+(day-c);
       dt[c]=dt[c]+'0'+(day-c);
     }
    else {
       imagename[c]=imagename[c]+(day-c);
       dt[c]=dt[c]+(day-c);
     }
       imagename[c]=year.substr(2)+imagename[c]; 
       dt[c]=year.substr(2)+' - '+dt[c];
    
       dv[c]=document.createElement('div'); 
       dv[c].setAttribute('id','d'+c);
       dv[c].className='image_div';
    
       sp[c]=document.createElement('span'); 
       sp[c].setAttribute('id','s'+c);
       sp[c].appendChild(document.createTextNode(dt[c]));
    
       pic[c]=document.createElement('img');
       pic[c].className='pics'; 
       pic[c].setAttribute('id','i'+c);
       pic[c].setAttribute('src',imageDir+'.jpg'); 
       pic[c].setAttribute('alt',imagename[c]+'.jpg'); 
    
       dv[c].appendChild(pic[c]); 
       dv[c].appendChild(sp[c]); 
    
       document.getElementById('container').appendChild(dv[c]);        
      }
     }
    if(window.addEventListener) {
       window.addEventListener('load',displayImages,false);
     }
    else {
    if(window.attachEvent) {
       window.attachEvent('onload',displayImages);
      }
     }
    </script>
    
    </head>
    <body>
    
    <div id="container"></div>
    
    </body>
    </html>
    
    coothead

  5. #5
    Join Date
    Jul 2009
    Posts
    2

    Thanks for the help!

    Thanks folks for the help and direction. Coothead's script (and css) seemed to fit quite well with what I was looking for. I've got it basically working now; just need to adjust the styling and get the images clickable so the user can bring up a pdf that corresponds with the image. I believe I can tackle that myself.

    Thanks again.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles