Javascripts
Little javascripts I've written for my use or just for fun. Feel free to use them and change them however you like. It might be a good idea to keep the little header comment at the top, so people can find their way back here to get updated versions. The list goes from most complex to simplest
DPI query
Get the resolution DPI using @media queries.
dpi.js
Pointer tracking
Track mouse pointers and finger touches.
pointer_track.js
Webworker test
Simple comparison of a compute task using two serial methods and a parallel webworker method. The Webworker version spawns 2 workers and should be faster in most browsers.
ComputeTest.js -base task
SerialTest.js -serial task
TimeoutTest.js -serial task using timeouts
WebworkerTest.js -parallel webworker task
Worker.js -actual worker code
Common.js -common helper code
Paraview colormap
Build a random colormap for coloring nominal values in the Paraview visualization tool. Creates colormap values in HSV, converts to RGB, then generates the XML. Also creates a preview of the colormap in browser.
paraview_colormap.js
Paint an apartment
Paint my apartment! Use the color picker to select a color for each room. Javascript handles all dynamic interactions. The colors are changed by changing the background behind transparent pngs. PHP is used to save and load the color picks.
color.js
Image fade-in/out
This is a way to view a series of images. As the user moves through the list of images, they fade in and out, as if looking through a stack of pictures. This could be combined with the effect below to create a flip-book of pictures.This doesn't work quite right in Safari, but it still looks good.
fademages.js (requires DOM animation)
Fake perspective
This simulates the perspective of a picture turning like a book page. This effect is accomplished by using CSS borders to create white triangles which mask the image. This doesn't work in IE (6- no transparent borders) or Safari (2.0.4- no box-model).
perspective.js (requires DOM animation)
Simple DOM animation
A simple framework for animating DOM objects. Given a CSS property, a start and end value, and a duration, it provides an animation. Also comes with some code to track objects across intervals and timeouts.
animator.js - animation script
interval_state.js - interval/timeout object tracer
Drop shadows
This script adds a drop shadow to images. It finds all images that are marked to be shadowed. It then builds a DOM structure to represent the shadows and places it 'behind' each image.
shadower.js
Simple AJAX
A simple demonstration of AJAX that gets hex values for colors from the server.
ajax.js
ajax.php.txt
Drag an HTML element
This uses CSS attributes to let you move website objects around. It should work pretty good for smaller objects, but larger things may skip around a little. This code is known to work in Mozilla (any version), Opera 7+, and IE 5+.
drag.js
Drawing with divs
This lets you draw with your mouse kinda. It uses some of the code from the dragging script. The drawing code is incredibly inefficient and horrible to look at. Sorry. This requires a browser that can do stylesheets and some DOM stuff.
draw.js
Text Shadow
Still waiting for the CSS text-shadow property? This script creates a fake text shadow on span elements by cloning them and changing their colors. Cheap, but gets the job done (mostly).
text-shadow.js
Display a random quote
This script writes a random quote to the page. It's very simple and should work in any browser that supports javascript.
quote.js
Simple redirect
Set a new location using javascript.
Mouse over images
Changes an image when the mouse goes over it. This also shows how to change images when they are clicked on.