469,631 Members | 1,218 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,631 developers. It's quick & easy.

Display image based on date (holidays)

I have alternate holiday headers for my web site, and I would like to
display a certain image for an upcoming holiday. Examples:

Christmas 12/10 - 12/26
New Years Eve 12/27 - 1/2
Halloween 10/15 - 11/1
etc. etc.

If the date doesn't fall in any upcoming holiday ranges, then the default
image is displayed.

I've scoured the Web, but not quite able to find anything. Does anyone have
any pointers? Thanks!
Oct 29 '05 #1
6 4254
VK

Yeah wrote:
I have alternate holiday headers for my web site, and I would like to
display a certain image for an upcoming holiday. Examples:

Christmas 12/10 - 12/26
New Years Eve 12/27 - 1/2
Halloween 10/15 - 11/1
etc. etc.
Your date ranges for holidays are a bit proprietary but you're the king
I guess...
If the date doesn't fall in any upcoming holiday ranges, then the default
image is displayed.

I've scoured the Web, but not quite able to find anything. Does anyone have
any pointers? Thanks!

The current day and month on the client machine (assuming her clock is
set right) can be retrieved by using:
var now = new Date();
var day = now.getDay();
var month = now.getMonth();
// where January == 0 and December == 11

A *named* image can be accessed like:
document.images['ImageName'].src = 'myImageRepository/someImage.gif';

Some immediate action upon page is finished to load can be tacken by
using:
<body onload="myFunction()">

I'm leaving the pleasure to write the final solution code on you.

Oct 29 '05 #2
VK wrote:
[...]

The current day and month on the client machine (assuming her clock is
set right) can be retrieved by using:
var now = new Date();
var day = now.getDay();


Day number is good, but date may be more useful... :-)

var theDate = now.getDate();

[...]

--
Rob
Oct 29 '05 #3
Lee
Yeah said:

I have alternate holiday headers for my web site, and I would like to
display a certain image for an upcoming holiday. Examples:

Christmas 12/10 - 12/26
New Years Eve 12/27 - 1/2
Halloween 10/15 - 11/1
etc. etc.

If the date doesn't fall in any upcoming holiday ranges, then the default
image is displayed.

I've scoured the Web, but not quite able to find anything. Does anyone have
any pointers? Thanks!

<html>
<head>
<title>holiday image demo</title>
<script type="text/javascript">

var holiday = [
[ "1015", "1101", "halloween.jpg" ],
[ "1210", "1226", "christmas.jpg" ],
[ "1227", "1231", "newyear.jpg" ],
[ "0101", "0102", "newyear.jpg" ]
];

function disable(){return false}

function setImgByDate(imgRef,dateList) {
imgRef.onload = disable;
var today = new Date();
var month = 1+today.getMonth();
if (month<10) month = "0"+month;
var date = today.getDate();
if (date<10) date = "0"+date;
var MMDD = ""+month+date;
for (var i=0; i<dateList.length; i++) {
if (MMDD>=dateList[i][0] && MMDD<=dateList[i][1]) {
imgRef.src = dateList[i][2];
return;
}
}
}
</script>
</head>
<body>
<img src="default.jpg"
onload="setImgByDate(this,holiday)">
</body>
</html>

Oct 29 '05 #4
Yeah wrote:
I have alternate holiday headers for my web site, and I would like to
display a certain image for an upcoming holiday. Examples:

Christmas 12/10 - 12/26
New Years Eve 12/27 - 1/2
Halloween 10/15 - 11/1
etc. etc.

If the date doesn't fall in any upcoming holiday ranges, then the default
image is displayed.

I've scoured the Web, but not quite able to find anything. Does anyone have
any pointers? Thanks!

<script type="text/javascript">
function H(){
var s=new Date();
var isXmas=
s.getMonth()==11 && s.getDate()>9 && s.getDate()<27;

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

document.images["seasonal"].src=
isNewYear?"ny.gif":isXmas?"xmas.gif":"default.gif" ;
}
onload=H;
</script>

<body>
<img src="default.gif" name="seasonal">

You can work out "Halowe'en"
Mick


Oct 29 '05 #5
JRS: In article <YaL8f.2543$0M1.467@dukeread12>, dated Sat, 29 Oct 2005
08:55:39, seen in news:comp.lang.javascript, Yeah <ye**@positive.net>
posted :
I have alternate holiday headers for my web site, and I would like to
display a certain image for an upcoming holiday. Examples:

Christmas 12/10 - 12/26
New Years Eve 12/27 - 1/2
Halloween 10/15 - 11/1
etc. etc.

If the date doesn't fall in any upcoming holiday ranges, then the default
image is displayed.

I've scoured the Web, but not quite able to find anything. Does anyone have
any pointers? Thanks!


If you were looking for relevant material, rather than just for a
prefabricated exact solution, then you need more practice in scouring.
The FAQ of this newsgroup is on the Web; see below.

Are those partial FFF dates or partial mis-separated ISO ones?

For comparisons, use no date Objects other than for determining the
current month and date; work with pseudo-dates.

Think about whether the dates should be GMT or local to the user or
local to yourself.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
Oct 29 '05 #6
JRS: In article <dk*********@drn.newsguy.com>, dated Sat, 29 Oct 2005
10:27:21, seen in news:comp.lang.javascript, Lee
<RE**************@cox.net> posted :
var today = new Date();
var month = 1+today.getMonth();
if (month<10) month = "0"+month;
var date = today.getDate();
if (date<10) date = "0"+date;
var MMDD = ""+month+date;


No need to build strings from numbers.

PD = month*100 + date // Pseudo-Date

can be compared with Numbers such as 0117 (MLK day) and 1105 (GF night).

Pseudo-Dates can always be used instead of "real" dates when the lengths
of days, months and years are irrelevant.

See via FAQ.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Oct 30 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

24 posts views Thread by PromisedOyster | last post: by
5 posts views Thread by Peter Lapic | last post: by
3 posts views Thread by =?Utf-8?B?QmlsbHkgWmhhbmc=?= | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.