Goodies to Go ™
April 28, 2004–Newsletter #230
This newsletter is part of the internet.com network.
http://www.internet.com
Featured this week:
* Goodies Thoughts – Time and Time
Again!
* Q & A Goodies
* News Goodies
* Goodies Peer Reviews
* Feedback Goodies
* And Remember This…
Goodies Announcement
Just in case you missed
it before, 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 – Time and Time Again!
Last week I talked about using the JavaScript setTimeout() function to control
timed events, and suggested a variety of neat things that could be accomplished
with such a feature (see
https://www.htmlgoodies.com/letters). I mentioned
banner rotation and seem to have struck a nerve! I got a lot of questions from
folks who wanted me to provide more details, so I though that this week I’d
provide an example of a timed event that repeats itself continuously until the
client browser moves off the page.
The example I have chosen provides a neat menu feature such that a menu can be
placed on a long page and will stay where it is on window while the page is
scrolled up and down around it. The original script was contributed to
http://www.JavaScriptSource.com
by Randy Bennett, and is available there also. Thanks Randy!
First, here’s the script:
<SCRIPT LANGUAGE="JavaScript">
function setVariables()
{
if (navigator.appName == "Netscape")
{
v=".top=";
dS="document.";
sD="";
y="window.pageYOffset";
}
else {
v=".pixelTop=";
dS="";
sD=".style";
y="document.body.scrollTop";
}
}
function checkLocation()
{
object="object1";
yy=eval(y);
eval(dS+object+sD+v+yy);
setTimeout("checkLocation()",10);
}
</script>
That script can go up in the header of the page. Next, we are going to kick off
the action by using the OnLoad event of the page to trigger both of the two
functions defined in the script by adding the event to the <BODY> tag of the
page, thus:
<BODY OnLoad="setVariables();checkLocation()">
Finally, we will define the menu and contain it within <DIV></DIV> tags,
giving the Division an Object name (id) to which we can refer in the JavaScript
functions (and did refer, as you will see in a minute.)
<div id="object1" style="position:absolute; visibility:show; left:0px; top:0px;
z-index:2">
<table width=130 border=0 cellspacing=10 cellpadding=0>
<tr><td> </td></tr>
<tr><td><a target="_top" href="index.htm">Home Page</a></td></tr>
<tr><td><a href="Services.asp" >Our Services</a></td></tr>
<tr><td><a href="Team.asp" >Our Team</a></td></tr>
</table>
</div>
That’s all the code, so here’s a run-down on what’s happening.
As previously mentioned, there are two functions in the script. The first,
setVariables() sets up some global variables based on the client browser that is
being used to visit the site. This helps with cross-browser compatibility. The
variables are global, meaning that they are available to all JavaScripts on this
page, not just within this function (which would be local), because even though
they are declared within a function, they lack the "var" keyword and therefore
default to global scope.
The second, checkLocation(), which uses those variables, does four things.
First, it declares a variable called object which holds the name of the Division
Id I mentioned earlier. I’m not sure why Randy declared this variable within the
second function, since its value will not change, but there it is. Second, it
declares a variable called "yy" and assigns it a value equal to the uppermost
pixel of the scrollable area currently in view (in Netscape, this is being found
by using window.pageYoffset — in other browsers, by document.body.scrolltop;
this is controlled by the value of variable y, which was set in the setVariables()
function.) Third, there is a statement using the eval function which in Netscape
resolves to:
document.object1.top=yy
where yy is the value obtained in second step; and in other browsers resolves
to:
object1.style.pixeltop=yy
These statements, in their appropriate browser, cause object1 to be relocated to
the top of the currently viewable scrollable area.
The fourth and final part of checkLocation() uses the good old setTimeout()
function discussed last week to invoke the checkLocation() function again after
10 milliseconds. Thus the function calls itself, and rechecks the current
position of object1 every 10 milliseconds for as long as the page is open. If
you try it, you will find that setTimeout() is not affected by the browser’s
Stop button, so even if stop is pressed, the relocation of the menu will
continue to occur when the page is scrolled.
It is worth your time to follow through the construction of the eval statement
in there, based on the variables previously defined, because it gives a very
good insight into the way the JavaScript constructs and uses elements and
statements "on the fly".
Also worthy of note is the way the menu was constructed. It is built as a table
with a specified width (here, 130 pixels.) The area the table will occupy should
not have anything else in it if you intend to be able to read the menu items!
One way to control this would be to follow the </DIV> statement with a second
table, into which everything else on the page can be placed. This second table
would have one row and two elements. The first element would have a set width of
130 pixels (or whatever you chose for your menu width) and contain nothing
visible. The second element would hold everything else on the page. This second
table would look like this:
<table width="100%">
<tr>
<td width=130><font color="white"> </font></td>
<td>
Everything else on the page goes in this space
</td></tr>
</table>
</body>
</html>
And that’s it! There is quite a lot of nice code trickery in here, in addition
to illustrating how to use the setTimeout() to repeat and operation
indefinitely. Next week, I’m going to build on this example to show how it can
be used as a part of an easily maintained website. Until then,
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. Is there any way to launch a new window with a certain width and
height – WITHOUT using javascript?
A. Not that I know of. The javascript method window.open(..) is the only
way I know of to set the width and height of the window.
Q. I have utilized htmlgoodies to put together a slideshow. I have
several pictures of different sizes. While developing, all works fine. However,
after publishing and viewing from the live system, all pictures take the size of
the first picture in the series. Can this be corrected?
A. Here is some code that I put together that works with images of
different
sizes. It also associates a URL with each image.
<html>
<head>
<title>Imange and Link Slide Show</title>
<script language="JavaScript">
var a=0
// Enter your images Here along with the directory if need be.
var imgs=new Array()
imgs[0]="owls3.jpg"
imgs[1]="hawks2.jpg"
imgs[2]="pic221.jpg"
imgs[3]="eagle1.jpg"
// Array used for preloading
var myimages=new Array()
// Do the preload
for(i=0;i<imgs.length;i++)
{
myimages[i]=new Image()
myimages[i].src=imgs[a]
}
// Enter your URLS and what you want to go in the ALT property. This is so
when they mouse over the image
// There will be a small description of the Image or URL. Make sure you
separate them with an
// ampersand "&" so that the script can separate them out before writing out
the link.
var urls=new Array()
urls[0]="http://www.requestcode.com&Requestcode"
urls[1]="http://www.javascriptkit.com&Javascriptkit"
urls[2]="http://www.dynamicdrive.com&Dynamic Drive"
urls[3]="https://www.htmlgoodies.com&HTML Goodies"
// This is the function that displays the images and links. You should not
have to modify it.
function Doimglink()
{
if(a>imgs.length-1)
{a=0}
if(a<0)
{a=imgs.length-1}
newurls=urls[a].split("&")
if(document.layers)
{
document.mydiv.document.write("<a href=’"+newurls[0]+"’><img
src=’"+imgs[a]+"’ border=’0′ alt=’"+newurls[1]+"’></a>")
document.mydiv.document.close()
}
if(document.getElementById)
{
elm=document.getElementById("mydiv")
elm.innerHTML="<a href=’"+newurls[0]+"’><img src=’"+imgs[a]+"’
border=’0′ title=’"+newurls[1]+"’></a>"
}
}
// function used to display random imagae
function rannum()
{
len=imgs.length // how many entries in the array
prev=a // Save the previous image index
a=Math.round(Math.random()*(len-1))
// If the current image equals the previous image add one to get a
different image.
if(a==prev)
{a++}
}
window.onload=Doimglink
// In the DIV below you may have to add the top and left properties to the
style tag to position it
// correctly in the window. You must keep it positions as absolute for it to
work in NS4.0+ browsers.
</script>
</head>
<body onload="Doimglink()">
<center><h1>Manual Slide Show With Links</h1>
<br>
<a href="javascript:self.close()">Close Window</a></center>
<div id=’mydiv’ style="position:absolute;top:120;left:200"></div>
<div id=’ctrldiv’ style="position:absolute;top:120;left:100">
<a href="javascript:a++;Doimglink()">Next Image</a> <br>
<a href="javascript:a–;Doimglink()">Previous Image</a> <br>
<a href="javascript:rannum();Doimglink()">Random Image</a>
</div>
</body>
</html>
Q. I have reviewed several web sites and noticed that most have commas
between the keywords in the META NAME="Keywords" tag, however the htmlgoodies
site does not. Can you tell me which is better?
A. I believe it is a personal preference whether to use commas or spaces
between the words and phrases in your keyword META TAGS. Most search engines,
from what I have learned, treat commas as spaces so using no commas is the same
thing. I usually seperate the words and phrases with a comma and no space.
Q. I am using CSS with class parameters and within a particular class, I
just want one letter of each word on a certain phrase to be a different color,
size and font. How would I use CSS for that instead of using the whole <font>
tag for each letter? For example:
td.text {font:11pt Arial, Verdana, Helvetica; color:black; align:justify}
<td class=text>The Company Named Here was founded in 2003 by some smart
person……. </td>
I would like C, N, and H to be different. How would I code that? I have found a
lot of information about using CSS all over the internet, but nothing about just
one letter that is already within a class.
A. The easiest thing to do would be to enclose the letter in a span tag
and specify styles for the span.
For example, your CSS would look like this:
.text {
font: 11pt Arial, Verdana, Helvetica;
color: black;
align: justify; }
.text span {
color: blue; }
and your HTML would look like this:
<td class="text">The <span>C</span>ompany <span>N</span>amed
<span>H</span>ere was founded in 2003 by some smart person…</td>
The C, N, and H would be blue.
You could also set up different classes for each letter. Examples follow:
.text {
font: 11pt Arial, Verdana, Helvetica;
color: black;
align: justify; }
.text .c { color: blue; }
.text .n { color: red; }
.text .h { color: green; }
and the HTML:
<td class="text">The <span class="c">C</span>ompany
<span
class="n">N</span>amed <span class="h">H</span>ere was founded in 2003 by
some smart person…</td>
News Goodies
Spam Becomes Public Enemy #1
[April 28, 2003] Although they all have different policies to combat the
problem, AOL, Microsoft and Yahoo plan to join forces against
spam, marking the first time the three online behemoths have
ever joined forces on a single initiative.
Click
here to read the article
Cisco, Spectralink Announce New Wi-Fi Phones
[April 28, 2003] The world of 802.11-based Voice over IP got a shot in the
arm today as market leader Spectralink announced new products, plus NEC and
Cisco decide to enter the Wi-Fi telephony field.
Click
here to read the article
Net2Phone, Hughes Deliver VoIP Via Satellite
[April 28, 2003] The companies’ voice over Internet protocol service
via satellite is expected to be popular in markets with under-developed
telecom infrastructure.
Click here to read the article
RSA Targets Govt. Wireless Business
[April 28, 2003] The security firm intros software for mobile phones and
PDAs that meets the security standards of the U.S. and Canadian governments.
Click here to read the article
Microsoft Reaffirms Telematics Interests
[April 28, 2003] The firm introduces a Web services- and
Bluetooth-oriented version of its software platform for motor vehicles.
Click here to read the article
Apple’s Making Serious Music
[April 28, 2003] The computer maker that asked you to ‘Rip, Mix and Burn,’
is now legally offering the music to do it with the launch of its own
download service.
Click here to read the article
Movie, Music Giants Win One, Lose One
[April 28, 2003] Less than a day after celebrating a victory over Verizon,
media moguls dealt a file sharing setback in a Los Angeles courtroom.
Click here to read the article
Mailblocks Launches Web Ad Campaign
[April 28, 2003] The new Web mail service will target fed-up Hotmail and
Yahoo! users looking for a spam-free alternative.
Click here to read the article
Portals: Coming to a Suite Near You
[April 25, 2003] FEATURE: The market for enterprise portals is
converging, creating unique business opportunities for the major
software vendors. BEA, Plumtree and IBM approach it from different
angles while Microsoft just wants market share.
Click here to read the article
Microsoft Opens Windows Server 2003
[April 24, 2003] UPDATE: CEO Ballmer makes his pitch for one of its
most important software releases in the company’s history.
Click here to read the article
Every week a site selected each week 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/
Many thanks to Matthew Silverman for pointing out our
blooper in last week’s newsletter, and for providing a great
answer! Here’s his note, in its entirety:
I noticed a question in Goodies To Go 228 about how to
construct a form that can a search engine selected from a
box. The answer given seems to be the answer to a different
question, one printed ina previous newsletter. I have coded
such a form using JavaScript, which also displays the logo
of the engine, which is linked to the engine’s home page;
here it is.
<SCRIPT LANGUAGE="JavaScript">
searchPath = new Array() searchPath[0]="http://www.google.com/search?q="
searchPath[1]="http://search.yahoo.com/bin/search?p="
searchPath[2]="http://www.ask.com/main/askjeeves.asp?ask="
searchPath[3]="http://uk.altavista.com/q?q="
searchPath[4]="http://hotbot.lycos.com/?MT="
imagePath= new Array() imagePath[0]="http://www.google.com/logos/Logo_40wht.gif"
imagePath[1]="http://us.i1.yimg.com/us.yimg.com/i/yahoo.gif"
imagePath[2]="http://ask.com/i/asksm.gif"
imagePath[3]="http://a12.g.akamai.net/7/12/282/07/av.com/static/ave/avlogore
s.gif"
imagePath[4]="http://a1112.g.akamai.net/7/1112/492/02012000/s.hotbot.com/ima
ges/hblogo7.gif"
linkPath=new Array()
linkPath[0]="http://www.google.com"
linkPath[1]="http://www.yahoo.com"
linkPath[2]="http://www.ask.com" linkPath[3]="http://uk.altavista.com"
linkPath[4]="http://hotbot.lycos.com"
function goSearch() {
var x = document.searchform.engine.selectedIndex
var y = searchPath[x] + document.searchform.term.value
window.open(y)
}
function engineChange() {
document.engineLogo.src =imagePath[document.searchform.engine.selectedIndex]
}
function engineLink(){ location.href=linkPath[document.searchform.engine.selectedIndex]
</SCRIPT>
<FORM NAME="searchform" METHOD="post" ACTION="javascript:goSearch()">
Search the web for: <INPUT TYPE="text" NAME="term"> using
<SELECT NAME="engine" SIZE=1 onChange="engineChange()">
<OPTION SELECTED>Google</OPTION> <OPTION>Yahoo</OPTION>
<OPTION>Ask Jeeves</OPTION> <OPTION>AltaVista</OPTION>
<OPTION>HotBot</OPTION> </SELECT> <INPUT TYPE="submit"
VALUE="Go!"> <A HREF="javascript:engineLink()"><IMG
SRC="http://www.google.com/logos/Logo_40wht.gif" NAME="engineLogo"
BORDER=0 ALIGN="middle"></A> </FORM>
To see this code in action please visit
http://314.freehosting.net/welcome.html
Top
And Remember This . . .
On this day in…
1789 Mutiny on The Bounty!
Unhappy with the oppressive command style of Captain Bligh
and wishing for Mauatua, a native Tahitian woman with whom
he had recently fallen in love, Fletcher Christian with
twenty-five petty officers and crew, took over the HMS
Bounty and set Bligh and his officers adrift in a small,
crowded long boat. The Bounty was supposed to be bringing
Breadfruit trees up to the West Indies and had stopped in
Tahiti for more than five months while gathering the sapling
trees. The men maybe got a little too much paradise!
Christian sailed back to Tahiti, where sixteen of the crew
decided to remain and take their chances with the British
authorities. Christian, eight others of his crew, six
Tahitian men, a dozen Tahitian women and a child sailed the
Bounty (eventually) to Pitcairn Island, 1,000 miles east of
Tahiti, where they settled. The sixteen crewmen in Tahiti
were taken back to England where they were hanged. The
British were not able to find Christian. Today, about 40
people live on Pitcairn Island, most of whom can trace their
lineage back to Christian and his fellows.
Born today were: in 1758: James Munroe (5th President
of the United States); 1926: Harper Lee (Nelle
Harper) (author of "To Kill a Mockingbird"); 1950:
Tonigh Show TV talk show host Jay Leno
Thanks for reading Goodies to Go!
