«

I'm the webmaster for a recreational organization. As part of one page of the
site, I have an HTML "Calendar at a Glance" of the organization's events for
the month. It's a simple table of a calendar, 7 across by whatever needed
down, and I manually create it each month - not a big deal.

Every day I go in and darken the background color of the current day's cell
by changing the appropriate <TD> entry to <TD bgcolor="c63800"> and uploading
the page. Takes well under a minute start to finish. Thus the calendar
gradually changes color over the course of the month, with the past dates dark
and the future dates lighter and thus more apparent to the eye.

But I have to ask if there's a nifty way in which this might be done
automatically, based on the current day and the number (the day of the month)
that follows the <TD> entry.

A typical "before" entry is

<TD>23<br>Peet's Coffee, Newport Beach<br><br>8 AM: Don<br>9 AM: Molly</TD>

and an "after" entry is

<TD bgcolor="c63800">23<br>Peet's Coffee, Newport Beach<br><br>8 AM: Don<br>9
AM: Molly</TD>

I don't pretend to be a javascript heavy, but can usually stumble my way
through a task given some words of wisdom. Is this "doable"?







Art
Temporary usercode - to be deleted when spam starts. Use MyBrainHurts at this ISP to reach me

"Arthur Shapiro" wrote
> Every day I go in and darken the background color of the current day's
cell
> by changing the appropriate <TD> entry to <TD bgcolor="c63800">
> But I have to ask if there's a nifty way in which this might be done
> automatically, based on the current day and the number (the day of the
> month) that follows the <TD> entry.
> A typical "before" entry is
>
> <TD>23<br>Peet's Coffee, Newport Beach<br><br>8 AM: Don<br>9
> AM: Molly</TD>
>
> and an "after" entry is
>
> <TD bgcolor="c63800">23<br>Peet's Coffee, Newport Beach<br><br>8
> AM: Don<br>9 AM: Molly</TD>

First thought is to automate this on the server of course, but you don't
seem to do anything serverside. Turning to javascript for this will leave
users who have no javascript with a dull calendar where every day looks the
same.
Second thought is to use a class rather than bgcolor and specify the color
in a stylesheet. Not sure about the direct benefit of this tho.

Well, if all days start with the date's number right after the <TD> opening
tag (even whitespace in between may be a problem for some browsers) and the
whole table has an id, such as <table id="calendar">, then you could put
this right after the </table> tag:

<script type="text/javascript">
var now=new Date().getDate();
var td=document.getElementById('calendar').cells, i=td.length;
while ( i-- ) {
if ( td[i].firstChild.nodeValue <= now ){ td[i].bgColor = '#c63800'; }
}
</script>

td[n].firstChild would be the textnode, its value the text, ie. everything
up to the first <br>. This is compared to the variable "now", which today
for example is 29, and if smaller or equal (you say you change the current
day), the color is applied to the cell. Marking today in gold would take one
more line:
if ( td[i].firstChild.nodeValue < now ){ td[i].bgColor = '#c63800'; }
if ( td[i].firstChild.nodeValue == now ){ td[i].bgColor = '#ffd700'; }

hth
--
Ivo

In article <41d225ad$0$4590$>, "Ivo" <> wrote:

>Well, if all days start with the date's number right after the <TD> opening
>tag (even whitespace in between may be a problem for some browsers) and the
>whole table has an id, such as <table id="calendar">, then you could put
>this right after the </table> tag:
>
><script type="text/javascript">
>var now=new Date().getDate();
>var td=document.getElementById('calendar').cells, i=td.length;
>while ( i-- ) {
> if ( td[i].firstChild.nodeValue <= now ){ td[i].bgColor = '#c63800'; }
>}
></script>

Very, very interesting...thank you! My only problem is that this script
happens to also change the color of the heading line that spans the top width
of the table ("December at a Glance") and the cells "Sunday"..."Saturday" that
are the top row above the actual date cells. But I think this gives me enough
ammunition to work with, to see if I can avoid affecting cells whose data
doesn't start with numeric tokens.

I'm most appreciative of your excellent suggestions. Clearly I'm going to
have to learn some more of this scripting "magic".

I guess the one laughably silly question is why the script should follow the
table in question; I don't appreciate yet when something goes fairly globally
in the html document, and when it immediately precedes or immediately follows
information in the document.

Art
Temporary usercode - to be deleted when spam starts. Use MyBrainHurts at this ISP to reach me

"Arthur Shapiro" wrote
> "Ivo" wrote:
> >Well, if all days start with the date's number right after the <TD>
opening
> >tag (even whitespace in between may be a problem for some browsers) and
the
> >whole table has an id, such as <table id="calendar">, then you could put
> >this right after the </table> tag:
> >
> ><script type="text/javascript">
> >var now=new Date().getDate();
> >var td=document.getElementById('calendar').cells, i=td.length;
> >while ( i-- ) {
> > if ( td[i].firstChild.nodeValue <= now ){ td[i].bgColor = '#c63800'; }
> >}
> ></script>
>
> Very, very interesting...thank you! My only problem is that this script
> happens to also change the color of the heading line that spans the top
width
> of the table ("December at a Glance") and the cells "Sunday"..."Saturday"
that

Semantically speaking, shouldn't those cells be TH rather than TD elements?
That would exclude them from the coloring function, and you can style them
separately with CSS.

> I guess the one laughably silly question is why the script should follow
the
> table in question; I don't appreciate yet when something goes fairly
globally
> in the html document, and when it immediately precedes or immediately
follows
> information in the document.

The script as is runs when the browsers finds it, because it is not put in a
function. The statements are simply there to be executed straight away. You
could wrap the whole in a function, put that function in the document's head
or an included file and call it onload. The only important thing is that the
element with id 'calendar' has to be there before the script sets off to
avoid error and failure. That is why I suggest putting the script after the
table, that way you can run it *before* the page finishes loading and most
users will never even see the uncolored table.

Ivo

In article <41d23192$0$27895$>, "Ivo" <> wrote:

>Semantically speaking, shouldn't those cells be TH rather than TD elements?
>That would exclude them from the coloring function, and you can style them
>separately with CSS.

The Day names are, in fact, TH elements. They still seem to have been
affected by the script. But I'll klutz around as time permits - I'm sure this
can be made to work. If you care, the calendar is on the page
http://www.ocrebels.com/rides.htm although that page does not include your
script - I'm obviously going to work with it at my end until it functions as I
desire.



Art
Temporary usercode - to be deleted when spam starts. Use MyBrainHurts at this ISP to reach me

Ivo wrote:
<snip>
> <script type="text/javascript">
> var now=new Date().getDate();
> var td=document.getElementById('calendar').cells, i=td.length;
> while ( i-- ) {
> if ( td[i].firstChild.nodeValue <= now ){ td[i].bgColor =
> '#c63800';
> }
> }
<snip>

Doesn't - getDate - return the (client) local date? I would have thought
that there is a time zone problem in this script (that may elude the OP
if not mentioned, as local testing would not expose it).

Richard.

"Arthur Shapiro" wrote
> "Ivo" wrote:
> >Semantically speaking, shouldn't those cells be TH rather than TD
elements?
> >That would exclude them from the coloring function, and you can style
them
> >separately with CSS.
>
> The Day names are, in fact, TH elements. They still seem to have been
> affected by the script.

My mistake. I was mixed up between x.getElementsByTagName('td') and x.cells
which also collects TH elements. The first is the standard way, but the
latter is much faster and better supported among browsers.

> But I'll klutz around as time permits - I'm sure this
> can be made to work.

Without doubt:

while ( i-- ) {
day=td[i].firstChild.nodeValue;
if ( /^\d/.test(day) && day <= now ){ td[i].bgColor = '#c63800'; }
}

The bit that reads /^\d/.test(day) is a regular expression which will
evaluate to true for strings starting with a digit and false otherwise. This
should solve the issue as long the content in the TH cells starts with
letters. I have copied your table together with the script to a temporary
testpage at http://4umi.com/web/javascript/arthur.htm; the changes to the
HTML I made were adding the id to the table, correcting a typo at 8 December
and removing all bgcolors.
hth
--
Ivo

Ivo wrote:
> "Arthur Shapiro" wrote
>
>>"Ivo" wrote:
>>
>>>Semantically speaking, shouldn't those cells be TH rather than TD
>
> elements?
>
>>>That would exclude them from the coloring function, and you can style
>
> them
>
>>>separately with CSS.
>>
>>The Day names are, in fact, TH elements. They still seem to have been
>>affected by the script.
>
>
> My mistake. I was mixed up between x.getElementsByTagName('td') and x.cells
> which also collects TH elements. The first is the standard way, but the
> latter is much faster and better supported among browsers.

Another way is to put the heading stuff in a thead element, then put
the dates in a tbody. Locate the tbody using the script and go from
there. It will exclude any elements in the thead or tfoot.

Incidentally, tables are supposed to have tbody tags, but since almost
no one puts them in the HTML, browsers just put 'em where it seems
appropriate.

--
Rob

In article <41d25c2c$0$45959$>, "Ivo" <> wrote:

>Without doubt:
>
>while ( i-- ) {
> day=td[i].firstChild.nodeValue;
> if ( /^\d/.test(day) && day <= now ){ td[i].bgColor = '#c63800'; }
>}
>
Thank you again! I was going to fool with regular expressions after work
today, and you beat me to it.

Your table displays cleanly in IE, but not in Firefox. I'll be checking my
settings later today. And there's some additional corruption in Firefox. But
I'm sure I can reason things out at this point. This has all been very
interesting, and tells me that the more Javascript I can learn, the better
things will be.

The comment about time zones was valid, but fortunately not a realistic
concern for our local organization.

I'm most appreciative of the assistance.

Art
Temporary usercode - to be deleted when spam starts. Use MyBrainHurts at this ISP to reach me

Arthur Shapiro wrote:
[...]
> Your table displays cleanly in IE, but not in Firefox. I'll be checking my
> settings later today. And there's some additional corruption in Firefox. But

Try:

if ( /^\d/.test(day) && day <= now ) {
td[i].style.backgroundColor = '#c63800';
}

--
Fred