Goodies to Go ™
July 12, 2004–Newsletter #293
This newsletter is part of the internet.com network.
http://www.internet.com
Featured this week:
* Goodies Thoughts – Putting My
Cards On The Table
* Q & A Goodies
* News Goodies
* Goodies Peer Reviews
* Feedback Goodies
* Windows Tech Goodies
* And Remember This…
Goodies Announcement
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 – Putting My Cards On The Table
In the wonderful world of HTML, there are things known as
tables. Those tables are for displaying tabular data, such as monthly sales
figures, feature comparisons for different versions of products and the like.
They are not for organizing photos, text blocks and other elements on a web
page. That sort of thing should be done with CSS (Cascading Style Sheets.)
This is the hand that you would see laid down by the HTML purist. All well and
good, I say; but my hand holds a different set of cards.
The intended object of tables is indeed tabular data. They certainly display it
very well and have a bunch of features that many people know little about that
greatly enhance their capabilities when displaying that tabular data. They also
happen to be extraordinarily useful when laying out all sorts of other items on
a web page. (If you’re not very familiar with tables, there’s a tutorial here:
https://www.htmlgoodies.com/tutors/tbl.html — and to see what else I’m
talking about here, take a look at the Goodies Thoughts in these two issues:
https://www.htmlgoodies.com/letters/259.html and
https://www.htmlgoodies.com/letters/260.html)
For the average person, the "weekend warrior" type of coder, it’s enough to have
to learn HTML to create pages, without having to add in CSS before doing
anything a bit fancy. Since tables are a basic part of HTML, you get to know
them pretty early on in the learning cycle.
Tables are made up of rows and columns, creating a grid of "cells", so they
divide the area they occupy up into nice and manageable little units. A table
can occupy a specific sized area (that is, its height and width can be
specified, either as a percentage of the viewing area or as a fixed number of
pixels) or it can be automatically sized. Each cell can have its size specified
also, and neighboring cells (left and right, or up and down, or both) can be
merged into one larger cell (by using "rowspan" and "colspan".) All this
flexibility makes a table an ideal solution for laying items down in a fixed
arrangement relative to each other.
Add to these notions the fact that a table cell can contain pretty much
anything, including another whole table, and you start to see why I rave so much
about their wonders! For somebody who is developing their web design skills they
represent a simple but very powerful tool. Anyone who uses them, however, is
still strongly encouraged to get to know the powers of CSS — sometime.
Myself, I use tables to control layout an awful lot of the time. I use CSS when
there’s a specific need to. Then again, I’m not a purist, I’m a little more on
the practical side!
I have extolled the virtues of table before, providing more examples, a little
more than a year ago — see
https://www.htmlgoodies.com/letters/233.html.
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. I have been seeing "images" associated with bookmarks and navigation
bars in my browser. Where do I find info on coding these things?
A. You can find what I believe you are referring to at
www.favicon.com
Q. I’m out of work & learning JavaScript to improve my skills, running
W2K, IE 6.0. Periodically when I try to use the sample exercises, I get an error
message saying that an object was expected. Here’s an example:
<html><head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252"> <title>IMG1</title> </head>
<body>
<center>
<FORM NAME = form1>
<IMG NAME = "IMG1" SRC= "images/dr1.jpg" WIDTH= 123 HEIGHT = 184> <BR>
<BR>
<INPUT TYPE = BUTTON Value = "Change Image" onClick =
"ChangeImage()">
</FORM>
</CENTER>
</body>
<SCRIPT LANGUAGE = Javascript>
function ChangeImage()
{
document.form1.IMG1.src = "images/woman1.jpg"
}
<script/>
</html>
I get "Microsoft Jscript runtime error: Object expected" on the line that says "ChangeImage()".
I’m copying the scripts exactly. This is only one example of a problem I keep
having. Could this be because the people writing the scripts are running NN and
I’m running IE? Is it because I’m using FrontPage?
A. The problem with your script is that the ending script tag is
incorrect. Instead of "<script/>" you should have "</script>". In this
particular case have the script at the end of your document is ok, but in most
cases you should place it in the head section of your document. Good Luck on
your quest to learn new skills.
Q. Im trying to make one of those websites where you can change the
whole color-scheme of the site by clicking a link. I know Im probably going to
have to use PHP with CSS, my main question was concerning images. How do I
insert an image using an External Style Sheet. I have a few images that I want
swapped in and out, depending on which style-sheet is applied to the site. Is
that possible? If so, how can I achieve it?
A. A good reference for style switchers is
http://www.alistapart.com
They have a few articles about this. Changing images can be a little tricky,
especially concerning older browsers. You may want to test this method on your
local site before going live.
The style sheet cannot add images using the <img> tag, but it can add background
images to almost any block element, like <div>, <p>, <ul> etc.
If my business, Company ABC, has two different style sheets with different color
schemes, I might want to use different color logos. I would do something like
this in my HTML:
<div id="header">
<h1>Company ABC</h1>
</div>
and add different code in my styles…
………. in file redstyle.css :
div#header {
background: url(redlogo.gif) no-repeat;
height: 50px;
wisth: 200px; }
………. in file bluestyle.css :
div#header {
background: url(bluelogo.gif) no-repeat;
height: 50px;
wisth: 200px; }
………. and in both files:
div#header h1 { display: none;}
When the styles are switched, the background image in the "header" div is
changed, creating the illusion of different images on the page. The "display:
none;" attribute hides the text in the <h1> of the <div> so only the images
shows through, but the text will be readable if the browser can’t handle the
style sheet.
Q. In a web site that I created I made a catalog order form that has a
description of an item, a checkbox to select and a textbox for amount to order.
The code I have is:
<form name="form1" method="post" action="mailto:Person@person.net?subject=Catalog
Order Form1" enctype = "text/plain">
<p>
<input type = "hidden" name = "recipient"
value = Person@person.net />
<input type = "hidden" name = "subject"
value = "Custodial Order Form1" />
</p>
When the submit button is clicked, it goes to the recepient. But the text/plain
shows items selected and amount but it also shows amounts not selected i.e.:
ven no:1111, item description
AMOUNT=5
AMOUNT=
AMOUNT=
AMOUNT=
(Etc)
All I want is for the items selected be shown and not all of the AMOUNT= not
selected.
A. This is one reason why Server Side languages such as PHP or Perl are
used. They allow you to manipulate the form data before it is emailed out. They
also work better because some people do not have their email clients set up
properly causing the email not to be sent. Having said that though I think your
best bet would be to have two forms – one that gathers the information and a
second with a hidden element that is actually sent. When they click the submit
button the data from the first form is validated, formatted and then placed in
the hidden form hidden element to be sent. Here is an example of one that I put
together for someone else:
<html>
<head>
<title>Order Form</title>
<script language="JavaScript">
function calcamt(num)
{
var qtynum=eval("document.myform.qty"+num+".selectedIndex")
var number=eval("document.myform.szeshp"+num+".selectedIndex")
var sizeshape=eval
("document.myform.szeshp"+num+"[number].value.split(‘,’)")
eval("document.myform.price"+num+".value=sizeshape[1] * qtynum")
var pricenum=parseFloat(eval
("document.myform.price"+num+".value"))
var whole = "" + Math.round(pricenum * Math.pow(10, 2));
var decPoint = whole.length – 2;
if(decPoint != 0)
{
result = whole.substring(0, decPoint);
result += ".";
result += whole.substring(decPoint, whole.length);
}
else
{
result = whole;
}
eval("document.myform.price"+num+".value=result")
totalamt()
}
function qtyreset(numa)
{
if(eval("document.myform.item"+numa+".checked"))
{
}
else
{
alert("You must select the item")
return false
}
eval("document.myform.qty"+numa+".selectedIndex=0")
eval("document.myform.price"+numa+".value=’0.00’")
}
function totalamt()
{
var tempamt=0
for(i=0;i<3;i++)
{
var tamt=parseFloat(eval("document.myform.price"+i+".value"))
tempamt=tempamt+tamt
}
var whole = "" + Math.round(tempamt * Math.pow(10, 2));
var decPoint = whole.length – 2;
if(decPoint != 0)
{
result = whole.substring(0, decPoint);
result += ".";
result += whole.substring(decPoint, whole.length);
}
else
{
result = whole;
}
document.myform.totamt.value=result
}
function Formcheck()
{
document.sendit.sdata.value="r Item
Size Qty Pricer"
for(i=0;i<3;i++)
{
if(eval("document.myform.item"+i+".checked"))
{
var fitem=eval("document.myform.item"+i+".value")
var fnum=eval("document.myform.szeshp"+i+".selectedIndex")
var fsize=eval
("document.myform.szeshp"+i+"[fnum].value.split(‘,’)")
var fqtynum=eval("document.myform.qty"+i+".selectedIndex")
var fqty=eval("document.myform.qty"+i+"[fqtynum].value")
var fprice=eval("document.myform.price"+i+".value")
document.sendit.sdata.value+="r"+fitem+" "+fsize[0]
+"@ "+fsize[1]+" each "+fqty+" "+fprice+"r"
}
}
document.sendit.sdata.value+="Total
Amount="+document.myform.totamt.value
}
</script>
</head>
<body bgcolor="lightgreen">
<center>
<br>
<h2>Oder Form</h2>
<br>
ITEM         SIZE/SHAPE          
  QTY     PRICE    
<form name="myform">
<input type="radio" name="item0" value="Paper Clips"> Paper Clips
<select name="szeshp0" onchange="qtyreset(‘0’)">
<option value="Small Paper Clips ,2.53" selected>Small Paper
Clips</option>
<option value="Large Paper Clips ,3.45">Large Paper Clips</option>
</select>
<select name="qty0" onchange="calcamt(‘0’)">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" name="price0" value="0.00" size="10" onfocus="this.blur ()">
<br><br>
<input type="radio" name="item1" value="Pencils "> Pencils    
 
<select name="szeshp1" onchange="qtyreset(‘1’)">
<option value="No2 Pencils ,1.23" selected>No2 Pencils  
      </option>
<option value="No4 Pencils ,1.74">No4 Pencils </option>
</select>
<select name="qty1" onchange="calcamt(‘1’)">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" name="price1" value="0.00" size="10" onfocus="this.blur ()">
<br><br>
<input type="radio" name="item2" value="Staples "> Staples    
 
<select name="szeshp2" onchange="qtyreset(‘2’)">
<option value="Small Staples ,2.12" selected>Small Staples
</option>
<option value="Large Staples ,2.34">Large Staples    
  </option>
</select>
<select name="qty2" onchange="calcamt(‘2’)">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" name="price2" value="0.00" size="10" onfocus="this.blur ()">
<br><br>
Total
<input type="text" name="totamt" size="10" onfocus="this.blur()">
</form>
<form name="sendit" method="post" action="mailto:mail@me.com?subject=Order
Form" enctype="text/plain" onsubmit="return Formcheck()">
<input type="hidden" name="sdata">
<input type="submit" value="Send It">   <input type="reset"
value="Clear Form" onClick="document.myform.reset()">
</form>
</center>
</body>
</html>
Q. How do I lose the blue line that appears round an image when I make it
a link?
A. In the IMG SRC tag add this:
border="0"
Q. Is there any way to place text on top of pictures?
A. Here is the link to see how its done:
https://www.htmlgoodies.com/tutors/textonimages.html
News Goodies
WebMD to Acquire ViPS
[July 12, 2004] Health care information giant shells out
$160 million for enterprise software firm.
Click
here to read the article
Microsoft Offers ISVs New Royalty Program
[July 12, 2004] Partnerworld conference rolls out new goodies for keeping
ISVs happy on Microsoft platforms.
Click here to read the article
Zoom Into VoIP
[July 12, 2004] Zoom Technologies packages VoIP capabilities into its ADSL
offerings..
Click
here to read the article
Novell’s Latest: Professional Open Source
[July 9, 2004] Mono 1.0 will serve as a testbed for the
company’s possible launch of paid services and support of other
open source projects.
Click here to read the article
GeoTrust vs. VeriSign: An SSL Controversy
[July 9, 2004] Survey results ignite debate over who has the
biggest chops in the SSL certificate arena.
Click here to read the article
Mozilla Patches Vulnerability
[July 9, 2004] There’s no hiding from the rash of vulnerabilities hitting
everyone’s Web browsers these days.
Click here to read the article
Microsoft Faces Angry IE Users’ Questions
[July 9, 2004] Redmond’s IE engineers face irate end-users during an online
chat about the browser.
Click here to read the article
Software Vendors’ Sluggish Summer
[July 9, 2004] What’s behind the slowdown in revenues in June?
Click here to read the article
IT Jobs Slowly Grow, Wages ‘Still Settling’
[July 9, 2004] As the economy slowly improves, the demand for IT jobs —
particularly security jobs — is on the upswing.
Click here to read the article
Cisco Extends Buying Spree
[July 9, 2004] The network equipment giant bolsters its software technology
with another small, but strategic, buy.
Click here to read the article
Every week a site is selected 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/
For those who are missing Peer reviews: we are once again
revising the Peer review program in the hopes of creating a
workable solution. The current plan is to move the new Peer
Review pages into place in the new year. All those who have
been selected for reviews in the past will be featured in
the new pages. The new method will make it much easier for
your peers to provide feedback and much easier for us to
handle the publication side of things. "Watch this space!"
It’s coming soon!!
Thanks again for all your feedback!
Top
Windows Tech Goodie of the Week:
Data Binding Syntax in ASP.NET 2.0
http://www.15seconds.com/issue/040630.htm
With the new data binding capabilities in ASP.NET 2.0,
writing code that iterates through data to build HTML tables
is no longer required.
Top
And Remember This . . .
On this day in…
1862 Rolling Stones Make Their Debut
The Rolling Stones give their first public performance on this day
in 1962 at the Marquee Club in London. Mick Jagger had run into his
old school friend, Keith Richards, and invited him to join his band,
known as Little Boy Blue and the Blue Boys. At the time, Jagger was
a student at the London School of Economics and Richards was an art
student. Jagger and his band frequently jammed with a band known as
Blues, Inc. (which included Brian Jones.) Blues, Inc were to play
the gig at the Marquee, but some of the members were scheduled to
appear on a radio show at the same time. Jagger got a group together
to replace Blues, Inc. that included himself, guitarists Richards
and Jones, Bass player Dick Taylor and drummer Mick Avory (later
with the Kinks.) He named the band the Rolling Stones after a line
in a song from Muddy Waters. About a year later Bill Wyman joined to
replace Taylor and Charlie Watts replaced Avory.
Today was also the day that in: 1543 King Henry VIII married
Catherine Parr (#6 & the last); 1812 General Hull led US
forces in invasion of Canada; 1862 the US Congress authorized
the Medal of Honor; 1909 the 19th amendment to the US
Constitution was passed (granting the power to tax incomes); 1920
Lithuania became an independent republic with the signing of a
treaty with the USSR; 1934 the prison on Alcatraz Island in
San Francisco Bay was abandoned; 1948 six RAF deHavilland
Vampire jets became the first jets to cross the Atlantic; 1951
a mob tried to prevent a black family from moving into all-white
Cicero, Illinois; 1957 Dwight Eisenhower became the first US
President to fly in a helicopter; 1960 the USSR launched
Sputnik 5 with two dogs aboard; 1966 a record 10.5 inches of
rain fell in one day in Sandusky, Ohio; 1966 Race riots in
Chicago, Illinois; 1967 Blacks riot in Newark, New Jersey –
26 killed, 1,500 injured & more than 1,000 arrested; 1970
Janis Joplin made her debut; 1982 the US Federal Emergency
Management Agency promised that survivors of a nuclear war would
still get their mail (uh-huh!); 1984 New York’s Geraldine
Ferraro became the US’ first major party female Vice Presidential
candidate;
Born today were: in 1730 pottery designer and manufacturer
Josiah Wedgwood; 1817 naturalist and author Henry David
Thoreau; 1854 Kodak camera inventor George Eastman; 1884
Italian artist Amedeo Modigliani; 1895 lyricist Oscar
Hammerstein II (worked with Richard Rogers); 1895 architect
and geodesic dome inventor R. Buckminster Fuller; 1908
comedian Milton Berle; 1917 painter Andrew Wyeth; 1937
comedian Bill Cosby; 1943 singer Christie McVie; 1948
exercise guru & ? Richard Simmons; 1951 actress Cheryl Ladd;
1956 actress Mel "Mary Ellen" Harris; 1964 actress Judi
Evans;
Thanks for reading Goodies to Go!
