| @@ -1,6 +1,17 @@ |
| {maketoc}
|
| -The following are objects and functions of the Prototype library that simplify the tricky code that is involved manipulating Dom Elements, such as divs, forms, fields, etc.
|
| +The following are objects and functions of the Prototype library that simplify the tricky code that is involved in manipulating Dom Elements, such as text, divs, forms, fields, etc. |
|
|
| +These functions are great for changing text on a page, monitoring changes made to forms, and adding and removing addition page parts. |
| + |
| +Also see the PrototypeUtilityFunctions, some of which are handy to use when manipulating Elements. |
| + |
| + |
| + |
| + |
| + |
| + |
| + |
| +!HTML and Basic Element Manipulation |
| !!The Element object
|
|
|
| This object provides some utility functions for manipulating elements in the DOM.
|
|
|
| @@ -123,6 +134,21 @@ |
| <br>Hello, <span id="person" style="color:red;">Wiggum. How is it going?</span> Are you there?
|
| {/code}
|
|
|
| +!!The Position object (preliminary documentation) |
| + |
| +This object provides a host of functions that help when working with element positioning. |
| + |
| +||Method | Kind | Arguments | Description |
| +prepare() | instance | (none) | Adjusts the deltaX and deltaY properties to accommodate changes in the scroll position. Remember to call this method before any calls to withinIncludingScrolloffset after the page scrolls. |
| +realOffset(element) | instance | element: object | Returns an Array with the correct scroll offsets of the element, including any scroll offsets that affect the element. The resulting array is similar to [total_scroll_left, total_scroll_top] |
| +cumulativeOffset(element) | instance | element: object | Returns an Array with the correct positioning offsets of the element, including any offsets that are imposed by positioned parent elements. The resulting array is similar to [total_offset_left, total_offset_top] |
| +within(element, x, y) | instance | element: object, x and y: coordinates of a point | Tests if the given point coordinates are inside the bounding rectangle of the given element |
| +withinIncludingScrolloffsets(element, x, y) | instance | element: object, x and y: coordinates of a point | |
| +overlap(mode, element) | instance | mode: 'vertical' or 'horizontal', element: object | within() needs to be called right before calling this method. This method will return a decimal number between 0.0 and 1.0 representing the fraction of the coordinate that overlaps on the element. As an example, if the element is a square DIV with a 100px side and positioned at (300, 300), then within(divSquare, 330, 330); overlap('vertical', divSquare); should return 0.10, meaning that the point is at the 10% (30px) mark from the top border of the DIV. |
| +clone(source, target) | instance | source: element object or id, target: element object or id | Resizes and repositions the target element identically to the source element.|| |
| + |
| + |
| +!Form and Field Element Manipulation |
| !!The Field object
|
|
|
| This object provides some utility functions for working with input fields in forms.
|
|
|
| @@ -164,6 +190,8 @@ |
| textarea(element) | instance | element: object or id of a form element that has the value property, like a textbox, button or password field. | Returns an Array with the element's name and value, like ['elementName', 'elementValue']
|
| select(element) | instance | element: object or id of a <select> element | Returns an Array with the element's name and all selected options' values or texts, like ['elementName', 'selOpt1 selOpt4 selOpt9']||
|
|
|
| + |
| +!Element Listening |
| !!The Abstract.TimedObserver class
|
|
|
| This class is used as the base class for the other classes that will monitor one element until its value (or whatever property the derived class defines) changes. This class is used like an abstract class.
|
|
|
| @@ -241,18 +269,5 @@ |
| ||Method | Kind | Arguments | Description
|
| [ctor](form, callback) | constructor | form: form object or id, callback: function to be called when any data entry element in the form changes | Inherited from [#Abstract.EventObserver | Abstract.EventObserver]. Creates an object that will monitor the form for changes.
|
| getValue() | instance | (none) | Returns the serialization of all form's data.||
|
| -
|
| -!!The Position object (preliminary documentation)
|
| -
|
| -This object provides a host of functions that help when working with element positioning.
|
| -
|
| -||Method | Kind | Arguments | Description
|
| -prepare() | instance | (none) | Adjusts the deltaX and deltaY properties to accommodate changes in the scroll position. Remember to call this method before any calls to withinIncludingScrolloffset after the page scrolls.
|
| -realOffset(element) | instance | element: object | Returns an Array with the correct scroll offsets of the element, including any scroll offsets that affect the element. The resulting array is similar to [total_scroll_left, total_scroll_top]
|
| -cumulativeOffset(element) | instance | element: object | Returns an Array with the correct positioning offsets of the element, including any offsets that are imposed by positioned parent elements. The resulting array is similar to [total_offset_left, total_offset_top]
|
| -within(element, x, y) | instance | element: object, x and y: coordinates of a point | Tests if the given point coordinates are inside the bounding rectangle of the given element
|
| -withinIncludingScrolloffsets(element, x, y) | instance | element: object, x and y: coordinates of a point |
|
| -overlap(mode, element) | instance | mode: 'vertical' or 'horizontal', element: object | within() needs to be called right before calling this method. This method will return a decimal number between 0.0 and 1.0 representing the fraction of the coordinate that overlaps on the element. As an example, if the element is a square DIV with a 100px side and positioned at (300, 300), then within(divSquare, 330, 330); overlap('vertical', divSquare); should return 0.10, meaning that the point is at the 10% (30px) mark from the top border of the DIV.
|
| -clone(source, target) | instance | source: element object or id, target: element object or id | Resizes and repositions the target element identically to the source element.||
|
|
|
| |
|
|