CODEWITHSUNDEEP
javascriptjquerycsshtmldate
DWTBC
DWTBC

Reputation: 285

Show image with jquery on a specific date and don't show it after this day

I am trying to make some kind of an advent calendar, where an image are shown on a specific date and then remove the day after where a new one is shown.

I have this code

var now = new Date();

var october1 = new Date("October 28, 2015");
var october2 = new Date("October 29, 2015");


if(now > october1) // today is after Christmas
{
     // an id of a div that holds your images?
     $('#div_id').show();
     // or a class of images
     $('.image1').show();
}


if(now > october2) // today is after Christmas
{
     // an id of a div that holds your images?
     $('#div_id').show();
     // or a class of images
     $('.image2').show();
}

This doesn't remove image from the day before, which means on october 29th it will show two images (from the 28th and 29th).

How can I schedule this, so I can show ONE new image each day?

Here is my FIDDLE

Upvotes: 1

Views: 2313

Answers (4)

Abhitalks
Abhitalks

Reputation: 28417

How can I schedule this, so I can show ONE new image each day?

Here is another approach you could take.

Instead of having a large number of img elements in your markup and then checking each day to show/hide those elements, you can just keep a library of your images with dates in an object array and then dynamically show just the image you need in just one img element.

Demo Fiddle: https://jsfiddle.net/abhitalks/0m8Lk5d1/4/

Demo Snippet:

var imageLibrary = [
        {'dt': '20151028', 'src': '//placehold.it/120x120?text=28' }, 
        {'dt': '20151029', 'src': '//placehold.it/120x120?text=29' }, 
        {'dt': '20151030', 'src': '//placehold.it/120x120?text=30' }
    ], 
    showImage, img, today = new Date(), search, 
    d = today.getDate().toString(), 
    m = (today.getMonth() + 1).toString(), 
    y = today.getFullYear().toString()
;
search = y + (m[1] ? m : "0" + m[0]) + (d[1] ? d : "0" + d[0]);
showImage = imageLibrary.filter(function(obj) { return (obj.dt === search); });
img = document.createElement('img');
img.src = showImage[0].src;
document.getElementById('imageWrap').appendChild(img);
<div id="imageWrap"></div>

Upvotes: 1

Shailendra Sharma
Shailendra Sharma

Reputation: 6992

in a simple way

make them hide by css first than use

if (new Date() < new Date(2018,9,28)){  
       $('.image1').show(); // This will show after October 28, 2015
       alert('hi')
   }

   if (new Date() < new Date(2018,9,29)){  //This will show after October 29, 2015
       $('.image2').show();
       alert('hello')
   }

here the fiddle with your code

Upvotes: 0

Virendra Yadav
Virendra Yadav

Reputation: 682

your logic is incomplete

as i understand there are 2 condition 1. you want to show .image1 on 28-oct and 2. .image2 after 28-oct so your login should be like this

if(now > october1 && now<october2) // today is after Christmas
{
     // an id of a div that holds your images?
     $('#div_id').show();
     // or a class of images
     $('.image1').show();
}


if(now > october2) // today is after Christmas
{
     // an id of a div that holds your images?
     $('#div_id').show();
     // or a class of images
     $('.image2').show();
}

Upvotes: -1

P. Frank
P. Frank

Reputation: 5745

You can use toDateString() event and compare if same date. Try:

var now = new Date().toDateString();
var october1 = new Date("October 28, 2015").toDateString();
var october2 = new Date("October 29, 2015").toDateString();


if(now != october1) // today is after Christmas
{
     // an id of a div that holds your images?
     $('#div_id').show();
     // or a class of images
     $('.image1').show();
}


if(now != october2) // today is after Christmas
{
     // an id of a div that holds your images?
     $('#div_id').show();
     // or a class of images
     $('.image2').show();
}
.imageClass {
		display: none;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imageClass image1">
	<img src="http://i.imgur.com/LkmcILl.jpg" />
</div>



<div class="imageClass image2">
	<img src="http://i.imgur.com/bAZWoqx.jpg" />
</div>

You can see more informations here: http://www.w3schools.com/jsref/jsref_todatestring.asp

Upvotes: 1

Related Questions