Cross-Browser.com Offline

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.

• The X Function Reference.
• General Debugging Tips.
• More X Docs coming soon.

• xMenu4 - cascading sub-menus from nested ULs
  • xMenu4 1 with horizontal main labels.
  • xMenu4 2 with vertical main labels.
• 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_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.

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 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.

• The CBE Object Reference.
• Getting Started with CBE.
• The CBE Core Object Model.
• The CBE Event Model.

• cbe_clip.js - Clipping methods.
• cbe_core.js - Object tree implementation and core methods.
• cbe_debug.js - Debugging utilities.
• cbe_debug.html - Provides a debug window.
• cbe_event.js - Event model implementation.
• cbe_slide.js - Animation methods.
• cbe_slide2.js - More animation methods.
• cbe_util.js - Utility functions.

Some of these may not work, and I'm sure many of the links are bad - but here they are...

• anchor.html -
• appearance.html -
• cbe_tree.html -
• cbedi1.html -
• cbwindow.html -
• clip0.html -
• colorcube.html -
• create_ele.html -
• dhms.html -
• dhtml_tables.html -
• drag_drop.html -
• drag_drop2.html -
• drag0.html -
• drag1.html -
• drag2.html -
• drag3.html -
• drag4.html -
• dragout1.html -
• dragout2.html -
• event_properties.html -
• event0.html -
• form_control.html -
• form_zindex.html -
• forms.html -
• frame_test.html -
• iframe.html -
• menu1.html -
• menu1_template.html -
• menu10_template.html -
• menu11_template.html -
• menu2_template.html -
• menu3.html -
• menu3_template.html -
• menu4_template.html -
• menu5_template.html -
• menu6_template.html -
• menu7_template.html -
• menu8_template.html -
• menu9.html -
• menu9_template.html -
• newsticker.html -
• parametric_equations.html -
• pe.html -
• pe1.html -
• pe2.html -
• pe3.html -
• pe4.html -
• pe5.html -
• position_methods.html -
• positioning1.html -
• positioning2.html -
• randombackground.html -
• sequence.html -
• size.html -
• slide0.html -
• slide1.html -
• slider.html -
• slider2.html -
• slider3.html -
• spinners.html -
• tooltips.html -

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. ;-))

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.