Today is . Page created 06/04/03, updated 06/01/06

Stop Watch Timer Timed Button Link Links

H ere is a nice little script that will allow you to create a link, activated by a button, that will cause a window to open for a specified period of time.

Y ou can adjust the time that the popup window will remain open before it closes automatically. There may be instances where it would be more desirable to have a small window open and then have it close on its own.

For Your Information For your Information:     If you noticed when you opened the "Timed Link Button" there were two animated effects on that page:

  1. The Count Down Timer
  2. The Windows XP Progress Bar

N either of these effects are part of this script. They are just little extras we added to the page for cosmetic effects. If you would like to use either of the two effects, just grab the below link(s) to see howto add them into your page(s).
[ Count Down Timer ]   [ Windows XP Progress Bar ]

W e have tested the code in IE6.0, Firefox1.5.0.3, Opera8.54, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with one (1) variation observed in Netscape8.1 .

  • When the timed window opens, it opens to a full page even with the width and height defined.
  • This does not in any way hamper the script. IT still closes the window in the defined time.

D epending on your knowledge of HTML and java scripts, this is an easy, two part copy and paste code with mimimal reconfigurations. The first part goes in the <HEAD> section of your document and the second part which is the button itself goes anywhere in the <BODY> section you want the button to appear. Below you will see where to make the reconfigurations as to page to open, how long before closing and button colors.

<HEAD> Section Reconfigurations

<script language="JavaScript">
function winopen(){
        win = window.open("URL of the page you want to open", "newWin", "toolbar=yes,location=yes,directories=no,status=no, menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=400,height=260")
        startTime()
}

function startTime(){

        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        closeTime=hours*3600+mins*60+secs;
        closeTime+=10; // Amount of time that the window stays open in seconds
        Timer();

A bove are the reconfigurations for the page you want to open and for how long it will stay open until it closes automatically. Everything there should be self evident in regards to the settings. The words yes and no are for the attribute being seen or not. The number 10 is for how long before the page will close. The numbers of 400 and 260 are the size of the window that will open. All these settings can be changed to your preferences.

<BODY> Section Reconfigurations

T he below settings are just for the button that will be visible on the initial page.

<form>
<input type=button value="Button Name" onClick="winopen();" style="font:bolder 12px verdana*;color:#FFFFFF;background-color:#000000;">
</form>

The Button Name are the words that will appear on the button.

The 12px is the font size.

The verdana;color:#FFFFFF; is the font style and color on the button. (FFFFFF is white)

The background-color:#000000; is the background color of the button. (000000 is black)

* In reference to the font style, it is proper HTML coding to use three different font styles instead of the default of one (1) like in the code. Reason being that not all computers have the single font style specified. By using three, the computer viewing the script will use the first font style available in the system. So, the font style should look like the below with your choices of font style. Be advised, the use of the * after the font style of "verdana" (verdana*) is for instructional purposes only. "DO NOT" use it in the code!

style="font:bolder 12px Style #1,Style #2,Style #3;

Notice how we separated the styles with the use of a , comma.

A s silly as it may sound, change the Style #1,Style #2 and Style #3 to actual font styles. The question has been posed to us if the words "Style #1 etc. are acceptable in the code. See below on how it should look with three actual font styles.

style="font:bolder 12px arial,georgia,helvetica;

W e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link* and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here  ] [ Rate This Page ]  

For Your Information For your Information:     * Since the original script site no longer archives this effect, we now are archiving this script for your convenience.

Talk Live To A Support Technician

Search Our Site By Individual letter

[ A ]  [ B ]  [ C ]  [ D ]  [ E ]  [ F ]  [ G ]  [ H ]  [ I ]  [ J-K ]  [ L ] 
[ M ]  [ N-O ]  [ P-Q ]  [ R ]  [ S ]  [ T ]  [ U-V ]  [ W ]  [ X-Y-Z ] 

Little Tips Directory

[ Page 1  ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5  ] [ Page 6  ] [ Page 7  ]

[ Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
[ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
[ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [  Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.

Copyright © Consigliere Ltd., All Rights Reserved. 2001-