Image display based on holidays. Just a little help needed.

Question

jonsan32 12 Junior Poster in Training

10 Years Ago

I'm trying to get this script to work. I want an image displayed based on the current holidays throughout the year. Any help would be great. Thanks a ton!

<script type="text/javascript">
function H(){
var s=new Date();

var isHalloween=
(s.getMonth()==9 && s.getDate()>26) ||
(s.getMonth()==10 && s.getDate()<3);

var isXmas=
(s.getMonth()==9 && s.getDate()>26) ||
(s.getMonth()==10 && s.getDate()<3);

var isNewYear=
(s.getMonth()==11 && s.getDate()>26) ||
(s.getMonth()==0 && s.getDate()<3);

document.images["seasonal"].src=
isNewYear?"http://scientopia.org/blogs/scicurious/files/2010/12/happy-new-year.jpg":isXmas?"http://www.christmas39.com/wp-content/uploads/2011/10/Xmas-Pictures.jpg":isHalloween?"http://img.pcdn.vresp.com/media/5/3/1/5316e5746f/12e4b49333/86530fdfb4/library/halloween1.jpg":"http://dev.w3.org/2007/mobileok-ref/test/data/ROOT/GraphicsForSpacingTest/1/largeTransparent.gif" ;
}
onload=H;
</script>

<body>
<img src="http://dev.w3.org/2007/mobileok-ref/test/data/ROOT/GraphicsForSpacingTest/1/largeTransparent.gif" name="seasonal">

</body>

holiday images javascript

2 Contributors
8 Replies
279 Views
2 Hours Discussion Span
Latest Post 10 Years Ago Latest Post by jonsan32

All 8 Replies

JorgeM 958 Problem Solver

10 Years Ago

What's the error or problem? Seems like its working, but I did have to change the months for the isXmas var. Looks like you had copied/pasted isHalloween.

Update the months to 10 and 11. you have 9 and 10 for Xmas at the moment.

After fixing that, I tested your code, it displays the Halloween picture on the screen.

JorgeM 958 Problem Solver

10 Years Ago

Here is another thread that is similar to this one. It may help you develop this solution.

DaniWeb --> Updating Photos Based on Month

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jonsan32 12 Junior Poster in Training · Answer 1 · 2013-10-31T18:18:01+00:00

That is EXACTLY what happened! Thank you so much. Easiest question ever? :-)

jonsan32 12 Junior Poster in Training · Answer 2 · 2013-10-31T18:29:50+00:00

Actually, one more hiccup. Today being Halloween kinda throws this off, but I tested to see if the date ending factor would play out. It doesn't seem to work if I alter the dates to make the Halloween period ending yesterday. It seems to only be reading the first parameter listed as "greater than" and is not affected by the "less than" statement. Any help for that?

<script type="text/javascript">
function H(){
var s=new Date();


var isHalloween=
(s.getMonth()==9 && s.getDate()>20) ||
(s.getMonth()==9 && s.getDate()<30);


var isXmas=
(s.getMonth()==11 && s.getDate()>10) ||
(s.getMonth()==11 && s.getDate()<26);


var isNewYear=
(s.getMonth()==11 && s.getDate()>29) ||
(s.getMonth()==0 && s.getDate()<5);


document.images["seasonal"].src=
isNewYear?"http://scientopia.org/blogs/scicurious/files/2010/12/happy-new-year.jpg":isXmas?"http://www.christmas39.com/wp-content/uploads/2011/10/Xmas-Pictures.jpg":isHalloween?"http://img.pcdn.vresp.com/media/5/3/1/5316e5746f/12e4b49333/86530fdfb4/library/halloween1.jpg":"http://www.manicalmechanicals.com.au/_borders/blank%20white.jpg" ;
}
onload=H;
</script>
<body>
<img src="http://www.manicalmechanicals.com.au/_borders/blank%20white.jpg" name="seasonal">
</body>

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 3 · 2013-10-31T19:02:07+00:00

I didnt really look at your logic on my previous response so I didnt catch that..sorry..

The problem is your evaluation of the current date. You are using an OR instead of AND.

Basically you are saying if the current date is greater than 20 OR less than 30. The reason why the picture of Halloween is still displayed is because your first condition is TRUE. Today is 31 and 31 is greater than 20. With OR, only one condition has to be true.

Use AND instead.

Here is an example (I had to upload a picture because for some reason, it would this system would not accept the code example...

5f5632e96487152c5519f7c2cf724da5

If you change the date to 30 in the "after" example, the halloween pic is not displayed as expected.

jonsan32 12 Junior Poster in Training · Answer 4 · 2013-10-31T19:18:31+00:00

That is a big help, and definitely works with your specific example. But I can't seem to make it work spanning across 2 different months. I appreciate the teaching as well. Thank you for everything.

<script type="text/javascript">
function H(){
var s=new Date();
var isHalloween=
(s.getMonth()==9 && s.getDate()>29) &&
(s.getMonth()==10 && s.getDate()<3);
var isXmas=
(s.getMonth()==11 && s.getDate()>10) &&
(s.getMonth()==11 && s.getDate()<26);
var isNewYear=
(s.getMonth()==11 && s.getDate()>29) &&
(s.getMonth()==0 && s.getDate()<5);
document.images["seasonal"].src=
isNewYear?"http://scientopia.org/blogs/scicurious/files/2010/12/happy-new-year.jpg":isXmas?"http://www.christmas39.com/wp-content/uploads/2011/10/Xmas-Pictures.jpg":isHalloween?"http://img.pcdn.vresp.com/media/5/3/1/5316e5746f/12e4b49333/86530fdfb4/library/halloween1.jpg":"http://www.manicalmechanicals.com.au/_borders/blank%20white.jpg" ;
}
onload=H;
</script>
<body>
<img src="http://www.manicalmechanicals.com.au/_borders/blank%20white.jpg" name="seasonal">
</body>

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 5 · 2013-10-31T19:30:26+00:00

Yes, spanning months does require additional logic.

The problem with your halloween condition is that the second part is FALSE because we are not in the month that resolves to '10'. So you need to add back in an OR and check to see if you are in month 9 (within the range of days) OR month 10 (within the range of days), but within the ranges you specified. hope you are not confused. See this example... it should be self explanatory..(sorry, i dont know why i cant upload the code).

726168760026dd49fa9f132d4fc84e07

Notice the extra parenthesis around the first two set of ranges. You are saying that both of those have to be TRUE for the first condition to be true. That takes care of it if we are in month #9 which we are. But what about a few days from now when November comes around. We will be in month #10 according to getDate(). We need this part of the condition to be TRUE. In this case now, we dont need both conditions to be TRUE, we only need one of them to be TRUE.

What you ultimately doing with this example is...

If (are we in October 30-31) OR (are we anytime before Nov 3). If either of these are true, then show the halloween pic.

jonsan32 12 Junior Poster in Training · Answer 6 · 2013-10-31T20:12:24+00:00

jonsan32 12 Junior Poster in Training

10 Years Ago

Perfect. You're a genius.

Image display based on holidays. Just a little help needed.

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers