Colour chooser
This uses an external HTML file which produces a colour pallet based on the HSL colour system, which is more easy to understand than the RGB system used on the Internet.
This file allows users to pick a colour, its intensity and its brightness, giving the full range of RGB values. Follow the instructions in its source.
Test it here: change the background colour using the colour fader.
To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.
Date picker
This produces a calendar in a pop-up window where dates can be selected. I could have done this with DHTML, but by using a pop-up, Opera 6- and iCab 2 can use it too. Also, using a popup avoids problems with layers overlapping inputs and general positioning of layers. Netscape 4 has bugs that prevent buttons from working when I write them dynamically into the window. For this reason, Netscape 4 displays << links instead of buttons to change year/month.
This file allows users to pick a date, scroll through months and years. It returns the date they selected.
To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.
Days-in-month validator
This ensures that the correct number of days are available based on the year and month. It also allows select box contents to be expanded if the user wants a number that is out of the range of the select box contents:
To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.
Find-in-page script
If your browser supports finding text in the page, a form will appear here where you can try it.
To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.
Recent versions of Mozilla/Firefox will only find the first result due to a selection problem when clicking the button. To avoid this bug, put the search form in an iframe, and make it search the 'window.parent' page.
Generic dragable layer
This script produces a layer that is dragable using the mouse in all major browsers.
To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.
Slider control creator
To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.
The following aspects of the sliders are definable:
- height of track
- width of track
- colour of track
- thickness of track border
- colour of track border
- thickness of runner (in the middle of the track)
- colour of runner
- height of button
- width of button
- colour of button
- thickness of button border (shaded to give 3D effect)
- text of button (if any)
- direction of travel (horizontal or vertical)
- the function to execute as the slider moves
- the function to execute when the slider stops
- the cursor to use for the button (the first example uses a hand, the second uses an arrow)
Once the page has loaded, the position of the slider can be set to any value within its range.
Caps Lock detector
This detects if Caps Lock is engaged when a key is pressed in a text input. Try it here; press your Caps Lock key then try typing in the boxes:
The script can either alert a message or run a function if it detects that Caps Lock is engaged.
To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.
How does this work? ... well ...
JavaScript does not offer any way to find out the state of the Caps Lock key, but every time the user presses a key, it allows us to work out what key they pressed, and at the same time, we can work out if they were pressing the SHIFT key. If the key they pressed was a capital letter, and they were not pressing SHIFT, we can assume that Caps Lock is engaged. If the key they pressed was a lower case letter, and they were pressing SHIFT, we can again assume that Caps Lock is engaged.
What this script does
(Well ... it actually does a lot more and a lot better, but this should help you understand the basics of how it works.)
<input type="text" ... onkeypress="capsDetect(arguments[0]);">
...
function capsDetect( e ) {
//if the browser did not pass event information to the handler,
//check in window.event
if( !e ) { e = window.event; } if( !e ) { return; }
//what (case sensitive in good browsers) key was pressed
//this uses all three techniques for checking, just in case
var theKey = 0;
if( e.which ) { theKey = e.which; } //Netscape 4+, etc.
else if( e.keyCode ) { theKey = e.keyCode; } //Internet Explorer, etc.
else if( e.charCode ) { theKey = e.charCode } //Gecko - probably not needed
//was the shift key was pressed
var theShift = false;
if( e.shiftKey ) { theShift = e.shiftKey; } //Internet Explorer, etc.
else if( e.modifiers ) { //Netscape 4
//check the third bit of the modifiers value (says if SHIFT is pressed)
if( e.modifiers & 4 ) { //bitwise AND
theShift = true;
}
}
//if upper case, check if shift is not pressed
if( theKey > 64 && theKey < 91 && !theShift ) {
alert( 'Caps Lock is enganged' );
}
//if lower case, check if shift is pressed
else if( theKey > 96 && theKey < 123 && theShift ) {
alert( 'Caps Lock is enganged' );
}
}This technique used by this script was inspired by a script by Joshua Olson of Wae Technologies, but was written completely
independently to provide better browser compatibility (this script also works in Netscape 4+, Gecko/Mozilla, iCab, ICEbrowser, etc.).
http://concepts.waetech.com/
Simple marquee
These marquees are created using DHTML, are fully accessible, and do not use invalid (X)HTML. I have set them to stop after 30 seconds. If they have already stopped, you can restart the marquees.
To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.
Element shortcuts
Prepares quick shortcuts to all child elements in the DOM tree, for example:
document.$html[0].$body[0].$table[4].$tbody[0].$tr[7].$td[3].$img[1].srcTo download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.
This script is designed for use only in situations where you can guarentee your audience will be using a browser that supports this script. It is not intended for use on normal web sites.
Your browser does not support this script.