Goodies to Go (tm)
May 31, 2004-- Newsletter #287

By Vince Barnes



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

 

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 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:
http://www.htmlgoodies.com/letters/225.html
http://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: http://www.htmlgoodies.com/letters/230.html  and http://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: http://www.htmlgoodies.com/letters/224.html - Ed.]


 

 

 

 

 

Top

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

 

 

 

 


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




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!

 

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