Goodies to Go ™
July 28, 2003–Newsletter #243
This newsletter is part of the internet.com network.
http://www.internet.com
Featured this week:
* Goodies Thoughts – An Eventful Year
* Q & A Goodies
* News Goodies
* Goodies Peer Reviews
* Feedback Goodies
* And Remember This…
Goodies Announcement
Just in case you missed
it before, the new Beyond HTML Goodies book is now available!
Go beyond the basics
and learn how the pros add and use dynamic HTML features and advanced
JavaScript techniques. Beyond HTML Goodies demonstrates dozens of new and
different features readers can add to their existing Web pages using HTML and
JavaScript. The book starts with simple text and image tips, such as adding a
clock to a Web page or causing text to appear when the mouse moves over an
image. It gradually builds to more complex tricks, including manipulating forms
or working with cookies behind the scenes. Throughout the book, readers enjoy
Joe’s snappy style and “to the point” discussion of each “goody” in the book.
http://books.internet.com/books/0789727803
Goodies Thoughts – An Eventful Year
There are lots of ways to keep track of this that are happening in your life.
You could keep a journal, which to us, of course, means sitting down at a
computer keyboard and using a suitable program for tracking journal entries.
Ideally, such a program would be web-based. Now we’re cooking! There are still
those who use the paper type of journal, but our image of them would see them
sitting in a rocking chair on the front porch with knitting and a glass of
lemonade on the table by their side and a pencil in their hand as they peer over
glasses hanging precariously on the end of their nose. I for one have been using
a computer for so long that I think I have almost forgotten how to operate a
pencil!
The highlights of a year could all be placed on one page. These events could be
highlit to point out the history of times past of the calendar of events to
come. A convenient way to illustrate the year would be to place the whole year
on one page with each date that has an event associated with it being highlit,
and with a nice little description of the event popping up as the mouse moves
over the date. Sound good?
I’m sure that you all know exactly how to accomplish this, but just in case
you’ve temporarily mislaid your notes, or some such thing, I thought you might
like a handy piece of JavaScript. (As with all code in this newsletter, you must
remember to edit the "less than" signs – see the note at the beginning of the
Q&A Goodies section.)
Put this part into your page’s <HEAD> section:
<HEAD>
<style type="text/css">
body {
background-color : #effeff;
}
div.hol {
background-color : yellow;
}
td.outer {
cellpadding : 1em;
border : solid blue;
}
table.inner {
background-color : #efefdd;
font-size : 8pt;
}
</style>
<script type="text/javascript">
var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var daycounts = [31,28,31,30,31,30,31,31,30,31,30,31]; //for leap years,
remember to set february to 29 days
//2002 firstdays = [1,4,4,0,2,5,0,3,6,1,4,6];
var firstdays = [2,5,5,1,3,6,1,4,0,2,5,0];
//2004 firstdays = [3,6,7,3,5,1,3,6,2,4,0,2];
// This is where you put in the events.
// Follow pattern: [fromday,frommonth,today,tomonth,message]
var apps = [
[28,7,28,7,"Got Script from Goodies To Go!"],
[1,1,1,1,"New Year’s Day"],
[1,3,31,3,"The whole month of March has been highlit!"],
[21,12,30,12,"Christmas with family"]
];
function CheckDate(month,dayno)
{
var retval = new String(dayno);
var m = month + 1;
for(var app = 0; app < apps.length; app++)
{
if(m == apps[app][1] ) //first month
{
if(apps[app][3] – apps[app][1] > 0)
{
if(dayno >= apps[app][0])
{
retval = "<div class=’hol’ title=’" + apps[app][4] + "’>" + dayno + "</div>";
}
}
else
{
if(dayno >= apps[app][0] && dayno <= apps[app][2])
{
retval = "<div class=’hol’ title=’" + apps[app][4] + "’>" + dayno + "</div>";
}
}
}
else if(m == apps[app][3]) // second month
{
if(dayno <= apps[app][2])
{
retval = "<div class=’hol’ title=’" + apps[app][4] + "’>" + dayno + "</div>";
}
}
else if( m > apps[app][1] && m < apps[app][3] )
{
retval = "<div class=’hol’ title=’" + apps[app][4] + "’>" + dayno + "</div>";
}
}
return retval;
}
function PrintMonth(month)
{
var done = false;
var day = 0;
document.write("<table class=’inner’><caption><b>" + months[month] +
"</b></caption><thead>");
document.write("<th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></thead>");
while(!done)
{
document.write("<tr>");
PrintWeek(month,day, firstdays[month], daycounts[month]);
document.write("</tr>");
day = day + 7;
if( day > daycounts[month] + firstdays[month])
{
done = true;
}
}
document.write("</tbody></table><p>");
}
function PrintWeek(monthno,start,min,max)
{
var d;
var desc;
for(var j = 0; j < 7; j++)
{
document.write("<td>");
d = start + j;
if(d >= min && d < max + min)
{
desc = CheckDate(monthno,d – min + 1);
document.write(desc);
}
document.write("</td>");
}
}
</script>
</HEAD>
Excellent! Now put this part into the <BODY> of your page:
<BODY>
<center><h1>2003 Calendar</h1></center>
Hold mouse over date to see message
<table>
<tr>
<td class="outer">
<script type="text/javascript">
PrintMonth(0);
</script>
</td>
<td class="outer">
<script type="text/javascript">
PrintMonth(1);
</script>
</td>
<td class="outer">
<script type="text/javascript">
PrintMonth(2);
</script>
</td>
</tr>
<tr>
<td class="outer">
<script type="text/javascript">
PrintMonth(3);
</script>
</td>
<td class="outer">
<script type="text/javascript">
PrintMonth(4);
</script>
</td>
<td class="outer">
<script type="text/javascript">
PrintMonth(5);
</script>
</td>
</tr>
<tr>
<td class="outer">
<script type="text/javascript">
PrintMonth(6);
</script>
</td>
<td class="outer">
<script type="text/javascript">
PrintMonth(7);
</script>
</td>
<td class="outer">
<script type="text/javascript">
PrintMonth(8);
</script>
</td>
</tr>
<tr>
<td class="outer">
<script type="text/javascript">
PrintMonth(9);
</script>
</td>
<td class="outer">
<script type="text/javascript">
PrintMonth(10);
</script>
</td>
<td class="outer">
<script type="text/javascript">
PrintMonth(11);
</script>
</td>
</tr>
</table>
</BODY>
Outstanding! There are a couple of things I’ll point out for you, though for the
most part, I’ll leave you to dissect this code for yourself.
There is an array called "firstdays" defined near the beginning of the script.
In addition to the definition for 2003, which is the active current example, the
definitions for 2002 and 2004 are included as comments. If you look at them
carefully you will see that the numbers represent the number of days on the
first line of each month that are not part of that month, and therefore show a
space rather than a number.
The section for the events, where you will be replacing the samples with your
own events, has been marked with comments. Notice that the author’s thinking is
to use day then month like a European style of date, as opposed to the month
then day per the American style. The author original author was probably not
from the US. If you are more used to the US style of date, you will probably
need to be careful when you enter your data – it’s very easy to slip back into
your own way of thinking, which won’t give you the result you’re looking for.
You’ll also notice that this calendar begins its week on a Monday. A lot of
calendars begin on a Sunday, though I don’t really know why because I have
always though of Saturday and Sunday as "the weekend"!
From a code note perspective, notice that the routines in the body section print
out the twelve months numbered (0) to (11). JavaScript indexes, which is what is
used here to get into the arrays, always start at zero.
I would like very much to see some of your efforts with this calendar. It would
also give me an opportunity to pry a little bit into your life and find out what
you’ve been up to! So go ahead and build something incorporating this calendar
and send me the URL (send it to nlfeedback@htmlgoodies.com with "calendar" as
the subject). In a month or so, I’ll publish the addresses of a few of my
favorites and share them with all of you.
"Where," you may be asking yourself, "does Vince find all these great scripts? I
wonder of there is some kind of source he uses that I could get into myself."
"It’s funny you should be thinking that," I might in turn be thinking, "because
I was just about to tell you that when I want some JavaScript for some
particular purpose, I go straight to the source: http://www.javascriptsource.com
."
Thanks for Reading!
– Vince Barnes
Q & A Goodies
Questions are taken from submissions to our Community Mentors. You can ask a Mentor a question by going to
https://www.htmlgoodies.com/mentors.
Q. How do I create a hyperlink that has no line underneath it?
A. In your style, define your links as:
a { text-decoration: none; }
Q. I need to set the background to ivory for the cells within my links
table and also to center text witin each cell, make font size 8 points, and
change text to uppercase. Here is the html code:
<table id="links">
<tr>
<td>
<a href="#">Home Page</a>
</td>
<td>
<a href="#">Tickets</a>
</td>
<td>
<a href="#">Events</a>
</td>
<td>
<a href="#">Tour</a>
</td>
<td>
<a href="#">Contact Us</a>
</td>
</tr>
</table>
and here is my css sheet:
body {background-image: url(back.jpg)}
b {color: blue}
a {text-decoration: none; color: black}
a: hover {color: red; text-decoration: underline}
#links {width: 100%; border-bottom: solid red 3px; center center;
font-size: 8pt; font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase}
td {background-color: ivory; center center; border: groove red 5pt}
#calendar {float: right; border: groove red 10pt; width: 75%}
th {background-color: lightblue; font-family: Arial, Helvetica,
sans-serif;
border: solid blue 1px}
.prev {border-style: none; background-color: white}
.next {border-style: none; background-color: white}
A. Your css should look something like this:
#links {
width: 100%;
border-bottom: solid red 3px; }
#links td {
background-color: ivory;
font-size: 8pt;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
border: groove red 5pt; }
I moved the text and font properties to the TD of the table instead. If you want
to center something, use the "text-align: center;" definition for your style.
Q. How do you create a form?
A. Here is the link to the HTMLGoodies tutorial on forms:
https://www.htmlgoodies.com/tutors/fm.html
[& check out the new Forms article just added to the site (see the Home Page)]
Q. I love the Dual Image Flip effect. Instead of buttons I’d like to put
plain old links. I don’t know how to do this and if I change a thing, it won’t
work. Please help! Also, I need help on putting the image in one place, and
placing the text in another. I have a square box that I need to put the image
flip in.
A. Here’s what you want:
<html>
<head>
<title>Image Flip</title>
<script language="JavaScript">
function flip(img,imgn)
{
document.images[imgn].src=img
}
</script>
</head>
<body>
<a href="somepage.html" onmouseover="flip(‘1.gif’,’pica’)" onmouseout="flip
(‘0.gif’,’pica’)">Mouse Over Me</a>
<img src="0.gif" name="pica" border="0"></a><br>
</body>
</html>
As far as placing the picture it depends on how you have your square box
defined. You could use a table to position the image or even layers such as
<div> or <span> in combination with the style tag.
News Goodies
XO Outsources Do-Not-Call Screening to VeriSign
[July 28, 2003] The broadband service provider taps the Internet domain
name and security firm to comply with state and federal
telemarketing laws.
Click
here to read the article
Roxio to Bundle Napster with CD-Burning Tools
[July 28, 2003] UPDATE: Napster 2.0 will roll out what is called the first
online music play offering unlimited a la carte downloads alongside a
subscription option.
Click
here to read the article
IRS Again Delays Modernized Taxpayer Database
[July 28, 2003] Agency chief calls launch postponement ‘disturbing’ and
orders independent review of program first set to go online in 2001.
Click here to read the article
Unisys Debuts New High-End Mainframe
[July 28, 2003] The firm touts the new mainframe’s support for .NET and
J2EE, as well as 25 percent more scalability.
Click here to read the article
Bush Promises Cyber Intrusion Reporting Standards
[July 28, 2003] Administration to provide federal agencies with specific
instructions for FedCirc reporting within the next six weeks.
Click here to read the article
IBM Refreshes WebSphere Portal Software
[July 28, 2003] The company’s enhanced WebSphere Portal software includes
document management functions and Web services capabilities unavailable in
previous versions.
Click here to read the article
Companies Team on Web Services Transaction Spec
[July 28, 2003] UPDATE: Minus Microsoft and IBM, Sun Microsystems, Oracle
and three partners produce the Web Services Composite Applications Framework
(WS-CAF) to handle transaction processing.
Click here to read the article
No Lock on the Door at Digital Home
[July 25, 2003] FEATURE: Protecting content as it gets passed around between
devices in your home seems to be the last thing on the mind of a consumer
electronics group. MPEG-21 may be the answer.
Click here to read the article
Microsoft Plugs ‘Critical’ DirectX Flaw
[July 24, 2003] The software giant issues three new
advisories, including a potentially dangerous hole in
DirectX, which provides multimedia support in Windows games.
Click here to read the article
Profits Soar For EBay ‘Nation’
[July 24, 2003] If eBay were a country, it would bigger than Great
Britain says Meg Whitman, crowing over booming sales and beating guidance
and analysts’ estimates once again.
Click here to read the article
Every week a site selected each week for review. Each week,
reviews of the previous week’s selected site are chosen for
publication on the HTML Goodies website.
The current week’s selected site is published in Goodies To
Go and in the Peer Reviews section of the website.
Current contact email addresses for submitting your site and
for submitting reviews are published in Goodies To Go.
If you would like to have your site reviewed, sign up for
the Goodies To Go newsletter in the Navigation Bar on the
left side of this page.
For full details about this program, see
https://www.htmlgoodies.com/peerreviews
Did you ever wish your newsletter was an easy two way communications medium?
Ploof! It now is!
If you would like to comment on the newsletter or expand/improve on something
you have seen in here, you can now send your input to:
mailto:nlfeedback@htmlgoodies.com
We already receive a lot of email every day. This address will help us sort out
those relating specifically to this newsletter from all the rest. When you send
email to this address it may wind up being included in this section of the
newsletter, to be shared with your fellow readers.
Please don’t send your questions to this address.
They should be sent to our mentors: see
https://www.htmlgoodies.com/mentors/
It seems that a lot of you have concerns about "fashionable"
illnesses. My personal suggestion for any of oyu with
questions would be to consult a trusted medical practioner
and not to pay too much attention to trendy hype. In my
opinion, TV is not the best place to get your medical
advice!
Thanks to Krzysztof Zelechowski for pointing out the
incorrect year for the debut of the Roy Rogers Show. It
should have read 1944, not 1994.
This is another reminder to check the note about email
filtering near the top of this newsletter. I know spam has
become a nightmare for all of you and filtering is almost
essential these days. We have had several questions
concerning the ever changing "from" address generating by
our list handling system. The note provides the solution for
you. Here it is again:
All Goodies To Go newsletters are sent from the domain "internet.com."
Please use this domain name (not the entire "from" address,
which varies) when configuring e-mail or spam filter rules,
if you use them.
Thanks again for all your feedback!
Windows Tech Goodie of the Week:
Object Oriented ASP: Using Classes in Classic ASP
http://www.asp101.com/articles/richard/ooasp/default.asp
This in-depth tutorial shows how to model an ASP application
and implement it using VBScript classes. This type of
object-oriented approach leads to cleaner code and
higher-quality applications.
.
Top
And Remember This . . .
On this day in…
1976
Earthquake in Tangshan, China
In terms of cost of life, the worst earthquake of modern
times occured and 3:42 in the early morning, local time, of
this day in 1976 in the industrial city of Tangshan, China.
The quake measured between 7.8 and 8.2 on the Richter scale
and destroyed the city killing an estimated 242,000 people
(China’s official estimate – some Chinese sources have
privately disclosed that the estimate was closer to half a
million.)
Today was also the day that: in 1540 Thomas Cromwell,
King Henry VIII’s chief minister, was executed; in 1655
Cyrano de Bergerac died; in 1750 Johann Sebastian
Bach died; and in 1973, Bonnie and Clydes
bullet-riddled 1934 Ford V-8 sedan was sold to Peter Simon
of Nevada for $175,000 at an auction.
Born today were: in 1866, children’s author Beatrix
Potter; 1922 undersea explorer Jacques Piccard;
1929, Jacqueline Lee Bouvier Kennedy Onassis; 1945,
cartoonist Jim Davis (Garfield); 1947, actress Sally
Struthers; 1949, Marilyn Quayle (wife of former US VP
Dan Quayle); 1967, actress Lori Laughlin
Thanks for reading Goodies to Go!
