X Demos & Applications
Animation
X Animation Index - This page serves as an index for all X animation functions and methods.
Animation Techniques - This article describes animation techniques that provide for time-based animation, trigonometric acceleration, animation of any CSS property and more.
Animation Implementations - This article fully implements the functions discussed in the above article.
Old Animations
Absolute Magnitude - This page serves as an index for my older, CBE-based, astronomy animations.
Dragging & Scrolling
User Interface Objects
xFenster Demo 1, demo 2, demo 3 and demo 4. The new Property Viewer also uses xFenster. Here is an experimental feature which was not implemented in revision 16. - Fenster is 'window' in German.
xModalDialog - This allows you to "grey" the page and display a dialog box in the center of the window. Effectively it becomes a modal dialog box.
Collapsible Sections - This demo is part of the quick-start tutorial.
xSplitter - A nestable, dual-pane splitter (evolved from Melles Pane).
xTabPanelGroup - An unobtrusive enhancement. Downgradeable, accessible, tabbed panels.
xTabPanelGroup 2 - same object, but this demo sets the height in CSS and allows width to flow with the HTML.
TPG Basic - illustrates the basic concepts underlying xTabPanelGroup.
xTooltipGroup - tooltips are positioned to the right or top of the trigger element, or follow the mouse. The tooltip text is taken from the trigger element's TITLE attribute - or you can optionally provide your own text (as html).
Tooltips 1 - tooltips that slide in from the left. The tooltip text is taken from the trigger element's TITLE attribute. This is an older demo.
xPopup - DHTML popups, an alternative to popup windows.
xBar - horizontal or vertical, scaled bar-graph object.
Fading Panels - Mouseover a trigger element and other elements fade in and out.
Banner/Preview - A demo illustrating the use of onmousemove and onmouseout.
xPageGrey - "grey" the page and display a wait image and message in the center of the window.
Slideouts - yep, they slide out when you mouseover their related element.
Simple Progress Bar - a simple "Loading" progress bar.
Persistent Display - persistent display or non-display of elements with specific IDs or class-names.
Right-Click Menu - this demo implements a right-click menu that works in IE. It works in FF as long the user has checked this option: "Allow scripts to: Disable or replace context menus".
Layouts
Table Enhancements
xTableCursor - A table row/col cursor which does not over-write existing class names on the TDs.
More table cursors - one of them is a table row/col cursor with range select.
xTable - An unobtrusive table enhancement: Fixed header and first column.
xTableHeaderFixed - An unobtrusive table enhancement: Fixed table headers.
Table Toys - functions for hiding/showing table rows/columns/cells. A function for iterating a table's rows and cols.
Another table toy: xTableSync - syncronized table events.
xSelect - An unobtrusive form-enhancement. Accessible categories & sub-categories.
xSpinButton - A simple spin button.
Click-n-Drag Checkboxes - Click a TD to toggle it's checkbox. After clicking, drag across other TDs to set their checkboxes to the same value as the clicked one..
Enable By Check - Enable/disable all text inputs on same row as checkbox.
xSubSelect - A simple solution for three cascading selects.
Check By Name - Check/Uncheck all checkboxes with the same 'name'.
Selectable Fieldsets - An unobtrusive form-enhancement. Selecting an item in the SELECT causes the corresponding FIELDSET to be shown and the others to be hidden.
Auto-Sizing Textareas - An unobtrusive form-enhancement. textareas that size to fit their text and restore to their default size.
Add Textarea Rows As Needed - Another textarea-enhancement. A new row is added when the number of characters is greater than rows * cols.
Build table from form - The user fills in a form, clicks add, and the form data is inserted into a table. The table data can then be submitted to a server. There are 3 variations of this demo.
Sum checked - adds up checked items which are all the same price.
Radio Groups - A simple demo for validating multiple radio button groups.
Passing Data - from a form in one window to a form in another window.
Images
xSlideShow - A simple slideshow object.
Image Gallery v2 - A Javascript image gallery and slide-show all in one file. This thing just keeps getting better thanks to everyone's feedback.
Image Gallery v1 - The first version of the above. This one reloads the page each time while v2 only reloads images, not the page.
xTriStateImage - A 3-state rollover effect. The demo also illustrates 2 different techniques for associating user-defined objects with Element objects.
xImgAsyncWait - Asynchronously wait for images to load.
Image Viewport - an animated clipping demo.
Text Over Image - A simple demo for displaying text over an image.
Img Preload Wait - A very simplified version of xImgAsyncWait.
Draw Poly - an old experiment with dynamic resizing of images.
Windows & Frames
xWindow - helps maintain child (popup) windows, especially when you need multiple child windows and each window needs different features.
Windows - an experiment in managing multiple child windows.
Frame Events - Watching mouse events in another frame.
Frame Comm - Inter-frame communication demo.
Frame Resize - Frame resizing demo.
Property Inspectors
'New' X Property Viewer - displays element and event properties and computed styles. It utilizes xFenster to make the viewers draggable and resizable.
X Property Viewer - displays element and event properties and computed styles.
X Properties Report - displays element properties and computed styles.
Mouse Events - watch xEvent properties during mousemove, mouseover, and mouseout events.
Key Events - watch xEvent properties during keypress, keydown, and keyup events and control bubbling and default actions.
Shift Mode - demonstrates a technique for detecting the shift, ctrl and alt keys.
Arrow Keys - move an element with the arrow keys and watch keyCode values from all Key events.
Text Input Events - see how your browser supports text input events.
CSS Cursors - See how your browser supports all the different CSS cursor settings.
Here's a simple mouse event test.
Bookmarklets - a little experiment with bookmarklets.
Misc.
xHttpRequest Test 1, Test 2 and Test 3 - Simple experiments with asynchronous HTTP requests (AJAX).
Scroll Percent - determines the percentage of the page the user has viewed.
Append Listener - append a click listener to all <A> elements whose contained IMG src matches a particular string.
Link Interception - Intercept and control the target and url of any/all links on the page - without adding anything to the html.
xWalkTree - node traversal demo.
Use xCapitalize to capitalize the first letter of every word in a string.
Show/Hide - a basic demo illustrating how to show/hide an element on mouseover of some other element.
DHTML Tables - This demo is over 5 years old - but still works great!
VBS/JS Communication - VBS in one window, JS in another, and they pass data. This demo is only for IE!
QwertyShifter - Encoder/decoder for QWERTY-shifted languages ;-)
Permutations - Generates permutations of sets of strings.
PostPrep - Prepare code for posting in html-enabled forums.
Using WSH - a test for IE security settings.
TimeKeeper - keep up with time spent on different projects. This is a very old demo, but still cool.
CBE Demos & Applications
X has replaced CBE - but the demos are still great fun. Many of them are over 6 years old and still work great!
