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.
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 |
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". |
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. |
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. |
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. |
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. |
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. |
Demo |
Requirements |
Description |
|
|
|
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.
|
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. |
|