For several years now this hobby has provided me with a lot of enjoyment. It is my pleasure to share my toys with you. All I ask is that you (1) respect the LGPL license; (2) support the developer community by sharing code, participating in forums and helping others.

X 3.15.1

X News

z5: I added the layout2 demo.

I finally have IE versions 4, 5, and 6 running on the same machine. I'm in the process of retesting everything.

xLib is my newest project and is still in development. I'll briefly describe it, to see if anyone thinks it might be useful. xLib scans your application source files (.js, .html, .php, etc.), makes a list of all X Library functions called, then creates a custom library file containing only the functions required by your app. It performs very simple compression for now - it just removes comments and leading whitespace. It may also create a custom css file containing any required css for any X components found in the app.

X v3.15.1 has the following changes:

  • xLoad was changed to xInclude (sorry about that)
  • x_load.js now has the global 'sniffer' variables - unfortunately they are also in x_core.js - I'm not sure what to do with this yet.
  • I added xGetElementsByTagName() to x_dom.js. It even works in IE4 :-)
  • Other minor fixes from testing with IE 4 and 5.

X v3.15 had two very important changes:

  • The functions have been moved into different files. I've tried to do this in a logical way - to decrease file sizes for those needing only core functions, and to better modularize the library.
  • Beginning with v3.15 the main library files do not provide support for NN4. If you need NN4 support, use 'x_core_nn4.js' and 'x_event_nn4.js' instead of 'x_core.js' and 'x_event.js'. The function xInclude will do this for you automatically.

If all you need are the core functions (and you don't need NN4 support) then your download size has gone from 15KB to 10KB because of the above changes.

X Documentation

X Examples

  • xMenu4 - cascading sub-menus from nested ULs
  • Collapsible 3-Column Layout - Using an unmodified layout from BlueRobot.com (I just added a little js).
  • xBar - horizontal or vertical, scaled bar-graph object.
  • Key Events - move an element with the arrow keys and watch keyCode values from all Key events.
  • Drag Demo - drag events implmented with X: dragStart, drag, and dragEnd.
  • Floater - menu floats vertically onscroll.
  • Slideouts - yep, they slide out when you mouseover their related element.
  • Popup Demo - the implementation of xPopup demonstrates the use of the xTimer object.
  • Tooltips
    • Tooltips 1 - tooltips that slide in from the left. The tooltip text is taken from the trigger element's TITLE attribute.
    • Tooltips 3 - 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).
  • Layout 2 - an enhanced version of the 'equalized columns' demo provided in SitePoint's CSS book.
  • Layout 1 - simple example of a dynamic, downgradable DHTML layout.
  • Bookmarklets - a little experiment with bookmarklets.
  • xWalkTree - node traversal demo.

X Source Files

  • x_alt.js - Alternatives to existing X functions.
  • x_bar.js - Bar graph objects.
  • x_cook.js - Cookie access functions.
  • x_core.js - Core functions: appearance, position, size, etc.
  • x_core_nn4.js - Same as 'x_core.js' but with NN4 support.
  • x_debug.js - Debugging utilities.
  • x_dom.js - DOM query and traversal functions.
  • x_drag.js - Drag events implementation.
  • x_event.js - Event listener registration, window resize and scroll event simulation, and cross-browser Event object.
  • x_event_nn4.js - Same as 'x_event.js' but with NN4 support.
  • x_img.js - Image rollover support.
  • x_load.js - For loading .js and .css files before the window.onload event.
  • x_misc.js - Functions that will eventually be moved to other files.
  • x_popup.js - An experiment with a dhtml alternative to popup windows.
  • x_slide.js - Animation functions.
  • x_timer.js - Timer object with setTimeout and setInterval methods which callback to object methods.
  • x_tip.js - xTooltipGroup object.
  • x_win.js - Child window management functions.

Upgrading to X 3.15

The following provides tips for upgrading from a previous version of X. Come to the forums and I'll help with the upgrade. Utilize the new X reference - it provides function dependency and file information for all X functions.

  • The file 'x.js' has been split into 'x_core.js', 'x_event.js', 'x_slide.js', etc.
  • All event-related functions are now in 'x_event.js'.
  • The function xSlideTo is now in 'x_slide.js'.
  • The function xGetElementsByClassName is now in 'x_dom.js' (it was previously in 'x_util.js').
  • The main library files no longer provide support for NN4. Two files were affected by this change: 'x_core.js' and 'x_event.js'. If you need NN4 support use 'x_core_nn4.js' and 'x_event_nn4.js' instead of 'x_core.js' and 'x_event.js'. The function xLoad will do this for you automatically.

CBE 4.19.1

CBE News

CBE was great fun, but now I concentrate mainly on X. Soon, X will do almost everything CBE would do - with much smaller file sizes. I probably won't make any more updates to CBE.

CBE Documentation

CBE Source Files

CBE Examples

X v/s CBE

Differences

Most of the CBE documentation does not apply to X. CBE implements its own object tree. CBE also implements the DOM2 event model in cross-browser javascript. The CBE documentation is needed to describe these 'embedded' object and event models.

X does not implement its own object nor event models. You might say that, while CBE is an 'API', X is merely a function library. X uses the browser's native object and event models. Really, the only documentation you need to make use of X is...

  • the X function reference, which describes how to use each function
  • a small example of using the function (i'm working on more examples)
  • DOM documentation from W3C, MS, NN, etc.

So, you don't have to learn the X object model, because it doesn't have one - just study the existing browser DOMs.

Almost all the CBE methods are tightly bound, because of their dependence on the CBE object model. Most of the X functions are independent from each other. With X it is much easier to create a custom 'x.js' file which contains only the functions used by your application. (I'm working on something that will automate this. ;-))

Similarities

The semantics of CBE methods and their corresponding X functions are virtually the same. For example, the concept of "width/height" is the same - the CBE methods width()/height() and the X functions xWidth()/xHeight() both provide, effectively, read and write access to element.offsetWidth/element.offsetHeight.

LGPL FAQ

X and CBE are distributed under the terms of the LGPL (GNU Lesser General Public License). I decided on this license because I want this work to remain free to the developer community.

Are X and CBE free?
Yes, you may download the libraries for free.

Is there free technical support?
Yes, technical support at the forums is free - but technical support by eMail is not free.

May I use CBE at work, or in a commercial project?
Yes, you may use the libraries in your business projects, even if that project includes proprietary code, but the X and/or CBE library must retain its LGPL and free status. See the license for details.

May I modify the library?
Yes, you may modify and/or extend the libraries, but the resulting library must retain its LGPL and free status. I have license and copyright comments at the top of each source file. Leave those comments intact and add your own comments explaining your modifications to the file. See the license for details.

Do I have to give you credit?
There is a copyright and license statement at the top of each source file. Please leave that intact. A link back to Cross-Browser.com would be very nice but is not required.

Cross-Browser.com - DHTML libraries and applications.

More

For the latest info on X and CBE visit Cross-Browser.com where you'll find more documentation and many more example applications.

If this is your first time to use X or CBE then I suggest you start with X.

By your use of X and/or CBE you consent to the LGPL License - please read it.

Support

Myself and other DHTML developers offer free support at the following forums. I hope you visit us.

SitePoint Javascript Forum

HFTOnline Webmastering Forum