Goodies to Go (tm)
April 28, 2004-- Newsletter #230

By Vince Barnes



Goodies to Go (tm)
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 http://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>&nbsp;</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

 

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. 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]="http://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>

 

 

 

 

Top

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

 

 

 

 


Top

Goodies Peer Reviews


 

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



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!

 

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