Welcome to JavaScript Gadgets'n'Gizmos. What are JavaScript Gadgets & Gizmos?

Gadgets are intended to be examples of JavaScript that have some use and can be included on professional WEB pages. Gizmos are intended for fun and to add spot effects to WEB pages. All JavaScripts on this site were created here.

You can DOWNLOAD free fully working scripts for your own pages. Don't forget to browse around as I have zip files all over the place. Also, check out xLayer, which is expanding weekly. I don't have zipfiles for xLayer but using the individual ".js" files you can piece together the files you need to put the scripts on your site.

Check out my new site!!

www.JavaScript-FX.com

 

News
26 September 2001 If you like Animated Rollovers then check out Fading Rollovers on my JavaScript-FX site. You only need 2 images per rollover!
22 June 2001 Have added evenmore animated menus.
12 June 2001 Have added some more animated menus.
24 May 2001 It may look as if I am doing nothing. That is because I am concentrating all my efforts on my new site JavaScript-FX. There are a few new scripts on the site which are not on this site. Check out the "News" link to see what I have been working on.

27 March 2001 I have added border highlight layers to xMenu and they look pretty good. Maybe I will complete this script. (Uh oh.. just checked it out in NS6 - borders only sometimes highlight, what is up with that browser!?!)
25 March 2001
Have been trying to get xMenu to auto size the layers to the width of the text in the menu items. Got it working but NS6 gave me some real headaches. Check out menu1 & menu2. Get the files on the xLayer page.
15 March 2001 Servers at work were down so I played around and came up with fireworks2. Get the resources on the xLayer page.
03 March 2001 Updated the Links2 page with links to users of scripts from this site to give visitors ideas on how they can be used.
01 March 2001 Wrote a new version of fireworks to use xLayer so now it works in Netscape 6 as well.
08 February 2001 Just playing around with xLayer and came up with this and this.
Visitor No.  since 1999-09-24

Downloads

Please read the Terms Of Use before downloading these scripts.
Zip File Demo Description
animate.zip

Image Map
Homer Link
Image Fader
Interfaces

Animated Rollovers. Contains animate2.js (Animated Rollovers Vers 2.0!). Be sure to read the Tutorials on how to create your own animated rollovers. For advanced features read the Manual.
fireworks.zip fireworks Upload all the files, then add just 4 lines into the HEAD section of a document and you will get fireworks!
  Opening Doors This demo is provided by Nelson Quimby of elsographics.com. Nelson has solved a problem that quite a few people have asked about the doors demo. How to have the doors open to reveal several seperately clickable links. His solution is to combine the animated rollover with an image map. The whole image is a link to activate the rollover and then the individual links are provided by the image map.
doors.zip

Doors

(Doors2
Doors3)

Doors that slide open on mouse over.(New and improved! The demo in the zipfile looks the same in NS and IE).
(Doors2/3 are based on the above demo by Nelson Quimby and are now included in the zipfile)

NOTE: The image used in this demo is not my own and was obtained from a free clipart site. If you think this is your graphic and you would like to be credited for it, please contact me.

globe.zip World Globe
Uses animate2.js to create an interface that uses an animated globe of the Earth.
nova.zip SuperNova!
Uses animate2.js to turn the ENTER button into a SuperNova! when clicked.
slideshow.zip SlideShow
Uses animate2.js and slideshow.js to create a slideshow with animated transitions.
rollover.zip frames
imagemap
Create simple pre-cached rollovers.
ns_hover.zip Normal Page
Nav Bar
Layers
Font Size
This script simulates the IE hover effect in Netscape 4+. If you view these pages they should look the same in IE and NS.
fader.zip

Demo with Instructions


Cross Fame fader

This script will display a description of a link onMouseOver. Instead of the description just "appearing" in the status bar or as a "popup" description, the text fades in smoothly. You can configure the Background color, the fade in color, and the fade in speed. You can also specify a "default" text for the description. PLUS - you can make the script work across frames.