************************************************************
Goodies to Go ™
April 11, 2005 — Newsletter # 332
This newsletter is part of the internet.com
network.
http://www.internet.com
************************************************************
Featured this week:
* Goodies Thoughts – Banner Rotation
* Q & A Goodies
* News Goodies
* Feedback Goodies
* Windows Tech Goodie of the Week
* And Remember This…
* Q & A Goodies
* News Goodies
* Feedback Goodies
* Windows Tech Goodie of the Week
* And Remember This…
************************************************************
Banner Rotation
A few people have asked me recently for banner ad rotation and similar time
based solutions, so I thought that this week I’d provide an example of a
timed event that repeats itself continuously until the client browser moves
off the page.
based solutions, so I thought 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!
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 (remember our "<." feature — see the note in Q&A
Goodies, below):
Goodies, below):
<.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>
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:
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.)
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>
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.
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.
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".
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 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>
<.tr>
<.td width=130><font color="white"> <./font><./td>
<.td>
Everything else on the page goes in this space
<./td><./tr>
<./table>
<./body>
<./html>
<./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. Study it, copy it and used it for any timed event you wish!
addition to illustrating how to use the setTimeout() to repeat and operation
indefinitely. Study it, copy it and used it for any timed event you wish!
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/
***********************************
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. How do you print a frame other that the one you the window.print()
command is in?
A. Sometimes you need to place focus on the frame that you want to print
before issuing the window.print command. Try setting up a function like
this:
function FrPrint()
{
parent.middle.focus()
parent.middle.window.print()
}
before issuing the window.print command. Try setting up a function like
this:
function FrPrint()
{
parent.middle.focus()
parent.middle.window.print()
}
Then call the function like this:
<.input type="button" value="Print" onClick="FrPrint()">
<.input type="button" value="Print" onClick="FrPrint()">
Q. I have a piece of Java script I got off the HTML goodies page to open a
new window. It works well enough but what I want it to do is to run from an onClick event handler. How do I get it to do this.?
new window. It works well enough but what I want it to do is to run from an onClick event handler. How do I get it to do this.?
A. You will have to place the window.open into a function and then You can
call the function either by using the onClick or by placing the function
call in the "href". Here is an example:
<.html>
<.head>
<.title>Open new window<./title>
<.script LANGAUAGE="javascript">
function OpenWin()
{
MessageWin=window.open ("http://www.wsabstract.com",
"newwin",config="location=no,status=no,directories
=no,toolbar=no,scrollbars=no,menubar=no,resizable=no");
}
<./script>
<./head>
<.body>
<.center>
call the function either by using the onClick or by placing the function
call in the "href". Here is an example:
<.html>
<.head>
<.title>Open new window<./title>
<.script LANGAUAGE="javascript">
function OpenWin()
{
MessageWin=window.open ("http://www.wsabstract.com",
"newwin",config="location=no,status=no,directories
=no,toolbar=no,scrollbars=no,menubar=no,resizable=no");
}
<./script>
<./head>
<.body>
<.center>
You can do it this way:
<.a href="JavaScript:OpenWin()">Click here<./a> <.br>Or you can use the
onClick
event:
<.a href="#" onClick="OpenWin()">Click here<./a>
<./center>
<./body>
<./html>
<.a href="JavaScript:OpenWin()">Click here<./a> <.br>Or you can use the
onClick
event:
<.a href="#" onClick="OpenWin()">Click here<./a>
<./center>
<./body>
<./html>
This is but one example. You can also set up the function to accept a
variable that contains the link you want to open up in the new window like
this:
<.html> <.head>
<.title>Open new window<./title>
<.script LANGAUAGE="javascript">
function OpenWin(linkid)
{
MessageWin=window.open
(linkid,
"newwin",config="location=no,status=no,directories=no,toolbar=no,scroll
bars=no,menubar=no,resizable=no");
}
<./script>
<./head>
<.body>
<.center>
variable that contains the link you want to open up in the new window like
this:
<.html> <.head>
<.title>Open new window<./title>
<.script LANGAUAGE="javascript">
function OpenWin(linkid)
{
MessageWin=window.open
(linkid,
"newwin",config="location=no,status=no,directories=no,toolbar=no,scroll
bars=no,menubar=no,resizable=no");
}
<./script>
<./head>
<.body>
<.center>
You can do it this way:
<.a href="JavaScript:OpenWin(‘https://www.htmlgoodies.com’)">Click here<./a>
<.br>Or you can use the onClick event:
<.a href="#" onClick="OpenWin(‘https://www.htmlgoodies.com’)">Click here<./a>
<./center> <./body> <./html>
<.a href="JavaScript:OpenWin(‘https://www.htmlgoodies.com’)">Click here<./a>
<.br>Or you can use the onClick event:
<.a href="#" onClick="OpenWin(‘https://www.htmlgoodies.com’)">Click here<./a>
<./center> <./body> <./html>
This will allow you to use the same function for multiple links.
Q. I need to set the background to ivory for the cells within my links table
and also to center text witin each cell, make font size 8 points, and change
text to uppercase. Here is the html code:
<.table id="links">
<.tr>
<.td>
<.a href="#">Home Page<./a>
<./td>
<.td>
<.a href="#">Tickets<./a>
<./td>
<.td>
<.a href="#">Events<./a>
<./td>
<.td>
<.a href="#">Tour<./a>
<./td>
<.td>
<.a href="#">Contact Us<./a>
<./td>
<./tr>
<./table>
and here is my css sheet:
body {background-image: url(back.jpg)}
b {color: blue}
a {text-decoration: none; color: black}
a: hover {color: red; text-decoration: underline}
#links {width: 100%; border-bottom: solid red 3px; center center;
font-size: 8pt; font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase}
td {background-color: ivory; center center; border: groove red 5pt}
#calendar {float: right; border: groove red 10pt; width: 75%}
th {background-color: lightblue; font-family: Arial, Helvetica,
sans-serif;
border: solid blue 1px}
.prev {border-style: none; background-color: white}
.next {border-style: none; background-color: white}
body {background-image: url(back.jpg)}
b {color: blue}
a {text-decoration: none; color: black}
a: hover {color: red; text-decoration: underline}
#links {width: 100%; border-bottom: solid red 3px; center center;
font-size: 8pt; font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase}
td {background-color: ivory; center center; border: groove red 5pt}
#calendar {float: right; border: groove red 10pt; width: 75%}
th {background-color: lightblue; font-family: Arial, Helvetica,
sans-serif;
border: solid blue 1px}
.prev {border-style: none; background-color: white}
.next {border-style: none; background-color: white}
A. Your css should look something like this:
#links {
width: 100%;
border-bottom: solid red 3px; }
#links td {
background-color: ivory;
font-size: 8pt;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
border: groove red 5pt; }
I moved the text and font properties to the TD of the table instead. If you
want to center something, use the "text-align: center;" definition for your
style.
want to center something, use the "text-align: center;" definition for your
style.
Q. I love the Dual Image Flip effect. Instead of buttons I’d like to put
plain old links. I don’t know how to do this and if I change a thing, it
won’t work. Please help! Also, I need help on putting the image in one
place, and placing the text in another. I have a square box that I need to
put the image flip in.
A. Here’s what you want:
<.html>
<.head>
<.title>Image Flip<./title>
<.script language="JavaScript">
function flip(img,imgn)
{
document.images[imgn].src=img
}
<./script>
<./head>
<.body>
<.a href="somepage.html" onmouseover="flip(‘1.gif’,’pica’)" onmouseout="flip
(‘0.gif’,’pica’)">Mouse Over Me<./a>
<.img src="0.gif" name="pica" border="0"><./a><.br>
<./body>
<./html>
As far as placing the picture it depends on how you have your square box
defined. You could use a table to position the image or even layers such as
<.div> or <.span> in combination with the style tag.
<.html>
<.head>
<.title>Image Flip<./title>
<.script language="JavaScript">
function flip(img,imgn)
{
document.images[imgn].src=img
}
<./script>
<./head>
<.body>
<.a href="somepage.html" onmouseover="flip(‘1.gif’,’pica’)" onmouseout="flip
(‘0.gif’,’pica’)">Mouse Over Me<./a>
<.img src="0.gif" name="pica" border="0"><./a><.br>
<./body>
<./html>
As far as placing the picture it depends on how you have your square box
defined. You could use a table to position the image or even layers such as
<.div> or <.span> in combination with the style tag.
News Goodies
***********************************
Microsoft in Antitrust Deal With Gateway
[April 11, 2005] Microsoft makes peace with Gateway in a $150M holdover
settlement and takes a few pre-tax charges.
Read the article:
http://www.internetnews.com/bus-news/article.php/3496726
[April 11, 2005] Microsoft makes peace with Gateway in a $150M holdover
settlement and takes a few pre-tax charges.
Read the article:
http://www.internetnews.com/bus-news/article.php/3496726
AOL to Launch Into Space
[April 11, 2005] Its partnership with XM Satellite Radio heats up
competition.
Read the article:
http://www.internetnews.com/bus-news/article.php/3496821
VMware’s Workstation 5 Comes Alive
[April 11, 2005] The virtualization software provider adds several new perks
to keep developers interested in its first product.
Read the article:
http://www.internetnews.com/ent-news/article.php/3496621
Novell Launches Linux POS Solution
[April 11, 2005] New Novell Linux Point of Service 9 takes aim at Windows
retail solutions.
Read the article:
http://www.internetnews.com/dev-news/article.php/3496831
Open Sourcing on The Grid
[April 11, 2005] ActiveGrid gives the open source community a grid computing
tool and application server.
Read the article:
http://www.internetnews.com/dev-news/article.php/3496746
Microsoft Expands IP Licensing to Startups
[April 11, 2005] Eight growth industry companies and startups will tap right
into Microsoft’s new R&D playbook.
Read the article:
http://www.internetnews.com/bus-news/article.php/3496616
AMD Dual-Core Opteron to Debut in NY
[April 8, 2005] The company will brief its major partners next week, as it
heads toward a launch this summer.
Read the article:
http://www.internetnews.com/infra/article.php/3496561
Blogging Without Getting Burned
[April 8, 2005] As the public rushes to the blogosphere, employers and
employees have to figure out what’s right — and what’s stupid.
Read the article:
http://www.internetnews.com/ent-news/article.php/3496546
Gates Wants to Can Spam — Fast
[April 8, 2005] Microsoft founder and chief software architect continues to
push for eradication of spam.
Read the article:
http://www.internetnews.com/xSP/article.php/3496551
Sarge vs. The Hoary Hedgehog?
[April 8, 2005] The new Debian-based distro saw its first light today. But
will this cast a shadow of doubt over Debian’s own, yet-to-be-released,
offering?
Read the article:
http://www.internetnews.com/dev-news/article.php/3496541
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:
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
https://www.htmlgoodies.com/mentors/
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/
Thanks for all your feedback!
Windows Tech Goodie of the Week
***********************************
Searching Your Website with Microsoft Index Services
This article examines using Microsoft Index Services for your site’s search
functionality. We’ll build a simple, fast, and extensible search tool using
.NET and Microsoft Indexing Services along with the Adobe IFilter plug-in,
which allows MS Indexing Services to index PDF documents and display them in
your search results.
functionality. We’ll build a simple, fast, and extensible search tool using
.NET and Microsoft Indexing Services along with the Adobe IFilter plug-in,
which allows MS Indexing Services to index PDF documents and display them in
your search results.
*** AND ***
Server.Execute Sample Code
If you’ve been using ASP for any length of time, you’ve almost certainly
used Response.Redirect to move a user from one page to another. While
Response.Redirect gets the job done, it unfortunately requires a round trip
to the client browser. While there are some situations where this is
necessary, more often then not you can accomplish the task more efficiently
using Server.Execute.
used Response.Redirect to move a user from one page to another. While
Response.Redirect gets the job done, it unfortunately requires a round trip
to the client browser. While there are some situations where this is
necessary, more often then not you can accomplish the task more efficiently
using Server.Execute.
And Remember This …
***********************************
On this day in…
1814 Napoleon was exiled to Elba; 1876 the Benevolent and
Protective Order of Elks was organized; 1890 Ellis Island in New York
was designated as an immigration station; 1906 Einstein introduced
his Theory of Relativity; 1921 Iowa imposed the first state tax on
cigarettes; 1941 Germany Blitzed Coventry in England; 1945 the
Allies liberated the first Nazi concentration camp at Buchenwald, Germany;
1950 Prince Rainier III became ruler of Monaco; 1961 Bob Dylan
(Robert Zimmerman) made his first appearance at Folk City in Greenwich
Village, New York City; 1965 40 tornadoes struck the US midwest,
killing 272 and injuring 5,000 more; 1968 President Lyndon Johnson
signed the 1968 Civil Rights Act; 1981 Ronald Reagan arrived
home from hospital after Hinkley shot him; 1992 Euro-Disney opened
near Paris France;
Protective Order of Elks was organized; 1890 Ellis Island in New York
was designated as an immigration station; 1906 Einstein introduced
his Theory of Relativity; 1921 Iowa imposed the first state tax on
cigarettes; 1941 Germany Blitzed Coventry in England; 1945 the
Allies liberated the first Nazi concentration camp at Buchenwald, Germany;
1950 Prince Rainier III became ruler of Monaco; 1961 Bob Dylan
(Robert Zimmerman) made his first appearance at Folk City in Greenwich
Village, New York City; 1965 40 tornadoes struck the US midwest,
killing 272 and injuring 5,000 more; 1968 President Lyndon Johnson
signed the 1968 Civil Rights Act; 1981 Ronald Reagan arrived
home from hospital after Hinkley shot him; 1992 Euro-Disney opened
near Paris France;
Born today were: in 1866 wife of Henry, Carla Ford; 1907 actor
Paul Douglas;1913 designer Oleg Cassini; 1916
producer/director Howard Koch; 1928 wife of Bobby, Ethel Kennedy;
1932 actor Joel Grey (Joe Katz); 1945 musician Robert Fripp (King
Crimson); 1950 actor Bill Irwin; 1955 actress Maria Scarabelli;
1958 actor John Castellanos; 1966 English singer Lisa
Stansfield;
