Download the X Distribution File.
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.
xEnableDrag - A simple xEnableDrag demo.
Drag-n-Drop - A demo illustrating the use of xDragInFence, xEnableDrag and xEnableDrop.
RubberBandBox - A simple object implemented with xEnableDrag.
2-Way Horizontal Resize - Another demo illustrating the use of xEnableDrag.
Mouseover Scroll Buttons - Slides an element while the mouse is over some other element.
Vertical Scroller - Illustrates one of the many vertical scrolling techniques.
Page Scroller - Shows how to control the scrolling of a window.
Slider - scrollbar-type slider demo.
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.
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.
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".
Niko's Layout - An interesting demo implementing a progressively enhanced layout.
Slide-In Pages - With progressively enhanced layout.
3-Column CSS Layout - With a few Js behaviors thrown in just for fun :-).
Menu/Layout Demo - Slideout Menu with 5-Column CSS Layout.
2-Column CSS Layout - A two-column fixed width CSS layout with the UL-based xMenu6.
Collapsible 3-Column Layout - Using an unmodified layout from BlueRobot.com (I just added a little js).
dsds - A layout experiment with collapsible DIVs.
xMenu 1 - A single-level menu with several variations.
xMenu6 - A vertical UL-based menu with unlimited levels and many other features.
xCollapsible - Collapsible nested ULs or DIVs.
xMenu7 - A UL-based menu with 3 levels: horizontal/horizontal/vertical.
xTableHeaderFixed demos - there are several demos for this object.
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.
xSlideShow - A simple slideshow object.
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.
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.
'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.
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.
Pick A Card, Demo 2 - an improved version of this demo.
xFenster rev 21 - added support for a "control menu".
xCalendar - a new X UI object.
If you are using X, XC or anything from this site, show off your work by posting a link in the X Showcase forum.
Forum support is available at the X Library Support Forums.
The X core is designed to work with all browsers, Object-detection instead of browser-detection is used exclusively. Currently, I'm testing with the following browsers. X has been tested by others on a wide variety of platforms.
Win7 (Home): IE 9.
WinXP (SP3): Chrome 184.108.40.206, Firefox 3.5.5, IE 7 & 8, Opera 10.60 and Safari 4.0.3.
Linux (Ubuntu 9.10): Chrome 220.127.116.11 and FireFox 3.5.7.