The CDE javascript is syntactic sugar that helps creating DHTML easier and faster by creating Custom DOM Elements.

CDE script combinator. Any required modules or plugins will automatically be included, unless specified otherwise. Red parts are what I consider "core".

Version: v2a8

[full source size / minified source size]

  • Core [ 85.1k / 26.8k ]
  • CSS [ 20.5k / 6.4k ] (requires: Core)
  • Debug [ 4.8k / 3.0k ] (requires: Core, CSS)
  • Aux [ 18.3k / 6.5k ] (requires: Core, CSS)
  • ColorPicker [ 19.3k / 12.2k ] (requires: Core, CSS)
  • ActiveElement [ 1.1k / 0.4k ] (requires: Core)
  • Caret [ 1.9k / 1.0k ] (requires: Core)

Note that in the changelog, CDE denotes the main object itself (a method of the library) and cde denotes CDE.prototype (so a method of the object).

Changelog v2a8

There've been some radical changes in this version. First of all, the whole thing has been modularized. Might even cut it up even more. And secondly, a few major additions like draggable.

Please remember that this is not a finished product. I would not recommend using this in a high-traffic production environment just yet (but if you use it anyways, please let me know :)

  • Added cde.draggable, by which you can move an element around, relative to a given parent (or body), with several options
  • Fixed cde.on to ignore an empty callback
  • Fixed cde.on for mouse events. It seems you can't alter the event object so we'll just return the mouse button as an extra callback parameter instead.
  • Changed cde.on, added a parameter to get it to return the actual function registered for this event (your callback gets wrapped). You'll need this to deregister the listener, obviously when you do, you can't chain any further.
  • Added cde.un to unregister attached events. Note that you'll need to explicitly ask for them by the new boolReturnFunction parameter on cde.on.
  • Renamed CDE.nColor to CDE.color, only seemed logical
  • Extended CDE.color to also accept rgba(r,g,b,a) where a is a decimal 0..1. It should at some point also be able to return alpha, CDE.rgb as well...
  • Added cde.clone to clone a node. The catch is that cloneNode also copies the internal ._id assigned by CDE. This method prevents this problem and deletes and reassigns that value before returning a new cde. As a bonus, it also clears the id.
  • Added cde._strId internally, it is set whenver you set the id through cde.atr (so implicitly also through and is shown with debug statements concerning the cache...
  • Added cde.src to set the src of an element (we had id, name, val... src seemed logical)
  • Minor internal change to the way the following functions internally set the value: cde.val, cde.sel, and
  • Added CDE.stopEvent which allows you to prevent an event (calls evt.stopPropagation and evt.preventDefault and sets evt.cancelBubble and evt.returnValue and returns false)
  • Changed cde.css and moved the internal function to cde._css to make things faster. This move prevents javascript from having to recreate the function every time you call cde.css(), which in my experience happens a lot. The minor overhead can add up.
  • Changed CDE.dba to always return the first argument
  • Changed doc of CDE.prototype.getStl which stated camelcase was not accepted. It now properly states camelcase and dashed versions both work.
  • Changed cde.empty to first simply clear the element by setting innerHTML to the empty string. It then removes whatever nodes are left. Probably faster than removing nodes by hand.
  • Fixed cde.blur which would call focus :p Now correctly calls blur
  • Changed cde.text (relative to txtn) to work like cde.html does, allowing you to clear this first, or to insert the text node before all other childeren of this
  • Renamed cde.txt to cde.html because that makes slightly more sense (it still maps to CDE.span)
  • Depricated CDE.txt (won't make it to the final release :)
  • Added CDE.text to create pure text nodes, replaces CDE.txtn
  • Depricated CDE.txtn (won't make it to the final release :)
  • Renamed cde.txt to cde.html
  • Depricated cde.txt (won't make it to the final release :)
  • Fixed Setting the value of a checkbox in CDE.inp (you couldnt...)
  • Fixed CDE.ljs(url, funcOnload, boolNoAntiCache, boolSilent) because the funcOnFail did not work (remnant of something I tested)...
  • Changed CDE.ljs and added a boolSilent parameter so the function shuts up about what it imported :)
  • Changed cde.m, mt, mr, mb and ml, p, pt, pr, pb, pl. They do no longer point to m and p but all do their own thing. Additionally, m and p only set the margin/padding to all sides and accepts one param.
  • Changed debug cache messages while it's being created, it will show them after debug window has been set up. Should probably never happen :)
  • Fixed various minor bugs caught by JSLint :)
  • Fixed time functions which would not refer to CDE but to the (implied) global when trying to call CDE functions...
  • Added CDE.extend and CDE.proto, which allow you to add properties or methods to an object (extend) or to the object's prototype (proto). If you don't specify the second parameter, CDE is used instead. If you do specify the second parameter, the first object is the target and the second argument should be the properties/methods to copy. This makes for better source, I think.
  • Refactored code using CDE.extend and CDE.proto. Saves 2k minified... :) Downside is that IDE's will have a harder/impossible time with autocomplete, as they don't recognize the prototype pattern :( But this is an inherent problem to dynamic typed languages like Javascript which should probably be solved through documentation IDE hints anyways...
  • Changed cde.pos to accept a dom element as first parameter, the method will stop when it reaches that element. Back compat is preserved (for now); for falsy, it is body, for bool true, it is offsetParent.
  • Added value parameter to CDE.textarea
  • Changed CDE.stylesheet, for now, so that you can only change it completely. Not partially. Will fix that in a future release, hopefully.
  • Fixed a problem with cde.add and textnodes. Apparantly they have a .length property. It was assuming textnodes to be an array for that reason. It now checks for nodeType and will not assume array if that exists.
  • Added cde.minw, cde.minh, cde.maxw, cde.maxh for min/max-width/height
  • Added cde.oa for overflow:auto
  • Pimped debug a little, adding a button to check the current compat mode (CompatCSS1 is what you're looking for), a debug bar and a targeting function, with which you can target an element (firebug-wise) which will then be saved into a variable you can access through the "console" and get all kinds of information about (this needs a little improving for absolute and floating items...).
  • Split the code up in modules and plugins. Well, just modules for now. Modules is what I release, and plugins is what you release. Like jQuery, plugins augment the CDE object with custom extending methods using the CDE.extend and CDE.proto methods. Modules do too, except they're mine :)