This is a fun little JavaScript.

Pop it into you page, and you can make certain text on your page expand -- fast, slow, in jumps, or relatively steady. The source code is at the demonstration page [http://willmaster.com/a/16/pl.pl?artdemo167].

Why would you want to do that? Here are a few reasons you might consider using the script:

To emphasize numbers representing percentage or price when you have a sale.
Instead of a logo on every page, have your company name on every page in expanding text.
Important or popular navigation links can suddenly double in size about half a minute after the page loads.
Draw attention to an ad by having a period character next to or within an the ad grow larger by one pixel size every 5 seconds or so.
If you publish articles, titles or bylines can have expanding text.
Any important text that must be emphasized, whether one word or blocks of text, can use this expanding text technique to attract attention.
Just for fun.

Complete instructions are in the JavaScript code found at the demonstration page at the URL above.

You specify:

The starting size of the text, when it starts to expand, specified in pixels. You'll probably want this about the size of the default text of your page, but that's optional. Starting at 1 pixel in size is a nice effect.
The ending size of the text, when it's finished expanding, specified in pixels. The maximum size can extend the text way past the browser window border, if you make it large enough. It's fun to play with.
The number of pixels the text size shall increase with every size increment. Specifying 1 presents the smoothest expansion. Big jumps, or one jump from smallest to largest, might be appropriate for some implementations.
The number of milliseconds to pause between size increments. Specifying 1 is the fastest expansion. Specifying 3000 will increment the size every three seconds.
The number of milliseconds to wait before the first size change is made.

This number should be large enough to let your page load completely before the first change happens. Otherwise, the text that is supposed to expand might not yet be loaded when the script tries to increment its size, which would result in a JavaScript error message.

Specifying 250 for a quarter second is probably the minimum, and that would be for very fast loading pages. Once you determine a working number, double it so instances of slow server or slow Internet connections can still load the page and run the JavaScript successfully -- if your connection is DSL or satellite, you might want to triple the number.
For some implementations, waiting ten or more seconds might be appropriate, to let the viewer begin reading a story before drawing attention to an ad, for example.
The id of the text.

The text in your page that you want to expand is enclosed with a DIV tag. Example:

<div id="TestDiv">
text to expand
</div>

In the above example, the id of the text to expand is TestDiv .

There likely are some things that you can't do in the way that might be intuitive. I couldn't test every combination, of course, but I found several things you'll want to be aware of:

Embedded CSS styles won't be effective in the DIV tag, but previously defined classes are.

Embedding a style is not effective:

<div style="color: blue;" id="TestDiv">
text to expand
</div>

Applying a previously defined class is effective:

<div class="special" id="TestDiv">
text to expand
</div>

When applying HTML markup, like heading and paragraph tags, put the markup outside the DIV tag:

<h1>
<div id="TestDiv">
text to expand
</div>
</h1>

If you need to separate blocks of text with paragraph spacing, use BR tags:

<p>
<div id="TestDiv">
text to expand
<br><br>
more text to expand
</div>
</p>

If the expanding text is within a table, put the table tags outside the DIV tag:

<table border="1" cellpadding="11"><tr><td>
<div id="TestDiv">
text to expand
</div>
</td></tr></table>

With the above code, the table will expand as the text expands, causing the box around the text to expand in order to accommodate the enlarging text.

The B, I, and U font change tags work within the expanding text:

<div id="TestDiv">
<u>text</u> <i>to</i> <b>expand</b>
</div>

The DIV tag will cause a line break if there is less than one blank line above the DIV tag.

Writing and testing the expanding text JavaScript code was a lot of fun. Hopefully, you'll find pleasure in its use.

Spam Proofing Your Websites

Visitor feedback forms have been around ever since browsers have supported CGI.

They're on most professional sites. Certainly they are on those sites which best project friendly customer service.

Today, we'll use the feedback form to help spam proof your sites.

Spammer's email harvesting robots scan your site for email addresses. Then the addresses become part of spammers' mailing lists.

Here is a practical way to remove all email addresses from your site. And whether or not your sites have access to their own CGI.

(Spammers collect email addresses from other sources, too. Spam proofing sites removes only one source.)

I'm on a mission.

I don't like spammers harvesting email addresses from our sites. Uninvited, demanding our time and stealing our resources to sate their greed by pushing their impatience-soaked ideas into our faces. And I don't like them doing it to our friends.

So, I decided to do something about it.

The result is MasterFeedback, a visitor feedback form and Perl CGI script. The form contains no email addresses in the HTML code or on the page, not even in a hidden form field.

The script is freely available for download, along with a generic HTML form you can modify. This free version is for Unix servers. (Find download URL further below.)

There is also a version for:

folks who don't have CGI for their sites.
web sites on NT or other non-Unix operating systems.
folks who don't want to mess with scripts but still want the benefits.

This second version requires sign-up and a monthly fee.

While I was making MasterFeedback, Mari Bontrager made graphical buttons with our email addresses as images. These will be our links to the feedback forms.

Spam proofing your sites is a simple two-step process:

(1) Obtain a feedback form.

(2) Eliminate all email addresses and replace them with links to your feedback forms.

That's it!

STEP: (1) Obtain a feedback form.

This means you either acquire and install a script for that purpose, or you use a script hosted on someone else's server.

MasterFeedback is robust and does the job quite well. But it's not the only tool around.

If you have CGI:

MasterFeedback (free) (Unix) is available for download at: http://willmaster.com/master/feedback/

There are dozens of free and shareware feedback scripts. They're available for all popular operating systems -- Unix, NT, Linux. Some CGI download sites are listed in the " Links and Resources [http://willmaster.com/possibilities/examples.html]" section.

Whichever script you decide to use, please make sure it does not require your email address anywhere within your web page, not even in hidden form fields.

If you do not have CGI (or just don't want to be bothered with it):

Remote hosted CGI is your solution. This means the forms are on your server (on your web site), but the script is on someone else's server.

Remote hosted MasterFeedback is designed so your visitors never need to leave your site. They stay with you, even when they click the submit button. The service is only $2 per month. Sign up for your 14-day free trial [http://willmaster.com/].

STEP: (2) Eliminate all email addresses and replace them with links to your feedback forms.

(For illustration purposes, let's suppose your feedback form is at "http://www.domain.com/feedback.html" and that your email address is "[email protected]".)

Replace all occurrences of:

<a href="mailto:[email protected]">Write Me!</a>

with:

<a href="http://www.domain.com/feedback.html">Write Me!</a>

If you want a graphic link, just replace "Write Me!" (or other link text) with your graphic's "<IMG ..." tag.

A simple graphic with your email address as the image can present your address visually and yet not have the text anywhere in your source code. Spammers are not yet sophisticated enough to make graphic image reading robots.

One more note: To spam proof your sites, no text with an email address can be in your page source code, anywhere. Not in image "alt" tags, not in META tags, not in html comment areas, nowhere. You may wish to use your word processor or page editor's search function to ensure no stray "@" characters with email addresses remain on your pages.

That's all there is to it.

Happy spammer swatting!

Articles by William Bontrager

About the Author:

William Bontrager Programmer/Publisher, "WillMaster Possibilities" ezine mailto:[email protected]

Are you looking for top quality scripts? Visit Willmaster [http://hop.clickbank.net/hop.cgi?nturavets/willmaster] and check out his highly acclaimed Master Series scripts. Some free, some for a fee.

No-Kill Pop Box (Instead of Popups)

Are you tired of popup killers also killing your income?

Today you will learn about a way to present the information previously put in popup windows, yet popup killers can't kill this pop box!

This pop box displays even if the browser has JavaScript turned off. (Please read the caveat below.)

The pop box is created using layers, which is why JavaScript disabled browsers can display it.

However, the pop box is closed with JavaScript. Thus, if the browser has JavaScript turned off, the user won't be able to close the pop box. It may be prudent to have a "JavaScript disabled browsers can't close this box" message between NOSCRIPT tags for those browsers. Here is an example:

<noscript>
JavaScript must be turned on to close this box.
</noscript>

The demo is at http://willmaster.com/a/20t/pl.pl?art204

The following instructions reference the source code of the demo.

Step One

On an otherwise blank web page, create a table that looks like you want the No-Kill Pop Box to look.

Use a table to contain the content. Dimensions and padding can be specified right in the TABLE tag.

If you want borders, give the table borders. If you want images, put those in there. The table you create will be what's displayed as the pop box.

If you want the pop box to look like a regular popup window, you'll need to provide images and/or background colors to create the appearance. If you provide graphics or text for closing the pop box, the link's HREF is:

href="javascript:CloseNoKillPopBox()"

Here is an example text to close the pop box:

<a href="javascript:CloseNoKillPopBox()">
[Close this Window]
</a>

If your No-Kill Pop Box will have links to other pages, the link can contain the

target="_blank"

attribute so a click opens a new browser window. The same click can also close the No-Kill Pop Box, if you wish, but it needs to close after the new window has opened.

This is how to do it: <a href="http://domain.com/page.html" target="_blank" onClick="setTimeout('CloseNoKillPopBox()',3000)"> Click for awesome deals! </a>

In the above link, the onClick attribute sets an internal timer for 3000 milliseconds. Once the 3 seconds has elapsed, the JavaScript function CloseNoKillPopBox() is called (the same function used in the link to close the pop box). The number 3000 can be changed to your preference. And, if you don't want the pop box to close after the link is clicked, simply omit the onClick attribute.

Step Two

Determine the pixel width and height of your No-Kill Pop Box table, and make a note of the numbers. The shareware calipers software is an ideal tool for this job. (PC only. If you know of similar software for Mac, please let us know.)

Step Three

Make a copy of the demo source code. Now, replace everything between the <div... and </div> tags with the table you created in Step One. That would be everything between the place marked as



and the place marked as



Step Four

You'll replace some numbers in the DIV tag's style attribute. Here is the div tag of the demo: <div id="BetterThanPopup" style=" top: 100; left: 250; width: 306px; height: 206px; padding: 0; position: absolute; z-index: 1; visibility: show;">

In the style attribute, you'll see a width: value. Replace the number 306 with the actual pixel width of your No-Kill Pop Box table, the number you noted in Step Two.

You'll also see a height: value. The number 206 needs to be replaced with the pixel height you noted in Step Two.

In the style attribute, you'll also see a top: value and a left: value. Those numbers represent how far from the top edge and how far from the left edge of the browser window to put the top-left corner of the No-Kill Pop Box. If you don't know the exact position where you want the pop box, guess at the numbers for now. Later, when the pop box is placed on your page, you can adjust these numbers to put it exactly where you want it.

There is one more style attribute value to mention, the z-index: value. The number 1 puts this layer on top of other content on the page, so long as there are no other layers with an equal or higher z-index: value.

If the pop box is not the only layer on the page, the z-index: value number should be one higher than the highest number of the other layers on the page.

Step Five

Copy all of the No-Kill Pop Box, including the JavaScript and the DIV tag, and paste it into your web page near the bottom of the BODY area. (Actually, you should be able to put it anywhere in the BODY area, but Netscape 4.# sometimes has problems displaying top layers if their code is put above other page content.)

The No-Kill Pop Box code to copy is marked in the demo starting at



and ending at.



Load the web page into your browser and adjust its position as desired.

Notes

These notes are not things you actually need to know to make a No-Kill Pop Box. If you're interested in using other style attributes for some of the display characteristics, the notes may be of interest.

The reason a table is used to create the No-Kill Pop Box content is because the border and margins for layers do not display consistently from browser to browser.

If you need varying border widths or styles, you can use the following in the DIV's style attribute:

border: black;
border-style: dotted;
border-top-width: 6px;
border-bottom-width: 3px;
border-left-width: 1px;
border-right-width: 1px;

However, if a solid border (or no border) is okay, and each side is to have the same border width, then using a table to create the borders will prove more consistent from browser to browser.

Similarly, if you need varying margins, these can be used:

margin-top: 5px;
margin-bottom: 5px;
margin-left: 20px;
margin-right: 10px;

If you can create your desired margins with a table, it will prove more consistent from browser to browser than will the margin specifications in the style attribute.

Background color is another display characteristic more consistent when specified within a table rather than in a style attribute. If you have reason to specify the background color in the style attribute, here is an example:

background-color: #EFEFEF;

The content of the No-Kill Pop Box can be formatted with either HTML or CSS. In the demo, the top part of the No-Kill Pop Box, where clicking will close the box, uses HTML. The rest uses CSS.

No-Kill Pop Box Part II

In the "No-Kill Pop Box (Instead of Popups)" article, the first part [http://willmaster.com/possibilities/archives/wmp20030617001.shtml] of this series, code was provided to make a box of content pop onto the web page the visitor is viewing. It was presented as an alternative for webmasters who are losing income because of pop-up killers.

A pop box is content within a rectangular area that might or might not be visually similar to a pop-up, but which displays on top of the content of the current web page rather than in a separate window of its own.

This type of message delivery mechanism has been called pop-in, pop-on, pop over, and pop box. Here, we use the term "pop box."

This article will provide code to delay the appearance of the pop box and the ability to display and vanish the pop box with clickable links.

There is an important distinction between pop-ups and pop boxes. Intellectually, it's understood that pop-ups are separate windows and pop boxes are part of the current window. However, when a webmaster decides to use pop boxes, several things become clear. ~~ Unlike pop-ups in their own separate window, the pop box must be designed to work with the web page, else the page looks cluttered. ~~ Every pop box covers some of the window's content. Unless they're stacked on top of each other, the number of pop boxes on a page is self-limiting. ~~ If the surfer feels abused by the content or number of pop boxes, s/he can simply close one window (or go to a different page) and all the pop boxes close along with the window.

Pop boxes can be controlled in ways similar to how pop-ups can be controlled. Examples: ~~ Display only once per visit. ~~ Display after visitor has seen three pages. ~~ Display on every page until a certain action is taken. ~~ Display 90 seconds after a page loads. ~~ Jiggle it a bit if it stays open more than three minutes. ~~ When one is closed, another displays.

But when the web page is closed, the pop boxes are closed too, automatically. There is no residue -- no windows are spawned all over the desktop. Everything is connected to the web page, all nice and tidy.

Maybe that will let Internet users feel more in control and be more accepting than they have been of pop-ups. Whether or not pop boxes will be more effective marketing tools remains to be seen.

The "No-Kill Pop Box (Instead of Popups)" article provided the basic code to create a pop box that contains a link with which to close it. Please see that article [http://willmaster.com/possibilities/archives/wmp20030617001.shtml], for instructions on how to make the pop box.

With the addition of one JavaScript function, the pop box can have a delayed opening and can have links outside the pop box to open and close it. The additional function is named OpenNoKillPopBox() and is the first function in the code on the demonstration page. See
http://willmaster.com/a/20t/pl.pl?art206

Once you've installed the above, the pop box layer code style should be changed from

visibility: show;

to

visibility: hidden;

That will keep the pop box closed until an "open pop box" link is clicked or until it is automatically opened by JavaScript code. See below for both methods.

This will put a "open pop box" link on the web page:

<a href="javascript:OpenNoKillPopBox()">
Open the pop box.
</a>

This will put a "close pop box" link on the web page:

<a href="javascript:CloseNoKillPopBox()">
Now close the pop box.
</a>

And this will open the pop box 10 seconds after the pop box code on the page has loaded:

<script type="text/javascript" language="JavaScript"></script>

If you want the pop box to open sooner or later, adjust the number 10000 to reflect the appropriate number of milliseconds delay.

The above gives you more control over your pop boxes.

Future installments of this series will include techniques to control pop boxes similar to how pop-ups can be controlled.

No-Kill Pop Box; Part III

This article provides the means to use cookies so your No-Kill Pop Box is displayed only once to a visitor for a pre-determined number of days.

Part 1. "No-Kill Pop Box (Instead of Popups)[http://willmaster.com/possibilities/archives/wmp20030617001.shtml]" The basic code for creating a Pop Box. Part 2. "No-Kill Pop Box; Part II[http://willmaster.com/possibilities/archives/wmp20030701001.shtml]" Comparisons with focus on differences of the No-Kill Pop Box and Pop-ups/unders. Code for delayed opening of the No-Kill Pop Box and to open and close the No-Kill Pop Box with links.

The demo page [http://willmaster.com/a/20t/pl.pl?art208] contains the complete code necessary to implement the No-Kill Pop Box with cookies.

If you haven't read the other two articles in this series, I urge you to do so now. Unless you are a proficient JavaScript programmer, the rest of this article may make little sense until familiarity with the other two articles is attained.

The global variable and functions that were added since the second of this article series are:

1. A global variable named DaysToLive

Here, specify the number of days you want the cookie to live, a maximum of 3652 days, representing 10 years. If you want the cookie to disappear when the browser is closed (called "session cookies"), specify 0 (zero) days.

2. Function SetCookie()

This is the function that sets the cookie when the No-Kill Pop Box is displayed.

3. Function GetCookie()

This function is used to determine whether or not the cookie exists in the browser.

4. Function OpenPopBoxIfOkay()

This function is called when a page first loads. It uses function GetCookie() to determine whether or not the No-Kill Pop Box should be displayed.

Function OpenPopBoxIfOkay() must be called or the No-Kill Pop Box won't ever be displayed and no cookie will be set. The function can be called using any of the following methods:

i. In the BODY tag itself with

onLoad="OpenPopBoxIfOkay()"

Example:

The above calls the function as soon as the page completes loading.

ii. Somewhere in the BODY area with

The above calls the function when the browser loads the code.

iii. Somewhere in the BODY area with

The above calls the function 3 seconds after the browser loads the code. The number 3000 in the above codes represents 3000 milliseconds delay. Adjust that number as appropriate for your installation.

You'll notice that the demonstration for this article contains a WillMaster Possibilities subscription form.

When a form is put into the No-Kill Pop Box and the form submitted, the "thank you" page will be a new page, like it would be if the form was submitted from a normal page -- the "thank you" page will not display inside the No-Kill Pop Box.

Because the No-Kill Pop Box is displayed only the one time, the "thank you" page can be the same page the form was submitted from. When the "thank you" page loads, the No-Kill Pop Box won't display because it has already been displayed once. In effect, the form user is sent to the same page the form was submitted from -- except the page no longer displays the form. Note: Browsers with cookies disabled, will show the form every time the page loads. (I've never done a survey to determine how many cookies-disabled browsers visit our sites. I'm thinking the number is low, but I can't be certain.)

The first three parts of this series have provided the code necessary to use No-Kill Pop Boxes in a professional manner.

INTERNET MARKETING TOOLS

Affiliated-Business.com: The art of making money online...

| Home |

| Building |

| Hosting |

| Promotion |

| Make Money |

| Tools |

| Homebusiness |

| Resources |

| Tell A Friend |

| Add To Favorities |

| Link To Us |

| Partner With Us |

| Site Map |