Goodies To Go! Newsletter #332

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

************************************************************

 

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

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()

 

}

 

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(

‘

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}

 
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:

 
mailto:nlfeedback@htmlgoodies.com  

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/      

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.

 
http://aspnet.4guysfromrolla.com/articles/033005-1.aspx  
*** 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.

 
http://www.asp101.com/samples/server_execute.asp                      
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;