X Demos & Applications

Download the X Distribution File.

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

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.

Pick A Card 1 and Pick A Card 2 - More xEnableDrag demos.

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.

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

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.

Js Layout, with CSS downgrade - Javascript-controlled layout which downgrades to a CSS layout.

Collapsible 3-Column Layout - Using an unmodified layout from BlueRobot.com (I just added a little js).

Equal Column Heights 3 Column and 2 Column - my versions of a demo featured in a SitePoint article.

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.

Floaters

Box, Bar, Limited and Fixed!

xToolbar is the beginning of an improved version of the vertical toolbar demo.

Old Menus

xMenu7 - A UL-based menu with 3 levels: horizontal/horizontal/vertical.

xMenu 2, xMenu 3, xMenu4 Horizontal and xMenu4 Vertical.

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.

Form Enhancements

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.

Latest Demos

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.

User Projects

If you are using X, XC or anything from this site, show off your work by posting a link in the X Showcase forum.

License

By your use of X and/or CBE and/or any Javascript from this site you consent to the GNU LGPL - please read it. If you have any questions about the license, read the FAQ and/or come to the forums.

Tech Support

Forum support is available at the X Library Support Forums.

About Cross-Browser.com

Cross-Browser.com is the home of X - a cross-browser Javascript library, and many demos, applications, articles and documentation.

Browser Support

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 3.0.195.38, Firefox 3.5.5, IE 7 & 8, Opera 10.60 and Safari 4.0.3.

Linux (Ubuntu 9.10): Chrome 4.0.249.43 and FireFox 3.5.7.

Thanks!

This site and all its javascript were developed with UltraEdit, a most excellent programmer's editor.

Support Free Software

Visit the Free Software Directory

Search

Cross-Browser.com

World Wide Web

Mike's Other Stuff

Where Mike Works

Friends