Welcome to the Script Development page. Here I will showcase new scripts that are in various stages of development. A lot of the time I develop scripts and then don't release them because I don't have time to create all the associated demo, help and download files. However, I learned from my previous site that there are visitors who do not require the zip files and help files and can install the scripts using just demos and the associated ".js" files. If you are one of those people you can use this page to download and install scripts before they are released as fully fledged "JavaScript-FX".
To download the files, right click on the links and choose "Save Target As" (or similar) from the popup menu.
Library Code
This is the core library code that is used by a lot of the DHTML scripts. It is kept seperately here so that if the library files are updated I don't have to update all the links. If the requirements column of a script has one of these files you will need to download it from this table.
| File | Version | Description |
| JSFX_Layer.js | 3.7 | 2003-05-19:(3.7)Minor change to fix possible bug on
Mac. 2002-06-12:(3.6)Bug fix in find nested layers in NS4. 2002-01-26:(3.5)Minor bug fix for variable deceleration's. |
| JSFX_Browser.js | 2.0 | Core library for info about the browser |
| JSFX_Mouse.js | 2.1 | Core library for tracking the mouse position |
| JSFX_BorderedLayer.js | 1.0 | Extension to Layer that creates a cross browser layer that can have borders. |
| debug.js | 1.1 | This is used for debugging only. Some demos still have debug code in them |
| JSFX_Functest.html | -.- | Used to test JSFX_Layer.js |
Navigation Aids - JSMenu2
| Demo | Requirements | Description |
| blayertest.html | JSFX_Layer.js JSFX_BorderedLayer.js |
This is a demo to show how the new JSFX_Layer creates child layers and how bordered layers work |
| layertest2.html | JSFX_Layer.js JSFX_BorderedLayer.js |
Have you ever seen the menu on brainjar.com ? Well the onMouseOver border change color was the inspiration for creating JSFX_BorderedLayer.js so you could get the same effect in NS4 as well as IE4+ and NS6+ |
| jsmenu.html |
JSFX_Layer.js |
This is the original JSFX_JSMenu.js that has been converted to use JSFX_BorderedLayer.js. I created the menu with a 2px border. (Just to prove it works) |
| (2001-10-20) menuItem.html |
JSFX_JSMenu2.js | This might not seem to do much at the moment but it defines the JSMenuItem "class". This will be expanded to create the JSMenu and JSMenu bar for the whole new menu. For now, notice how the bg highlight works in all browsers, even if you are only over the "border". |
Navigation Aids - Left Sliding Menu
| Demo | Requirements | Description |
| JSFX_Layer.js JSFX_LeftSlidingDiv.js |
In early development. This is a menu system where the links slide in from the left side of the browser on mouse over. The 's' in the demo means the menu does not float (is 'static') when the browser window is scrolled. |
Moving Rollovers
| Demo | Requirements | Description |
| JSFX_MoveRollovers.js | This is still in early development. Basically I took the Zooming Rollovers script and modified it to move the images instead of resizing them. |
Trans Rollovers!
| Demo | Requirements | Description |
| JSFX_TransRollovers.js | This is a brand new script using Microsoft Transition Filters. I found out you can use the "Percent" and "Enable" properties to take full controll of the transitions without having to rely on the "play()" and "onfilterchange" methods. It uses the state transition model used in nearly all the rollover scripts on this site to control the transition state. |
ScripClips
| Demo | Requirements | Description |
| These are some image viewing ScriptClips in development. They pop up an image, centered in the browser window. Demo3 and demo4 work as slide-shows. |
Full Page Animation
| Demo | Requirements | Description |
| fireworks1.html fireworks2.html |
JSFX_Layer.js JSFX_Fireworks3.js |
I was working on this to see if I could create some fireworks using just layers (no images) It seems to work quite well but you do need a fast machine. |
News Scrollers
| Demo | Requirements | Description |
Slide Shows
| Demo | Requirements | Description |
| demo1 demo2 demo2a demo3 demo3a demo3b demo3c demo_controls |
JSFX_TransSlides.js |
This is a slideshow script that uses Microsoft Transition filters. At the moment it is very limited in that the images have to be the same size and all the images are pre-loaded when the slideshow starts. I do have one that uses the image onLoad tag to pre-load images as the script runs but that still has lots of bugs. This one works quite well for a small number of images or if all the images themselves are small. |
Others
| Demo | Requirements | Description |
linkfader_bg1.html |
linkfader_bg.js |
While surfing the WEB I have come across some sites
that use a fading link script. However, the fade did not fully complete
if you rolled off the link. I used the State Transition Diagram of
AnimatedRollovers, FadingRollovers, ZoomingRollovers and TextFader
to create these demos. I am not too happy with the cross browser incompatibility(
IE 4+ and NS6+ only). I think the site I originally found it on was Xutopia but that led me to Anarchaotic. I am not sure who the originator is but the I have come up with is completely different. |
| Want to attract attention to a particular paragraph or link but don't want to use the <blink> tag or flashing on/off images then try this subtle text fading routine. The text cycles gently between the array of colors you select. | ||
| demo1.html demo2.html |
JSFX_ElemFader.js | Using almost the same code as JSFX_ImageFader, this script extends the functionality to fade any type of HTML element. |
