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
JSFX_BorderedLayer.js
JSFX_JSMenu.js
mymenu.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

demo1
demo1s
demo2
demo2s
demo3
demo3s

demo4

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

demo1

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

demo1
demo2
demo3
demo4
demo5
demo6

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

demo1
demo2
demo3
demo4

  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.

spancycle.html

linkcycle1.html
linkcycle2.html

  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.