Documentation

include MVC MVC.Animate MVC.Class MVC.Controller MVC.Controller.Action MVC.Controller.Action.Drag MVC.Controller.Action.Drop MVC.Controller.Action.EnterLeave MVC.Controller.Action.Event MVC.Controller.Action.Hover MVC.Controller.Action.Lasso MVC.Controller.Action.Selectable MVC.Controller.Action.Subscribe MVC.Controller.Comet MVC.Controller.Params MVC.Controller.Params.Drag MVC.Controller.Params.Drop MVC.Controller.Stateful MVC.Delegator MVC.Doc MVC.Element MVC.Event MVC.File MVC.History MVC.IO MVC.IO.Ajax MVC.IO.Comet MVC.IO.JsonP MVC.IO.WindowName MVC.IO.XDoc MVC.Model MVC.Model.Ajax MVC.Model.Cookie MVC.Model.JsonP MVC.Model.JsonRest MVC.Model.WindowName MVC.Model.XmlRest MVC.Native MVC.Native.Array MVC.Native.Date MVC.Native.Function MVC.Native.Number MVC.Native.Object MVC.Native.String MVC.Options MVC.Store MVC.SyntheticEvent MVC.Test MVC.Test.Assertions MVC.Test.Controller MVC.Test.Functional MVC.Test.Runner MVC.Test.Unit MVC.Timer MVC.Timer.Easings MVC.Vector MVC.View MVC.View.Helpers OpenAjax

MVC.Element

The Element API provides useful functions for manipulating and traversing the DOM. All of these elements are classed under $E. When using the Element or $E function, all Element functions that have their first argument as element are added to the element.

Examples

Element('element_id') //-> HTMLElement
$E('element_id') //-> HTMLElement

$E('element_id').next() //-> HTMLElement
Element.next('element_id') //-> HTMLElement

$E('element_id').insert({after: '<p>inserted text</p>'})

Constructor

MVC.Element

MVC.Element(element) -> HTMLElement

the HTML Element for the given id with functions in Element. This is also aliased as MVC.$E()

{String/HTMLElement} - Either an HTMLElement or a string describing the element's id.

Static Methods

add_class

add_class(element, className) -> HTMLElement
Adds a class to the html element.
{HTMLElement} - element that will have a class added to its className
{String} -
{HTMLElement} - element

class_names

class_names(element) -> undefined
Returns a list of classNames
{Array} -
dom/position

compare

compare(a, b) -> Number
Compares the position of two nodes and returns at bitmask detailing how they are positioned relative to each other. You can expect it to return the same results as compareDocumentPosition. Parts of this documentation and source come from John Resig.
{HTMLElement} - the first node
{HTMLElement} - the second node
{Number} - A bitmap with the following digit values:
BitsNumberMeaning
0000000Elements are identical.
0000011The nodes are in different documents (or one is outside of a document).
0000102Node B precedes Node A.
0001004Node A precedes Node B.
0010004Node B contains Node A.
01000016Node A contains Node B.

dimensions

dimensions(element) -> MVC.Vector
Returns a vector with the element's dimensions.
{HTMLElement} -
{MVC.Vector} - vector element.

first

first(element, check) -> undefined
Returns the first child with nodeType = 1
{HTMLElement} -
{Function} - if provided should return true or false for the element you want returned

get_children

get_children(element) -> HTMLElement
Returns children with nodeType = 1
{} -
{HTMLElement} -

get_style

get_style(element, style) -> undefined
Returns the style for a given element.
{} -
{} -

has

has(element, b) -> Boolean
Returns true or false if one element is inside another element. Typically this is called with an element's related target to prevent mouseout from being called on nested HTML. For example: 
 MVC.$(event.target).has(event.relatedTarget);
If you need to know more about elements position in the dom, try [MVC.Position.static.compare].
{HTMLElement} - outer element, or element in MVC.$E()
{HTMLElement} - inner element
{Boolean} - Returns true if b is in element, false if otherwise.

has_class

has_class(element, regexp) -> Array
Returns an array of matches if the element has a className, null if otherwise. 
 MVC.$E("element_id").has_class(/\w+_(\d+)/) -> ['thing_5','5']
{HTMLElement} -
{RegExp} -
{Array} -

insert

insert(element, insertions) -> undefined
Inserts HTML into the page relative to the given element.
{String/HTMLElement} - Either an HTML Element or a string describing the element's id.
{Object} - Is an object with one of the following attributes:
OptionDescription
after Inserts the given HTML after the given element.
before Inserts the given HTML before the given element.
bottom Inserts the given HTML at the bottom of the given element's children.
top Inserts the given HTML at the top of the given element's children.

last

last(element, check) -> HTMLElement
returns the last child element with nodeType = 1
{} -
{} -
{HTMLElement} -

make_positioned

make_positioned(element) -> HTMLElement
Makes an element position ('relative', 'absolute', or 'static')
{} -
{HTMLElement} - element

next

next(element, wrap, check) -> HTMLElement
Returns the next sibling with nodeType = 1
{} -
{} -
{} -
{HTMLElement} -

offset

offset(element) -> MVC.Vector
Returns the the position of the element by taking all of it and its parents' offsetTop and offsetLeft values. 
 MVC.$E('user').offset()
 MVC.Element.offset(myelement);
{String/HTMLElement} - the element you want the offset of.
{MVC.Vector} - a vector with the top and bottom values.
dom/position

offset

offset(element) -> undefined
Returns the position of the element on the page.
{HTMLElement} -

previous

previous(element, wrap, check) -> undefined
Returns the previous sibling with nodeType = 1
{} -
{} -
{} -

remove_class

remove_class(element, className) -> HTMLElement
Removes a class to the html element.
{HTMLElement} - element that will have a class removed from its className
{String} -
{HTMLElement} - element

toggle

toggle(element) -> String
Toggles the style display. It is assumed that no css is already being used to hide the element. If you want to have the element hidden to start, write style="display:none" in your html.
{} -
{String} - the resulting display name. '' if visible, 'none' if hidden.

update

update(element, content) -> HTMLElement
Updates an element with content. This is a cross browser substitute for innerHTML. It very valuable when inserting new table elements.
{HTMLElement} - the element you want updated
{String} - html content
{HTMLElement} - element.
dom/position

window_dimensions

window_dimensions() -> Object
Returns an object with important position and dimension information on the document and window.
{Object} -
dom/position

within

within(element, x, y, cache) -> Boolean
Returns if a coordinate is within an element taking scrolling into account.
{HTMLElement} -
{Number} - pixels on the page
{Number} - pixels on the page
{Boolean} - If present, an object that will be used to cache position lookups
{Boolean} - true if x, y is inside the element, false if otherwise.
dom/position

within_box

within_box(element, left, top, width, height, cache) -> Boolean
Returns if an element is within a box.
{HTMLElement} -
{Number} -
{Number} -
{Number} -
{Number} -
{Boolean} -
{Boolean} - true if at least part of the element is within the box, false if otherwise.