X Quick-Start

Installation

Download the X distribution file and unzip it into the directory of your choice. Be sure to select the "Use folder names" option when unzipping. After unzipping you will find a directory named "Cross-Browser.com" which has several sub-directories. In the root folder you will find a web page, 'index.html', which serves as the index for the entire distribution package.

Directory Structure

Under the root directory Cross-Browser.com are the following sub-directories.

css Default styles and other general-purpose stylesheets.

images Images used by the demos.

talk Articles.

templates Specific and general-purpose template files.

toys Demos that do not use the X library.

x Has '.js' files that contain X functions grouped into categories.

x/docs X documentation files.

x/examples Examples that demonstrate the use of X.

x/lib This is the actual library. It contains all XML and Javascript source files for X. The '.js' files in /x/ are generated by XC from the files in this directory.

x/menus More examples that demonstrate the use of X.

x/xc Contains the VC++ project for XC.

Library Files

There are very many ".js" files in the distribution package. This section will help you to understand their purpose and how to utilize them.

/x/lib - X Library Sources

This directory contains the actual library. It contains ".xml" and ".js" files. XC uses the files in this directory to build custom library files - individual collections of specific X functions. Read more about the structure of X.

/x/ - Prebuilt X Libraries

In this directory are general-purpose library files which have been built using XC. These are provided for your convenience and for compatibility with earlier X distributions.

In this directory you will find a general-purpose library file which is very useful during development. The file x.js contains all X symbols. During offline development use x.js - this makes all symbols available and you don't have to figure out which library file to use. When you are ready for deployment run XC on your project and now you have an optimized library file containing only the symbols used in your application. Don't use x.js when your page goes online because it is a very big file.

The remaining library files in this directory are categorized collections of X symbols. They have been compressed but, if you prefer, you can rebuild them without compression. The .xcp file for each .js file are also in this directory. The contents of each .js file are as follows.

x_anim.js xBar, xEllipse, xParaEq, xSlideCornerTo, xSlideTo, xWinScrollTo, xSequence.

x_animation.js xAnimation, xAniLine, xAniOpacity, xAniEllipse, xAniScroll, xAniSize.

x_cook.js xSetCookie, xGetCookie, xDeleteCookie.

x_core.js xLibrary, xUA, xGetElementById, xParent, xDef, xStr, xNum, xShow, xHide, xVisibility, xDisplay, xZIndex, xColor, xBackground, xMoveTo, xLeft, xTop, xPageX, xPageY, xOffsetLeft, xOffsetTop, xScrollLeft, xScrollTop, xHasPoint, xResizeTo, xWidth, xHeight, xGetComputedStyle, xClip, xClientWidth, xClientHeight, xOpacity, xGetElementsByTagName.

x_debug.js xSetIETitle, xGetElePropsString, xGetElePropsArray, xName, xParentChain, xLoadScript, xEvalTextarea, xSmartLoadScript.

x_dom.js xWalkEleTree, xWalkTree, xGetComputedStyle, xGetElementsByClassName, xGetElementsByTagName, xGetElementsByAttribute, xPrevSib, xNextSib, xFirstChild, xInnerHtml, xCreateElement, xAppendChild, xParentNode.

x_drag.js xEnableDrag, xDisableDrag xEnableDrop, xDisableDrop.

x_event.js xAddEventListener, xRemoveEventListener, xEvent, xStopPropagation, xPreventDefault.

x_img.js xImgRollSetup, xImgAsyncWait, xTriStateImage.

x_iteration.js xEach, xEachUntilReturn, xTableIterate, xTimes, xTraverseDocumentStyleSheets, xTraverseStyleSheet, xWalkEleTree, xWalkToFirst, xWalkToLast, xWalkTree, xWalkTree2, xWalkTreeRev, xGetElementsByAttribute, xGetElementsByClassName, xWalkUL.

x_misc.js xLinearScale, xIntersection, xGetURLArguments, xPad, xHex, xRad, xDeg, xCapitalize, xCardinalPosition, xStrEndsWith, xStrReplaceEnd, xStrStartsWith, xColEqualizer, xEditable, xTimer, xCollapsible.

x_object.js xCollapsible, xDialog, xMenu1, xMenu1A, xMenu1B, xMenu5, xTabPanelGroup, xBar, xCollapsible, xFenster, xLibrary, xPopup, xSelect, xSplitter, xTabPanelGroup, xTimer, xTooltipGroup, xTriStateImage, xWinClass, xWindow.

x_slide.js xSlideTo.

x_style.js xAddClass, xFindAfterByClassName, xFindBeforeByClassName, xGetComputedStyle, xGetCSSRules, xGetStyleSheetFromLink, xHasClass, xHasStyleSelector, xHasStyleSheets, xRemoveClass, xToggleClass, xGetElementsByClassName, xTraverseStyleSheet, xTraverseDocumentStyleSheets, xInsertRule.

x_table.js xTableRowDisplay, xTableCellVisibility, xTableColDisplay, xTableIterate, xTableCursor, xTableSync, xTableHeaderFixed, xTable.

x_win.js xWindow, xWinClass, xWinOpen, xWinScrollTo.

Note that the above files may not contain all the symbols in the X Library. The folder x/lib/ contains the entire library. Refer to the X Index.

Experiment

This is the best way to get familiar with X...

Choose one of the demos and experiment with it.

Choose one of the X functions and write a small demo that allows you to experiment with that function.

Use the X Viewer for quick access to any symbol's source, documentation, links to related demos, revision history and more. Just click one of the links above.

Most importantly... Have Fun! :-)

Related Documents

X Index - X Library Index.

XC Reference - X Library Compiler Reference.

X Structure - X Library Structure.

About Cross-Browser.com

Cross-Browser.com is an outlet for Mike Foster's Javascript hobby. This site features X - a cross-browser Javascript library, and many demos, applications, articles and documentation.

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.

Application Support

Get your questions answered faster by posting at one of the following forums.

SitePoint.com

HFTOnline.com

CodingForums.com

Browser Support

The X core is designed for Opera 5+ (*), Mozilla, Firefox, Safari, Netscape 7.x, Internet Explorer 4+, Konqueror, Netscape 4.75+ (*) and browsers with similar object models. Object-detection instead of browser-detection is used exclusively. Currently, I'm testing with the following browsers on WinXP, Win2K and Win98. X has been tested by others on a wide variety of platforms.

Opera 9.01
FireFox 1.0.2 & 1.5.0.7
Internet Explorer 4, 5 & 6