Goodies to Go (tm)
July 12, 2004-- Newsletter #293

By Vince Barnes



Goodies to Go (tm)
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: http://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: http://www.htmlgoodies.com/letters/259.html and http://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 http://www.htmlgoodies.com/letters/233.html.

 

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. 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 Price\r"
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 &nbsp &nbsp &nbsp &nbsp SIZE/SHAPE &nbsp &nbsp &nbsp &nbsp &nbsp
&nbsp QTY &nbsp &nbsp PRICE &nbsp &nbsp
<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 &nbsp &nbsp
&nbsp
<select name="szeshp1" onchange="qtyreset('1')">
<option value="No2 Pencils ,1.23" selected>No2 Pencils &nbsp
&nbsp &nbsp &nbsp </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 &nbsp &nbsp
&nbsp
<select name="szeshp2" onchange="qtyreset('2')">
<option value="Small Staples ,2.12" selected>Small Staples
</option>
<option value="Large Staples ,2.34">Large Staples &nbsp &nbsp
&nbsp </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"> &nbsp <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: http://www.htmlgoodies.com/tutors/textonimages.html


 

 

 

 

Top

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

 

 

 

 


Top

Goodies Peer Reviews


 

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 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/


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!

 

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