Basic Calendar |
Supports: FireFox1+, IE5+ and Opr7+ |
Author: Brian Gosselin | Homepage
Description: If you need a simple, elegant calendar to display the current days of the month, Basic Calendar is an excellent script for the purpose. Uses CSS to allow easy changing to its appearance, everything from calendar dimensions, colors, down to the font used to highlight the current day.
Sample:
Step 1.Insert the below into the <HEAD> section of your page:
The above references an external .js file. Download basiccalendar.js (by right clicking, and selecting "Save As"), and upload to your webpage directory.
Within the above code, you may customize the CSS rules to change all visual aspects of the calendar.
Step 2.Finally, insert the below script where you wish the calendar to appear on your page:
|
Live Clock |
Supports: FireFox1+, IE5+ and Opr7+ |
Author: Mark Plachetta | Homepage
Description: An extremely versatile cross browser live clock script. Every aspect of it is configurable, from specifying whether to just display the time, the time plus date, to the clock's font size/color, and more. The ultimate live clock script this is!
Sample:
Step 1.Add the below code where you wish the clock to appear on the page:
Step 2.Inside the <BODY> tag itself, throw in the following onLoad event handler, as follows:
<body onLoad="show_clock()">
Step 3.Finally, you have a big decision to make. This script requires one of the below two .js files to operate...which one to download depends on how you wish the script to display itself. The first .js file allows you to display not only the time, but date as well, while the later, just the time. There's a 3k size difference between the two files, just so you know:
Download ONE of the following two files, and upload to the directory where your webpage resides (click on file, or click with shift key depressed in NS):
-liveclock.js
(6k)
-liveclock_lite.js (3k)
Should you choose the later,
make sure to change the reference in the code of Step 1 to correctly
reference its name. Furthermore, both files require some editing inside to
configure the clock's style, which you can do through any text editor,
such as Windows Notepad.
|
Popup Box (DHTML Announcement Box) |
Supports: FireFox1+, IE5+ and Opr7+ |
Author: Jim Silver
Description: Use this custom DHTML "widget" to uniquely present new or notable pieces of information to your visitors. The interface is cross browser compatible, and can be dragged/ hidden freely by the user. Now that's something new in itself!
Sample:
Step 1.Add the following script to the <HEAD> section of your page:
Step 2.Insert the below HTML code to the BOTTOM of your page, right above the </BODY> tag itself:
You may also want to grab this image, and upload to your webpage directory:
|
Form field Progress Bar |
Supports: FireFox1+, IE5+ and Opr7+ |
Author: Ron Jonk | Homepage
Description:This script allows you to restrict the number of characters inside a form element (ie: textarea) while displaying a progress bar on the remaining characters beneath it. Very cool, and works in IE4+, NS6+, and Opera 7+.
Sample:
Try typing in the below textarea (limit: 20 characters).
Step 1.Add the below script to the <HEAD> section of your page:
Step 2.Insert the below sample form onto your page, which also demonstrates how to associate the script with your own form:
As shown, enabling the script on a particular form element involves modifying it to:
<form>
<textarea rows="5" cols="40" name="maxcharfield" id="maxcharfield"
onKeyDown="textCounter(this,'progressbar1',20)"
onKeyUp="textCounter(this,'progressbar1',20)"
onFocus="textCounter(this,'progressbar1',20)"></textarea><br />
<div id="progressbar1" class="progress"></div>
</form>
The part
in red represents what needs to be added to the original HTML code to
enable the Progress Bar on it. "Progressbar1" should be an
arbitrary but unique ID of the corresponding progress bar, and "20",
the number of allowed characters. Repeat this for additional form
elements, though change all instances of the ID "progressbar1" to
something else (ie: "progressbar2") in the 2nd instance.
|
Image Trail Script |
Supports: FireFox1+, IE5+ and Opr7+ |
Author: Brian Caputo
Description:Add some fun to your mouse cursor with this cross-browser trail script!
Sample:
Step 1.Copy the following images into your website directory (6 images):
    
Step 2: Finally, add the below fragment to the <body> section of your page:
For those who wish to customize the images used for the trail, all the changes should be done in the T1 array. The first parameter references the image's file name, while the second and third specifies the image's dimensions.
|
News Bar script |
Supports: FireFox1+, IE5+ and Opr7+ |
Author: Premshree Pillai | Homepage
Description:An attractive "news bar" script. Messages are automatically rotated and displayed, with the ability to manually cycle back and forth through them. This script is created entirely using form buttons.
Sample:
Simply add the below script to the <BODY> of your page:
|
Document Text Sizer |
Supports: FireFox1+, IE5+ and Opr7+ |
Author: Taewook Kang | Homepage
Description:Sometimes the text size you've specified for your webpage isn't suitable to the viewer, depending on his browser configuration or OS. This useful script by Taewook uses Dynamic CSS to let the viewer himself modify the text size of the page on demand, by clicking on an Increase or Decrease Font Size link.
Sample: Click the below links:
+ Larger Font | + Smaller Font
Step 1.Add the following code to the <HEAD> section of your web page:
The above script references an external .js file. Download this file here (right click, and select "Save As").
Step 2.Now set up the two links that will increase and decrease your text size. The following will do nicely:
|
|
referencezone.com
