Goodies to Go ™
May 31, 2004–Newsletter #287
This newsletter is part of the internet.com network.
http://www.internet.com
Featured this week:
* Goodies Thoughts – Focus on the Form
* 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 – Focus on the Form
When an element on a form "has focus", this doesn’t mean that
the element is intently involved in one subject! It means that the cursor is in
that element. When the element has focus and you type on the keyboard, what you
type goes into that element. If you click on a form element, focus moves to that
element. When you hit the tab key, focus moves from one element to the next.
Great! That’s the basics; now what good does that do you?
As a webpage programmer, you can use JavaScript (and HTML) code to control where
the focus is to go and you can use focus events to control other things on the
page. Let’s look at a couple of examples. (Remember to take note of the "<"
warning in the Goodies Q&A section regarding code in this newsletter.)
<html>
<head>
</head>
<body>
<script language="javascript"></script>
<form name="form1">
<input type="text" name="text1" value="Where is the focus?"><br>
<input type="text" name="text2" value="Is it here?"><br>
<input type="text" name="text3" value="Or here?"><br>
<input type="button" name="button1" value="TextBox 1" onclick="document.form1.text1.focus()"><br>
<input type="button" name="button2" value="TextBox 2" onclick="document.form1.text2.focus()"><br>
<input type="button" name="button3" value="TextBox 3" onclick="document.form1.text3.focus()"><br>
</form>
</body>
</html>
When this page is first loaded, you don’t see the cursor in any of the text
boxes. Click on the buttons, however and the .focus() method moves the focus to
the associated element. There is also the .blur() method which causes an element
to lose focus.
Try this page (click in the text boxes, then click the buttons):
<html>
<head>
</head>
<body>
<script language="javascript">
</script>
<form name="form1">
<input type="text" name="text1" value="Where is your focus?"><br>
<input type="text" name="text2" value="Is it here?"><br>
<input type="text" name="text3" value="Or here?"><br>
<input type="button" name="button1" value="TextBox 1" onclick="document.form1.text1.blur()"><br>
<input type="button" name="button2" value="TextBox 2" onclick="document.form1.text2.blur()"><br>
<input type="button" name="button3" value="TextBox 3" onclick="document.form1.text3.blur()"><br>
</form>
</body>
</html>
Similarly there are events associated with focus; they are the onFocus and
onBlur events. onFocus can be used with every form element, but onBlur only
works with select, option, password, text and textarea elements. Try out this
page:
<html>
<head>
</head>
<body>
<script language="javascript">
</script>
<form name="form1">
<input type="text" name="text1" value="text1" onfocus="document.form1.text1.value=’I
have focus.’"><br>
<input type="text" name="text2" value="text2" onfocus="document.form1.text2.value=’I
have focus.’"><br>
<input type="text" name="text3" value="text3" onfocus="document.form1.text3.value=’I
have focus.’"><br>
</form>
</body>
</html>
and this one:
<html>
<head>
</head>
<body>
<script language="javascript">
</script>
<form name="form1">
<input type="text" name="text1" value="text1" onblur="document.form1.text1.value=’I
lost the focus.’"><br>
<input type="text" name="text2" value="text2" onblur="document.form1.text2.value=’I
lost the focus.’"><br>
<input type="text" name="text3" value="text3" onblur="document.form1.text3.value=’I
lost the focus.’"><br>
</form>
</body>
</html>
Some people design forms that require the user to click in an element before
they can type anything. If you visit such a page, you’ll know how irritating
that is. Using the onload event and the .focus() method, we can be much kinder
to our visitors! Try this variation on my first example:
<html>
<head>
</head>
<body onload="document.form1.text1.focus()">
<script language="javascript">
</script>
<form name="form1">
<input type="text" name="text1" value="Where is the focus?"><br>
<input type="text" name="text2" value="Is it here?"><br>
<input type="text" name="text3" value="Or here?"><br>
<input type="button" name="button1" value="TextBox 1" onclick="document.form1.text1.focus()"><br>
<input type="button" name="button2" value="TextBox 2" onclick="document.form1.text2.focus()"><br>
<input type="button" name="button3" value="TextBox 3" onclick="document.form1.text3.focus()"><br>
</form>
</body>
</html>
Another kind thing to do for your visitors is to use the onfocus event together
with the .select() method to select all the text in a text box so that it is all
replaced when the user starts to type. Compare the behavior of these two text
boxes:
<html>
<head>
</head>
<body>
<script language="javascript">
</script>
<form name="form1">
<input type="text" name="text1" size="20" value="This is the original text in
this text box"><br>
<input type="text" name="text2" cols="20" value="This is the original text in
this text box" onfocus="document.form1.text2.select()"></textarea><br>
</form>
</body>
</html>
When the user presses the tab key, the focus is moved to the next element on the
page, unless the elements include the tabindex attribute. The tabindex attribute
causes focus to move to the next element on the page with the same tabindex
value, or to the element (anywhere) on the page with the next highest tabindex
value.
Look at the focus behavior on this page when you press the tab key:
<html>
<head>
</head>
<body onload="document.form1.text2.focus()">
<script language="javascript">
</script>
<form name="form1">
<input type="text" name="text1" value="text1" tabindex="2" onblur="document.form1.text1.value=’I
lost the focus.’"><br>
<input type="text" name="text2" value="text2" tabindex="1" onblur="document.form1.text2.value=’I
lost the focus.’"><br>
<input type="text" name="text3" value="text3" tabindex="3" onblur="document.form1.text3.value=’I
lost the focus.’"><br>
</form>
</body>
</html>
I’ll leave you now to focus on your own pages.
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 created a form on my computer building site that allows you to
configure which components of a computer you want to purchase. How do I have an
updating total at the bottom of the page that shows my customer how much the
current total is? Also once I have this total how would I add a $70 shipping
cost to it automatically? And finally I would like to submit the customer’s
choices to me. At the moment I have an HTML form that opens up your e-mail and
attaches the form to the e-mail (so when people send me an order it comes
attached to an e-mail). Is there a way to just have them type in their e-mail
address and hit submit and have it transmit to my e-mail without having to make
them open their e-mail up and send an e-mail? I have used HTML quite a bit and
am unsure as to how to do this stuff, so I am assuming that it is JavaScript. I
know very little JS
A. You are going to need a bit more than JavaScript. JavaScript is a
client side scripting language. You are going to need some processing on the
server. That is going to take some PERL, PHP or ASP. Basically what you need is
a shopping cart. There are many shopping carts but you need to know what your
server supports. If you are using Microsoft FrontPage and have FrontPage Server
Extensions installed on your server you can use that to send the form. It will
not do any figuring of the shipping for you though.
http://www.code4u.com — this is site has many links that may help you find what
you are looking for.
[You might also want to check out the Goodies Thoughts in these Goodies To Go
newsletter issues:
https://www.htmlgoodies.com/letters/225.html
https://www.htmlgoodies.com/letters/226.html
– Ed.]
Q. Re. the HTML Goodies tutorial on making Javascript keystroke
recorders; I want to make it so the keystrokes lead the client to another page,
but I can’t find anything on any way to do that in JavaScript without opening
another window; I just want a keystroke link, and I can’t find it ANYWHERE!
A. Using key strokes to go to another page can be difficult and confusing
to the average person.
Q. I have successfully used the script below to open a fixed size new
window containing a graphic. The idea is that the original web page contains a
number of small photo images that can be seen as larger versions in the pop-up.
What I want to do is have the user click on the small graphic itself in order to
open the new window, rather than have a button that they have to click, which is
how the existing code works.
<SCRIPT language=JavaScript>
var width,height
var image,ext
var cond1,cond2
function transferview(image,width,height) {
if (width==0) cond1=" "
else cond1="width="+(width+20)+"";
if (height==0) {cond2=" "};
else {cond2="height="+(height+70)+""};
var s1 ="<TITLE>The Irish Coat</TITLE>"
var s15=""
var s2 ="<CENTER><IMG SRC=’"+image+"’ BORDER=0>"
var s3 ="<FORM><INPUT TYPE=’BUTTON’ VALUE=’Close Window’"+ "
onClick=’self.close()’>" var s4 ="</FORM></CENTER>"
ImageWindow=window.open("",
"newwin"+width,"toolbar=no,scrollbars="+scroll+",menubar=no,"+cond1+",
"+cond2);
ImageWindow.document.write(s1+s15+s2+s3+s4)
ImageWindow.document.close()
}
</SCRIPT>
<FORM><INPUT
onclick="javascript:transferview(‘GlendowanShanntialarge.jpg’,500,500)
"
type=button value="Larger Image"> </FORM>
A. You can set up an image link like so that when clicked on will open
the
window.
<a href="javascript:transferview(‘GlendowanShanntialarge.jpg’,500,500)"><img src="mypic.gif"
border="0"></a>
Q. I want to make a list of links for navigation in the form of a
JavaScript file, so that I can use one file and call it up from multiple pages
without the use of frames. I found a tutorial on making js files & calling them
from another page, but I haven’t found how to make a plain text link using
javascript.
A. You could try using document.write() to create your text links. For
example:
document.write("<a href=’somepage.html’>Click Me</a>")
Just make sure you use single quotes within double quotes or vice versa. Also
you might want to place the script within a div to help position it.
[Also, take a look at the Goodies Thoughts sections in:
https://www.htmlgoodies.com/letters/230.html and
https://www.htmlgoodies.com/letters/231.html — Ed.]
Q. I am a beginner working in the Primers and I am having a problem with
images. I work with Windows XP. When I open a page in the browser, the image
appears as a little box with a red "x" in the middle. (code sample and
description provided)
A. Images not showing properly are almost always due to the path being
incorrect. This could include the image not being in the right folder, the image
not being on the server at all or the path in the code being incorrect. You
mention that you tried naming the file "cougar.jpeg". That could be wrong as it
could be "cougar.jpg" even if the image is actually a JPEG file. Another path
problem I see quite a bit is that the page is looking for the image on the
user’s computer instead of the server it resides on. You may see something like
this: "file=///C:/Folder_Name/Folder_Name/cougar.jpg"
[Where your HTML code doesn’t specify a pathname, the image must be in the same
folder as the HTML page file. See also the Goodies Thoughts in this GTG issue in
the Archive:
https://www.htmlgoodies.com/letters/224.html – Ed.]
News Goodies
Phoenix Next-Gen BIOS Rising in PCs, Servers
[June 1, 2004] Company officials expand network-savvy system
to PCs, servers and embedded devices.
Click
here to read the article
HP Throws Weight Behind MySQL, JBoss
[May 31, 2004] The system vendor vows to support database and application
server software from MySQL and JBoss, respectively, on its servers.
Click here to read the article
Mozilla, Opera Join Forces For New W3C Proposal
[May 31, 2004] Two alternatives to Microsoft’s Internet browser plan on
calling for open standards for Web Applications, and Compound Documents.
Click
here to read the article
NEC Subsidiary Admits to E-Rate Fraud
[May 28, 2004] The company agrees to $20.6 million fine to
settle criminal charges of swindling a program designed to bring
Internet connections to schools and libraries.
Click here to read the article
JBoss in Mess Over ‘Fake’ Messages
[May 28, 2004] The Middleware Company (TMC) and JBoss have
severed their business ties over who wrote messages on the
TheServerSide.com online forum.
Click here to read the article
Financial Firms in Hackers’ Crosshairs
[May 28, 2004] A new survey says IT security attacks on financial
institutions have doubled.
Click here to read the article
‘Critical’ CVS Heap Overflow Flaw Patched
[May 28, 2004] Users of the popular open source code maintenance system are
at risk of malicious hacker attack.
Click here to read the article
Oversupply Is Flip Flopping Flash and DRAM
[May 28, 2004] With demand expected to spike this year, some memory
makers are changing the way they do business.
Click here to read the article
XP SP2 Launch Price: $300 Million
[May 27, 2004] TechEd: Microsoft gears up for the launch of Windows XP
Service Pack 2.
Click here to read the article
Yahoo! Beta Testing Anti-Spyware Tool
[May 27, 2004] New toolbar plug-in aims to give consumers ‘transparency’
about what programs are actually on a user’s computer.
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!!
You are receiving this issue of Goodies To Go a day later
than usual. This is because May 31 this year is Memorial Day
in the United States, and is a public holiday.
A few people wrote to me about last week’s "Doorway" piece.
It seems some folk thought I was recommending the use of
Doorways and the like. The piece was intended to be a
response to the questions I have been receiving asking what
doorways are, not a discussion of their legitimacy. It also
didn’t include ant "how to" information. Doorways are not
liked by most search engine operators — if you’re
considering using them I’d suggest you read the guidelines
for webmasters in Google, Yahoo and the like.
Thanks again for all your feedback!
Top
Windows Tech Goodie of the Week:
ASP.NET 2.0 Caching Features
http://www.15seconds.com/issue/040518.htm
This article examines some of the new and exciting caching
features in ASP.NET 2.0 and shows how to implement them in
Web applications.
*** AND ***
Common Functions for Working with XML and XSL Files
http://www.asp101.com/samples/xmlxsl.asp#xmlfunctions
One of our readers saw our "XML to HTML (via XSL) ASP
Sample" last week and decided to share with us some
functions that he wrote and has been using to make working
with XML and XSL files easier.
Top
And Remember This . . .
On this day in…
1889 Johnstown Destroyed By Raging Torrent
Johnstown is located at the confluence of Little Conermaugh River
and Stony Creek in Pennsylvania. Upstream, the prestigious South
Fork Fishing and Hunting Club (with members like Andrew Carnegie)
owned and maintained Lake Conermaugh, a reservoir turned into a
recreational lake held back by the South Fork Dam. The club had
completed the earth-fill dam in 1881, but by 1889 neglect had left
it in urgent need of repair. In late May, 1889, several days of
heavy rain led to the water level rising to the top of the dam. On
May 31, 1889 club officials saw that the dam was about to collapse
and dispatched riders down the valley to evacuate residents. Most
people in the valley were familiar with the Little Conermaugh
River’s occasional floods, however, and simply moved their
possessions to the second floor to wait it out. At 3:10 pm the dam
gave way sending 20 million tons of water down the valley. It swept
away the communities of South Fork, Mineral Point, Woodvale and East
Conermaugh gathering up rocks, trees, trains, houses, farms, animals
and people. At 4:07 it reached Johnstown. It was now a 30 foot high,
half mile wide wall of water and debris. it took ten minutes to pass
through the city. It demolished 1,500 buildings. 2,209 people died.
Few survivors were washed up along with the corpses over several
miles downstream.
Today was also the day that in: 1678 Lady Godiva rode naked
through the streets of Coventry, England to protest taxes (IMHO more
protests are needed!); 1837 the Astor Hotel (later the
Waldorf-Astoria) opened in New York City; 1879 Madison Square
Garden in New York City opened its doors; 1884 Dr. John
Harvey Kellog patented "flaked cereal"; 1902 the Treaty of
Vereeniging was signed, ending the Boer War as Britain annexed the
Transvaal; 1907 Taxis began service in New York City; 1910
the Cape of Good Hope became part of the Union of South Africa;
1917 the first Jazz record was released: "Dark Town Strutters
Ball"; 1919 AC Read completed the first Atlantic crossing by
airplane; 1935 earthquakes kill 50,000 in Quetta, Pakistan;
1955 construction of the Soviet Cosmodrome launch facilities
began; 1957 Britain performed atmospheric nuclear bomb tests
at Christmas Island; 1957 the US performed atmospheric
nuclear bomb tests at Bikini Atol; 1961 South Africa became a
Republic, leaving the British Commonwealth; 1969 John Lennon
& Yoko Ono recorded "Give Peace a Chance"; 1974 USSR
performed nuclear bomb tests at Semipalitinsk, Eastern Kazakhstan;
1977 the Trans-Alaska oil pipeline was completed; 1979
Zimbabwe (then Rhodesia) proclaimed independence; 1984 US
performed nuclear bomb tests at a Nevada test site; 1990 the
"Zodiac killer" killed his third victim in New York City; 1990
Seinfeld debuts on NBC as the "Seinfeld Chronicles";
Born today were: in 1819 poet Walt Whitman; 1837
French writer Ernest Daudet; 1872 English
cartoonist/illustrator William Heath Robinson; 1908 actor Don
Ameche; 1910 first woman Doctor of Medicine, Elizabeth
Blackwell; 1912 actress Barbara Pepper; 1916 actress
Judy Campbell; 1923 Prince of Monaco Clint Rainier III;
1930 actor Clint Eastwood; 1938 musician Peter Yarrow
(Peter, Paul & Mary); 1948 actress Rhea Perlman; 1950
actor Gregory Harrison; 1950 actor Tom Berenger; 1960
actor/comedian Chris Elliott; 1964 musician DMC; 1965
model/actress Brooke Shields;
Thanks for reading Goodies to Go!