Goodies To Go! Newsletter #385

By Vince Barnes

************************************************************
                      Goodies to Go (tm)
               April 18, 2006 -- Newsletter # 385
 
     This newsletter is part of the internet.com network.
                  http://www.internet.com
 
          Please visit http://www.htmlgoodies.com
************************************************************
 
A Note about Email Filtering:
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.
 

Featured this week:
 
*   Goodies Thoughts - JavaScript Time
*   Q & A Goodies
*   Discussion Goodies
*   News Goodies
*   Feedback Goodies
*   Windows Tech Goodie of the Week 
*   And Remember This...

JavaScript Time
 
It's that time again!  Or is it?  Sometimes it's difficult to tell what the time is, or how much of it has passed since a particular point in time.  That's frequently a problem.  We're in luck, however, when we're on a web page, because at that point in time we can use some features that will help us to know exactly how much time is passing.  I'm talking, of course, about JavaScript timers.
 
JavaScript timers are pretty useful for timing various actions on a web page.  A common use would be for rotating advertising banners or messages on a page.  I'm sure that you can think of many useful things to do with a timer without my prompting, so let's forge ahead and see what this timer is and how to use it.
 
The JavaScript function we are going to use is the function:
window.setTimeout ()
There are two parameters we can use with this function.  The first one says what to do, and the second says how long to wait before doing it.  The first can be a single statement, a collection of statements separated by semicolons and enclosed in quotes, or the name of a function defined elsewhere on the page.  The second is a value measured in milliseconds, so that 10000 would be ten seconds.
 
The best way to describe how to use it is with an example.  This example is a tribute to the father of symbolic logic, Charles Dodgson, also known as Lewis Carroll, author of Alice in Wonderland and Alice Through the Looking Glass.
 
Here's the page (remember our "<." feature -- see the note in Q&A Goodies, below):
 
<.html>
<.head>
<.script language="javascript">
function speakwalrus()
  {
    document.write("<.h1>&quot;The time has come,&quot; the Walrus said, &quot;to speak of many things.&quot;<.h1>");
  }
<./script>
<./head>
<.body onload="window.setTimeout('speakwalrus()', 9000)">
<.h1>
The Walrus and the Carpenter<.br>
Walked on a mile or so,<.br>
And then they rested on a rock<.br>
Conveniently low:<.br>
And all the little Oysters stood<.br>
And waited in a row.<.br>
<./h1>
<./body>
<./html>
 
On this page, I first define a JavaScript function named "speakwalrus" that writes out a document to the browser including the line the Walrus speaks.  In the body of the page, I use the page "onload" event to start my timer, with a first parameter telling it to execute the "speakwalrus" function, and a second parameter telling it to wait nine seconds before doing so.  The body of the page is the verse of the poem that precedes the famous quotation.
 
Very simple, very useful!
 
I should point out that the use of "&quot;" in the Walrus' spoken piece is to provide the quotation marks around the actual spoken parts.  the document.write statement itself is a single statement ending after the close parenthesis, at the semicolon.  The semicolons in "&quot;" are part of the mechanism for including the quote character in a string, not statement separators as mentioned in the third paragraph, above.
 
For those who would like to read the whole poem from "Alice through the Looking Glass", I found this link:
http://www.rivendale.net/miscellanea/walrus.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
http://www.htmlgoodies.com/mentors/
 

XXXXXXXXXXXXXXXXXXXXXXXXXX
X                        X
X   Please take note:    X
X                        X
XXXXXXXXXXXXXXXXXXXXXXXXXX
 
We have had a number of people indicate that their email client programs are interpreting code examples in this newsletter as actual HTML code instead of text.  To overcome this problem and to enable everyone to read the newsletter, there is a period after the "<" in each tag.  If you cut and paste to try out code examples, please remember to remove the periods.  Wherever we intend you to use "<." in your code, the example will show "<..".  In this way, you will be safely able to use a global edit to change "<." to "<".  Thanks to all of you for your patience with this; if this technique creates an undue problem for you however, please let us know via our feedback address (see Feedback, below).
 

*** This question was submitted to our Mentor Community.
     The answer was provided by one of our Mentor Volunteers
    
Q. Is there anyway either in JavaScript or html or css to define a length for a selection box?
 
A. CSS works best.  If you want to assign the same properties to all selects in a document then you can do the following:
select {color:blue;font-weight:bold;width:200;background-color:white;}
In the above example the width of the select is set at 200 pixels.
If you want different properties for each individual select then you would add a class to the select tag like so:
<.select class="selcss">
Then the CSS stuff would look like this:
.selcss {color:blue;font-weight:bold;width:200;background-color:white;}

*** This question was submitted to our Mentor Community.
     The answer was provided by one of our Mentor Volunteers
    
Q. I am working with a button on my page:
<.STYLE>
.start {font-size: 8pt; color:#ffff00; background:#cc3333}
.end {font-size: 8pt; color:#cc3333; background:#ffff00}
<./STYLE>
<.SCRIPT LANGUAGE="javascript">
function highlightButton(s) {
if ("INPUT"==event.srcElement.tagName)
event.srcElement.className=s
}
<./SCRIPT>
The above is placed above <./head>
Then the <.FORM><./FORM> lines are placed where I need them to be below <.BODY>
<.FORM NAME=highlight onMouseover="highlightButton('start')" onMouseout="highlightButton('end')">
<.INPUT TYPE="button" VALUE="Hot Computer Deals Of The Week!" onClick="location.href='http://www.tigerdirect.com/email/kb/promo.asp?ID=1671'">
<./form>
I would like the button to start out as it appears for onMouseout="highlightButon('end')"
When the page loads, it is the standard grey default size button. Using <.STYLE><./STYLE> I now have some control over the button size by specifying font-size: 8pt; Of course, nothing happens until the cursor is passed over the button.
I tried some [ onload= ] ideas that didn't work. Is there a way to control the initial appearance of the button?
 
A. I added a class attribute to the INPUT tag. I just used one of the classes you had already set in your styles, but you can create another one. The javascript helps with the changes.
<.form name="highlight" onmouseover="highlightButton('start')" onmouseout="highlightButton('end')">
<.input class="end" type="button" value="Hot Computer Deals Of The Week!" onclick="location.href='http://www.tigerdirect.com/email/kb/promo.asp?ID=1671'" />
<./form>
I'm not sure which version of HTML you are using... I'm used to writing in XHTML 1.0, so I've made the tags lowercase and added a / to the end of the INPUT.


*** This question was submitted to our Mentor Community.
     The answer was provided by one of our Mentor Volunteers
 
Q. I have what seems like a complicated Image Rollover html. Here's an example:
Image 1 --> rollover --> becomes Image 1a
but I want two other images on the same page to also change at the same time Image 1 becomes Image 1a
 
A. Here is an example of rolling over one image and having another image change.  Take a look at it and you should be able to determine how to have two images change at the same time.
<.html><.head><.title>Image Flip<./title><./head>
<.body>
<.A HREF="#" onMouseOver="document.ani1.src='imgflip/drum.gif';document.ani2.src='imgflip/cherry.gif'"
onMouseOut="document.ani1.src='imgflip/cherry.gif';document.ani2.src='imgflip/drum.gif'";return true>
<.img src="imgflip/cherry.gif" name="ani1" width="100" height="100" BORDER="0"><./A>
<.A HREF="#"><.img src="imgflip/drum.gif" name="ani2" width="100" height="100" BORDER="0"><./A>
<./body><./html>

*** This question was submitted to our Mentor Community.
     The answer was provided by one of our Mentor Volunteers
    
Q. Is there anyway that I can make multiple frames load at a time without using a form, and using just a regular link?
 
A. There are a couple of different ways you can accomplish this.  The first example uses "inline JavaScript" to load two frames:
<.a href="#" onClick="parent.frame_name1.location='page1.html';parent.frame_name2.location='page2.html'">Click Me<./a>
The second example uses a function that is passed the documents to load when you click on a link:
<.script type="text/javascript">
  function Doframes(page1,page2)
    {
     parent.frame_name1.location=page1
     parent.frame_name2.location=page2
    }
<./script>
<.a href="#" onClick="Doframes('page1.html','page2.html')">Click Me<./a>
In both examples you need to specify the name of the frame that you want the documents to load in.


*** This question was submitted to our Mentor Community.
     The answer was provided by one of our Mentor Volunteers
 
Q. I have one more problem with JavaScript programs.  A lot of times I create variables and then when I try to use them I get an error saying that they are undefined.  Why is this?  Here is an example of when this happens:
<.SCRIPT LANGUAGE="JavaScript">
function part1()
{
var a = 1;
}
function part2()
{
if (a == 1)
{
document.form.textbox.value = "The variable worked, finally!!!";
}
}
<./SCRIPT>
<./HEAD>
<.BODY>
<.FORM NAME="form">
<.INPUT TYPE="RADIO" NAME="why_doesnt" VALUE="the_variable_work" onClick="part1();">
<.INPUT TYPE="BUTTON" VALUE="Variable work?" onClick="part2();">
<.INPUT TYPE="TEXT" NAME="textbox" VALUE="If the variable worked, a message would appear here.">
<./FORM>
If I write this in a document and click the button, an error message comes up saying that it is undefined.  I've tried creating the variable directly from the event handler, renaming the variable, using checkboxes instead of radio buttons, and nothing works.  I have tried putting an alert box in the function and it comes up so I know the function is executing.  It just won't remember the variable.
 
A. You are declaring a as a variable from within a function. This makes it a local variable that is only accessable by that function.  You can make it a global variable that is accessable by any function by declaring it from outside any functions, but still between the script tags. Usually global variables are declared before the first function for the sake of clarity, but they can be declared from anywhere between the script tags, just not inside a function. Here's your script with a as a global variable:
<.SCRIPT LANGUAGE="JavaScript">
var a = 0; // declares a as a global variable and initializes it to 0
function part1()
{
a = 1; // the function sets the global variable a to equal 1
}
function part2()
{
if (a == 1)
{
document.form.textbox.value = "The variable worked, finally!!!";
}
}
<./SCRIPT>
<./HEAD>
<.BODY>
<.FORM NAME="form">
<.INPUT TYPE="RADIO" NAME="why_doesnt" VALUE="the_variable_work" onClick="part1();">
<.INPUT TYPE="BUTTON" VALUE="Variable work?" onClick="part2();">
<.INPUT TYPE="TEXT" NAME="textbox" VALUE="If the variable worked, a message would appear here.">
<./FORM>

Discussion Goodies
***********************************
 
Have you seen the discussion forums on the HTML Goodies website?  It's a great place to get help from others who, just like you, are developing web pages.  Many different topics appear in the forum, and a new one will appear if you create it!  Here's a sample of recent topics:
 
 
 
 
How to make the Java script work on Mozilla browser?:
http://www.webdeveloper.com/forum/showthread.php?threadid=102942
 

News Goodies
***********************************
 
Spammers Settle With FTC
[April 18, 2006] They told the agency they won't do it again.
Read the article:
http://www.internetnews.com/xSP/article.php/3599796
 

Symantec's $1B Tax Bill
[April 18, 2006] An audit of its Veritas acquisition goes from bad to worse.
Read the article:
http://www.internetnews.com/bus-news/article.php/3599731
 

Microsoft Refreshes Windows Defender
[April 18, 2006] Improved detection and taskbar support added to beta release of spyware detection tool.
Read the article:
http://www.internetnews.com/security/article.php/3599581
 

Oracle Takes Telcos From Silo to SOA
[April 18, 2006] The company packs its software into an SOA for telco providers.
Read the article:
http://www.internetnews.com/storage/article.php/3599626
 

Video Compression And The Future
[April 18, 2006] The world as you see it through video is about to change.
Read the article:
http://www.internetnews.com/infra/article.php/3599551
 

Latest Microsoft Security Glitch Limited
[April 18, 2006] UPDATED: So far. But there is no telling how many apps could be hit tomorrow.
Read the article:
http://www.internetnews.com/security/article.php/3599756
 

Level 3 Buys More Local Fiber
[April 17, 2006] The company snatches up ICG's fiber network for $163 in stock and cash.
Read the article:
http://www.internetnews.com/infra/article.php/3599446
 

Borland Defines Software Requirements
[April 17, 2006] The company says Caliber DefineIT closes the gap between business managers and IT personnel.
Read the article:
http://www.internetnews.com/ent-news/article.php/3599401
 

Jury Clears RealNetworks of Infringement
[April 17, 2006] Unanimous jury says Real did not infringe patents of Ethos Technology. 
Read the article:
http://www.internetnews.com/ec-news/article.php/3599406
 

Virtualization Management, Cassatt-Style
[April 17, 2006] The company's new software manages physical servers and virtual machines from VMware, Xen and Microsoft.
Read the article:
http://www.internetnews.com/ent-news/article.php/3599286


 
 
 
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:
 
 
We already receive a lot of email every day.  This address helps 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/

Thanks for all your feedback!


Windows Tech Goodie of the Week 
***********************************
 
Efficiently Paging Through Large Result Sets in SQL Server 2000
 
This article looks at updating our previous stored procedure to provide an even-more efficient approach. The stored procedure presented at the end of this article can be used for classic ASP applications, custom paging with the DataGrid in ASP.NET 1.x, or used by the ObjectDataSource to provide custom paging for the GridView in ASP.NET 2.0 applications. Read on to learn more!
 
 

*** AND ***
 

Use Relative Instead of Absolute Paths
 
The web is such a fluid environment that, at any time, you might need to move or rename a branch of your application or maybe even the entire application. It's times like these that you'll be kicking yourself for hard coding all those links to your application's supporting files and images.
 
 

*** AND ***
 

Subclassing Pages and Master Pages in ASP.NET 2.0
 
Sometimes the simplest things in ASP.NET 2.0 turn out to be the hardest things to implement. One example is trying to have a shared property across all your web pages. This article shows you how to subclass the System.Web.UI.Page class in order to build a master page that "knows" the user and let's you easily add page-wide properties.
 

And Remember This ...
***********************************
 
On this day in...
 
1775 Paul Revere & William Dawes warned "the British are coming!"; 1868 The San Francisco Society for Prevention of Cruelty to Animals was formed; 1902 Denmark became the first country to adopt fingerprinting to identify criminals; 1906 San Francisco Earthquake killed over 700 people; 1909 Joan of Arc wasdeclared a saint; 1924 The first crossword puzzle book was published (Simon & Schuster); 1945 Clandestine Radio 1212, after broadcasting pro-nazi propoganda for months used their influence to trap 350,000 German army group B troops; 1948 The International Court of Justice opened at The Hague in the Netherlands; 1963 Dr James Campbell performed the first human nerve transplant; 1964 Geraldine Mock of the US became the first woman to fly solo round the world; 1968 London Bridge was sold to a US oil company (to be erected in Arizona); 1980 Zimbabwe (formerly Southern Rhodesia) declared independence from the UK; 1990 The US Supreme Court ruled that states could make it a crime to possess or look at child pornography, even in one's home;


Born today were: in 1480 infamous murderess Lucretia Borgia; 1921 actress Barbara Hale;  1922 actress Avril Angers; 1925 actor Bob Hastings; 1926 German actor Gunter Meisner; 1929 actor Peter Jeffrey; 1934 actor James Drury; 1940 Princess of Monaco Ira van Furstenburg (Virginia Caroline); 1946 English actress Hayley Mills; 1946 musician Lenny Baker (Sha Na Na); 1947 actor James Woods; 1953 actor Rick Moranis; 1961 English actress Jane Leeves; 1963 Talk show host Conan (Christopher) O'Brien; 1976 actress Melissa Joan Hart;


*************************************************************
EarthWeb's family of online services for IT insiders
*************************************************************
IT MANAGEMENT http://www.earthweb.com/dlink.index-jhtml.72.949.-.0.jhtml


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