Welcome
Light0 Light1 Light2 Light3 Light4 Light5 Light6 Light7 Light8 Light9 Light10 Light11
Title  RISCOS  Apple  Team fortress 2  Suzuki VStrom  Riding tips  Javascript  Archos 605  Stuff!  Links  Gallery  GuestBook


Javascript and DHTML

Come get ya' scripts here.

Duck hr

Disclaimer: These scripts are supplied "As is" and if you want to email me bugging me about "How scripts would be better done your way" then don't bother, it's boring ok (Yes I know about using document.body.appendChild() blah blah, etc, but it seems to make the scripts run in an odd way on some browsers)

These should work in most browsers and I have tried to follow the best guide lines (He says)

First of all apologies to anyone viewing this page using Netsurf or any other old RISC OS browser, you need to be using either Firefox or Internet explorer (Eww) or any other modern browser to get the most out of this page.

I waited long enough but it's time to use some up to date tricks with browsers. Remember if you have problems with using these scripts on your own webpage ask a grownup to help you.

All these scripts have been designed to be tweakable by changing the values of the variables at the start of the script.

Some will need you to change values to customise the text messages they generate (Don't worry it's not too difficult).


Ok here is the first one, this is a bouncing ball demo. It features unrealistic physics (So I have been told) and is very annoying but also very striking:

Bouncing ball DHTML demo

(Opens in a new window, like all the other demos here)

To use this add the following line to your HTML somewhere inside the head tags:

<script src="MultiFlatBounce.js"></script>

Then download the following file, unzip it and put it in the same directory as your HTML:

image directory and js file download

(If you already have an image directory this will simply merge with it)


This is a nice UFO that swoops onto your page and hangs around a lot doing loops, it even tries to get back into the viewing area if you resize or scroll the screen. If you click on it, it will go away. Don't forget to give it a second or two to start (It's deliberate ok):

Floaty UFO DHTML demo

<script src="ClickableFloatyUFO.js"></script>

image directory and js file download

(Are you getting the hang of this yet?)


Now we have an analogue clock that sits in the bottom right corner of your browser window. I even suspect it shows the right time, coo:

Analogue clock DHTML demo

<script src="FixedAnalogueClock.js"></script>

image directory and js file download


This one is designed to be a simple intro to a website, it even features an exit button. Yeah I know the coding is a bit simple but it gives it a "Mechanical" feel to it. If you want to change the message edit the array inside the Javascript. Other parts are tweakable:

Random reforming text DHTML demo

<script src="RandomReformingText.js"></script>

Add this inside your <body> tag:

onScroll="SkipIntro()" onResize="SkipIntro()" onLoad="SkipIntro()" link="red" vlink="red"

js file download

(No image directory with this one)


There must be plenty of star fields on the internet, but I thought it would be interesting to have a go writing one. The stars slowy rotate as they move outward:

Star field DHTML demo

<script src="Starfield.js"></script>

image directory and js file download


A zooming text demo, great as an intro. Remember to duck:

Line at a time zoom DHTML demo

<script src="ZoomFadeText.js"></script>

Add this inside your <body> tag:

onScroll="SkipIntro()" onResize="SkipIntro()" onLoad="SkipIntro()" link="red" vlink="red"

image directory and js file download


Multiple line version:

Multiple lines zoom DHTML demo

<script src="MultilineZoomFadeText.js"></script>

Add this inside your <body> tag:

onScroll="SkipIntro()" onResize="SkipIntro()" onLoad="SkipIntro()" link="red" vlink="red"

image directory and js file download


And now the starfield and the single line zoom demos combined, complete with music, coo:

Starfield and zoom text DHTML demo

<script src="ZoomTextWithStarField.js"></script>

Add this inside your <body> tag:

onScroll="SkipIntro()" onResize="SkipIntro()" onLoad="SkipIntro()" link="red" vlink="red"

image directory and js file download


Here are some nice bubbles, that bubble up your screen, then pop. You can define a few parameters in the code:

DHTML bubbles

<script src="Bubbles.js"></script>

image directory and js file download


Now the same bubbles, but bubbling from a chest:

DHTML bubbles with a chest

<script src="BubblesChest.js"></script>

image directory and js file download

Written using HTML, CSS and Javascript