DHTML / CSS stuff
-
Bassistance.de - jQuery accordion menu
This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.
-
Exploding-boy.com - Tab menus
Exploding-boy designs sliding doors menus with style. There's an additional span element in the anchor link so the background can be manipulated without JavaScript in IE6. He's got lots of designs for people to use.
-
A List Apart - Sliding doors
Sliding doors is a wonderful, completely flexible 'tab menu system.' Thid original solution for liquid width background images requires a hover on the list element to change the background - which means JavaScript such as HTML Dog's Suckerfish Hover for IE6.
-
456bereastreet.com - Inverted Sliding doors
Inverted tabs are similar to sliding door tabs but are bottom-aligned, and as text size is increased, more of the tabs are revealed from the top down, instead of from the bottom up.
-
20bits.com - Ajax tabs
Content is loaded from external files through xmlhttprequest when the tab is activated. Read the comments and ensure scripts are called from an external file.
-
Webfx.eae.net - Slider
This slider degrades gracefully with JavaScript disabled. Full mouse support. Full keyboard support when the slider is focused. Mouse wheel support in IE. Skinable with CSS. I've tied it into the DOM style for the body font size.
-
ToolMan.org - Direct Manipulation Using JavaScript and CSS
This fantastic ToolMan package lets visitors rearrange a list and edit the titles as they see fit. It could be a navigation menu or a bunch of MP3s. I've created a site list you can adjust. After advice from The Tool Man I got cookies working on the 'sorting in two dimensions' by adding a unique id to each list item.
-
Broken-notebook.com - Magnetic board
A magnetic board which automatically updates the co-ordinates of a 'word square'. I've reduced it down to letters and a few symbols for a simple message board. I've also hacked it to create an Online Fuzzy Felt Game.
-
Simonwillison.net - Executing JavaScript on page load
For a script to behave nicely in the presence of other scripts there's a need to assign a callback function directly to the window.onload handler. I've used this script with the PureDOMExplorer and TJK current location scripts.
-
The Man In Blue - design
I've used this site's show-hide toggle JavaScript. It neatly displays an absolutely positioned DIV while adjusting the position of a single toggle button background image. He's release a great book called The JavaScript Anthology with DOM and CSS stuff.
-
Dhtmlgoodies.com - Ajax dynamic list
Ajax and a PHP file which creates a database table for the auto suggest list. Ajax contacts this file from the script. This file outputs a list of countries in the demo.
-
Circlesixdesign.com - Ajax contact form
Ajax contact form highlighting all of the fields that need to be filled plus fields with errors (error message displayed). PHP processes everything the form sends and returns the array of extra form fields as name->value pairs. It even checks MX records to see if the domain on your email address is valid. Has code modularity to easily define variables. Inspired by Dustin Diaz' original AJAX contact form.
-
Contrastsweb.com - PHP style sheet switcher
This tutorial is Rob Ballou's clarification and improvement on Chris Clark's (ALA) PHP style sheet switcher. It's a good way to offer print and visual impairment styles. I also tried Dustindiaz.com's Unobtrusive Degradable Ajax Style Sheet Switcher which was very effective but you have to put the entire site through the index page so unsuitable for here. Another strike for Web 1.0.
-
24ways.org - Ajax edit in place
A combination of this very simple Basic User Authentication from www.php-mysql-tutorial.com and Basic User Autherntication from 24ways.org's edit in place with ajax makes a basic authenticated CMS system.
-
KScripts.com - Pearl Search
KScripts offers a fast, efficient, and highly customizable web site indexer and search engine written in pearl. It's got masses of features and there's automated scripts to help with the administration. A good selection of useful comments and instructions to help get it set up are provided. I've also added a Google custom search to the advanced search options so that visitors can seach within the sites featured here.
-
Masuga.com - AJAX rating bar
This Multiple CSS/AJAX star rating bar from Masuga.com is the dog's blox. Everything is set up so you can just stick as many as you like anywhere in your site. The mark-up for any star rating component is a very simple 'PHP require' with a unique ID. It automatically creates an entry in the MySQL table whenever anyone votes. Looks like a good place for design help at http://www.masugadesign.com/.
-
Flash Kit - Flash resources
I've lost count of all the flash components I've borrowed. Here are just a few:
Adam Bowman's Spider, Serkanp's fish in water, Philip Radvan's Globe, Kirupa's loading random movie, Henrique's
circle preloader, Assembler's
clip preloader, Vemix's
speed indication preloader, Dan Ivanov's
Lightballs, Zer'
turntable, Dynamic Calendar,
Colour Picker.
-
N T Designs - .flas
This zoom in - zoom out onmouseover effect is the Disco Penguin flash movie to give a 'disco' feel. I got the actionscript and assistance from T. Norman of N T Designs. There's a number of handy flash effects, tutorials and code samples at the site.
-
Deconcept.com - W3C valid flash
I've used two methods for 'embedding' flash, both are good. A List Apart's Satay method is simple and best for small movies or when you have a container movie (mine loads a random movie clip into the main movie).
Deconcept.org uses JavaScript, but means you don't need a container, caters to screen readers and you can set parameter values (e.g transparency).