Quick! Click the Button!
A reader suggested an article about popup windows that stay
open for only a predetermined number of seconds. The idea
was that a special could be offered in the popup that must
be taken advantage of before the popup closes.
Several days later, another reader asked for a bit of help
installing something similar.
Okay, here's the WillMaster way to do it :)
- A cookie is set when the popup is launched so it
is displayed only once.
- You determine how long the cookie lives on the
prospects computer, from 0 days (which means
the cookie will delete when the browser is closed)
to 3652 days (10 years).
- You determine how many seconds the popup will be
visible before the window closes automatically.
- You can customize a JavaScript function to do
anything (or nothing) every time a second of time
elapses. The example displays countdown numbers in
a form field.
Here is the example
implementation. It stores a cookie on your hard drive that
will delete when you close your browser. The popup stays up
for 30 seconds.
The example page also has a link to download the ZIPed
set of the example pages.
You can use this code to:
- Display immediately pertinent information in a popup
window that will close itself after a specified
number of seconds (provided the visitor hasn't
already closed the window).
- Offer a special price if taken advantage of within
the specified number of seconds.
- Any situation where you want to create a sense of
urgency and/or effectively demand immediate action.
Instructions for the Page that Launches the Popup
In the JavaScript source code, you'll find places to
specify:
- The URL of the popup window's HTML page.
- The height and width of the popup window, and
whether or not is may be resizable and/or have
scrollbars.
- The number of days the cookie shall live on the
visitor's computer.
You also have choice of when the popup window shall launch.
The example launches the popup window when the page first
loads. That is accomplished by putting
onLoad="LaunchPopUp()"
in the BODY tag. If you prefer to launch the popup window
when the visitor leaves the page, put
onUnload="LaunchPopUp()"
in the BODY tag, instead. To launch the popup window a
certain number of seconds after the page is loaded, use
onLoad="SetTimeout('LaunchPopUp()',10000)"
in the BODY tag. (The 10000 is the number of milliseconds,
10 seconds, to delay before launching the popup window.)
If you prefer not to launch the popup window automatically,
you can use a clickable link similar to:
<a href="javascript:LaunchPopUp()">
Click for one-time offer,
good for only 30 seconds after clicking!
</a>
Instructions for the Popup's Page
In the JavaScript source code, you'll find places to
specify:
- At what number the countdown shall begin. That will
be the maximum number of seconds the popup window
can exist.
- Optionally, you may modify the function that
currently displays the counting down numbers in a
form field. The function can do anything, display
large graphical numbers representing the number of
seconds left, for example. The function can even
be made to do nothing.
As in the example, the BODY tag must contain:
onLoad="StartTheCounter()"
Without the above, the counter doesn't start. The BODY tag
may also contain
onBlur="self.focus()
so the popup window will remain in focus until it is closed.
The popup window may contain anything you want. If you
want the countdown numbers in the form field, like in the
example, you must have a form name="time" with a
name="timeleft" field. The form may contain other fields,
too, if you wish.
If the popup window is a call for action, a button or link
must be provided. If the action includes displaying another
page, you can launch a new window by putting
onClick="window.open('http://domain.com/')"
into a type="button" or type="submit" input tag. For a
text (or image) link, it would be something like this:
<a href="http://domain.com/">Click Here</a>
There you have it; a complete kit :)
Will Bontrager
©2001 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
