Goodies to Go (tm)
July 28, 2003-- Newsletter #243

By Vince Barnes



Goodies to Go (tm)
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

 

Top

Q & A Goodies

Questions are taken from submissions to our Community Mentors. You can ask a Mentor a question by going to http://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:
http://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.


 

 

 

 

Top

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

 

 

 

 

 

 


Top

Goodies Peer Reviews


 

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 http://www.htmlgoodies.com/peerreviews
 

 

 


Top

Feedback Goodies



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 http://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!

 

Archive Home Page.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date