Unverse: a mighty small Javascript Library

Unverse is a lightweight - absolutely tiny - collection of terse cross-browser javascript functions that perform common tasks, including a lightbox, ajax calls, animation and drag and drop. It implements DOMready. It is open source and free under the MIT licence. It aims to minimise the amount of javascript needed to get stuff done, whilst trying to remove the hassle of getting your code to work with varying DOM implementations in different browsers. This is a common aim and there are a lot of ambitious and excellent libraries out there attempting the same sort thing. But, compared to Unverse, they are all enormous. If you need something more sophisticated than Unverse try jQuery or MooTools. If you want to use Unverse in conjunction with one of these libraries, it should not clash with them.

Unverse works in all modern browsers, and Internet Explorer 6. Download Unverse.

Actually, it sounds more than a little pompous to describe a 5k javascript file(currently 5483 bytes, uncompressed) as a "library" or "framework", but if you think it is one then Unverse is the smallest javascript famework there is. Anyway, here's what Unverse does.

You include the following in your HTML - it can go in the HEAD section, or add it to the end of your HTML, just before the closing tag for BODY:
...<script type="text/javascript" src="unverse.js"></script></body> Placing scripts at the end of your HTML can speed up the display of your web page.

This will give you access to a whole bunch of javascript functions that generally start with "_." (underscore dot).

function docReady(){ initialJavascript}
Run as soon as document ready (also known as DOM ready). Place initialJavascript inside a function called docReady and it will run as soon as the document object model is loaded, even if the browser is still downloading images or other large objects on the page.
Example: function docReady(){alert("We're ready!");}. (this example should have run as soon as this page was ready.
CSS class "menu"
Dropdown menu support. Unverse automatically assigns a class of "hover" to list items (LI) within any element with a class of "menu" when the mouse hovers over them. The "hover" class is removed on mouseout. This enables you to build dropdown or flyout menus with CSS. Also known as Suckerfish menus. You can configure or translate the classname for "menu" to use with the toHover variable at the start of the script:e.g. toHover="dropdown").

A simple Lightbox.Pops up the element (e.g. a div or a paragraph) in a modal pseudo-window, optionally with title. If given, title can include HTML. If id is a url starting 'http:', it will pop up the web page. If width and height are omitted it will try to take the size from the element's style setting, falling back to 640x480.
Examples:_.box('summary',350,250) .
_.box('http://google.com',825,500,'Google') .

Use CSS class "image": a class='image' to make image links box their hrefs (you can configure the classname to use with the toPop variable at the start of the script:e.g. toPop="pop_me"). It will resize a pop-up if it is bigger than the current window.

Examples: <a class="image" title="Hot Air Balloon Festival" href="http://farm4.static.flickr.com/3552/3806347967_235d9a2553.jpg">Hot air balloons</a>. or
<a class="image" title="Column detail from an Egyptian temple" href="http://farm4.static.flickr.com/3650/3308472501_ca5f307b4c_b.jpg"><img src="http://farm4.static.flickr.com/3650/3308472501_ca5f307b4c_s.jpg" width="75" height="75" alt="In Egypt" />
Hot air balloons or In Egypt (big image: 390k)

AJAX. Sends an asynchronous HTTP request to url (using GET). Script will continue processing. When a response is received from the server, it is copied into element, without the user refreshing the page. If element is not supplied the response is executed as javscript (using eval). Returns false if the browser does not support asynchronous requests.
Example: _.ajx('news.htm','newsflash') Note that url must be on the same server.
a div with id "newsflash"
Animate an element by adjusting styleProperty until it reaches endValue over a duration miliseconds. If miliseconds is not given a duration of 500 milliseconds (half a second) is used.


_.ani('ani_me','width',400)   _.ani('ani_me','width',125,2000)
_.ani('ani_me','height',300)   _.ani('ani_me','height',95,2000)
_.ani('ani_me','marginLeft',0,2000)   _.ani('ani_me','marginLeft',600,2000)
_.ani('ani_me','opacity',0.05,2500)   _.ani('ani_me','opacity',1,3000)

Drag and drop. Make element draggable with the mouse. On drop, the element that it is dropped onto is available as the droppedOn property of the dragged element. The second parameter, function is optional: if given it will; be executed when the element is dropped. It can be given as an inline function, as in the example, or as an unquoted function name.

<div id="drag_me" onclick="_.dd(this,function(){alert(_.$('drag_me').droppedOn.nodeName);});this.innerHTML='<h2>Now drag me!</h2>'">
<h2>Click me!</h2>

Click me!

Use CSS class "drag": class='drag' to automatically make elements draggable (you can configure the classname to use with the toDrag variable at the start of the script:e.g. toDrag="draggable_object").

Example: <h1 id="tit" class="drag">Unverse: a mighty small Javascript Library</h1> - at the top of the page, if you haven't moved it already!

Returns the element with the id id. If id is not a string - e.g. it's the result of a previous call to _.$() then it returns itself.
Example: alert(_.$('tit').innerHTML) (but see _.v() below)
Note that in all the following, where element is a parameter it can be supplied as an id or an object: it is not necessary to use _.$(l) as a parameter; but note _.e() and _.re() to attach and remove an event need an object as a parameter.
Shorthand for getElementsByTagName, plus a bit. Returns an array of elements of type tag that are descendents of element. If tag is not given, returns all elements descended from element. If element is not given, starts at document.
Example: alert(_.t('DT','function_list').length)
Cross-browser shorthand for getElementsByClassName. Returns an array of elements of type tag with class classname that are descendents of element. If tag is not given, returns all types. If element is not given, starts at document.

Yes, it even works on IE6!

Example: inf=_.c('informal'); for(i=0;i<inf.length;i++){inf[i].style.fontFamily='cursive';} (but see _.all below for shorter version)
Returns the value or content of element. If element is an INPUT or TEXTAREA it reurns its value, if it is a SELECT, it returns the value of the selected option, and for anything else it returns the innerHTML.
Example: alert(_.v('tit')) (An even shorter alternative to the first example on this list!)
OR alert(_.v('color'))
Executes function on every item in array. It's a bit like for each.
Example: function turnblue(el){el.style.color='blue';}

or: _.all(_.c('informal'),function(each){each.style.color='purple';})
Show the element, optionally at co-ordinates x,y.
Example: _.s('tit',_.v('X'),_.v('Y')) x=, y=
Hide the element.
Example: _.h('tit')
Get the value of the styleProperty for element. Works even for styles set through a style sheet, or for computed values.
(whereas...won't work)
Attach function so that it fires on event for object. Note, must take an object, not an id.
Removefunction for event on object. Note, must take an object, not an id.
Returns the window width, excluding scrollbars, in pixels.
Example: alert(_.wW())
Returns the window height, excluding scrollbars, in pixels.
Example: alert(_.wH())
Returns the taller of the document width or the window width, in pixels. Excludes scrollbars. Useful for maximising the width of an element.
Example: alert(_.dW())
Returns the wider of the document height or the window height, in pixels. Excludes scrollbars. Useful for maximising the height of an element.
Example: alert(_.dH())
Returns the amount scrolled left, in pixels.
Example: alert(_.sX())
Returns the amount scrolled down, in pixels.
Example: alert(_.sY())

Unverse: mighty small.

Yes, all this in only 5k of code!