Display image based on date (holidays)

VK · Oct 29 '05, 02:45 PM

Re: Display image based on date (holidays)

Yeah wrote:[color=blue]
> 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.[/color]

Your date ranges for holidays are a bit proprietary but you're the king
I guess...
[color=blue]
> 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![/color]

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 = 'myImageReposit ory/someImage.gif';

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

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

**RobG** · Oct 29 '05, 03:05 PM

Re: Display image based on date (holidays)

VK wrote:
[...][color=blue]
>
> 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();[/color]

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

var theDate = now.getDate();

[...]

--
Rob

**Lee** · Oct 29 '05, 05:55 PM

Re: Display image based on date (holidays)

Yeah said:[color=blue]
>
>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!
>
>[/color]
<html>
<head>
<title>holida y image demo</title>
<script type="text/javascript">

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

function disable(){retur n false}

function setImgByDate(im gRef,dateList) {
imgRef.onload = disable;
var today = new Date();
var month = 1+today.getMont h();
if (month<10) month = "0"+month;
var date = today.getDate() ;
if (date<10) date = "0"+date;
var MMDD = ""+month+da te;
for (var i=0; i<dateList.leng th; i++) {
if (MMDD>=dateList[i][0] && MMDD<=dateList[i][1]) {
imgRef.src = dateList[i][2];
return;
}
}
}
</script>
</head>
<body>
<img src="default.jp g"
onload="setImgB yDate(this,holi day)">
</body>
</html>

**Mick White** · Oct 29 '05, 06:25 PM

Re: Display image based on date (holidays)

Yeah wrote:
[color=blue]
> 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!
>[/color]
<script type="text/javascript">
function H(){
var s=new Date();
var isXmas=
s.getMonth()==1 1 && 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.g if":isXmas?"xma s.gif":"default .gif";
}
onload=H;
</script>

<body>
<img src="default.gi f" name="seasonal" >

You can work out "Halowe'en"
Mick

**Dr John Stockton** · Oct 29 '05, 10:55 PM

Re: Display image based on date (holidays)

JRS: In article <YaL8f.2543$0M1 .467@dukeread12 >, dated Sat, 29 Oct 2005
08:55:39, seen in news:comp.lang. javascript, Yeah <yeah@positive. net>
posted :[color=blue]
>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![/color]

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.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
<URL:http://www.jibbering.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript

**Dr John Stockton** · Oct 30 '05, 05:35 PM

Re: Display image based on date (holidays)

JRS: In article <dk0bdp02bnm@dr n.newsguy.com>, dated Sat, 29 Oct 2005
10:27:21, seen in news:comp.lang. javascript, Lee
<REM0VElbspamtr ap@cox.net> posted :
[color=blue]
> var today = new Date();
> var month = 1+today.getMont h();
> if (month<10) month = "0"+month;
> var date = today.getDate() ;
> if (date<10) date = "0"+date;
> var MMDD = ""+month+da te;[/color]

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.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

Display image based on date (holidays)

Display image based on date (holidays)

Comment

Comment

Comment

Comment

Comment

Comment