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.
Dragging & Scrolling
User Interface Objects
xCalendar - A simple, popup date picker with support for date ranges.
xFenster demos - there are several demos for this object. Fenster is German for "window".
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 1 - 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. This demo also includes a floating, vertical toolbar.
xTabPanelGroup 3 - Same as demo 2 but this demo does not include the vertical toolbar.
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.
xPageGrey1 - "grey" the page and display a wait image and message in the center of the window.
xPageGrey2 - "gray" the page and display a wait image 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 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
xTableHeaderFixed demos - there are several demos for this object.
xTable demo 1 and demo 2 - An unobtrusive table enhancement: Fixed header and first column.
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.
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.
xWindow2 - another xWindow demo.
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.
AJAX: xTableHeaderFixed Ajax demo demonstrates the use of xHttpRequest.
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 8 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.
