Goodies To Go! Newsletter #332

By Vince Barnes

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

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.
 
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 (remember our "<." feature -- see the note in Q&A 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>
 
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.  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
http://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()
  }
 
Then call the function like this:
<.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.?
 
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>
 
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>
 
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>
 
You can do it this way:
<.a href="JavaScript:OpenWin('http://www.htmlgoodies.com')">Click here<./a>
<.br>Or you can use the onClick event:
<.a href="#" onClick="OpenWin('http://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}
 

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.
 
 
 

    
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.
 
 
 
 
 

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
 

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:
 
 
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 
***********************************
 
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.
 
 

*** 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.
 
 
 
 
 
 
 
 
 
 
 
 

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;
 
 
 

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;


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