new ng.Element (Mixed obj) vs. 1.1.0 Full+Lite

The ng.Element class extends the HTML Elements with commonly used methods for easier cross browser coding. Ideally, the ng.get(obj) should be used to get the HTML Element extended.

Additionally, the HTML Element will fire custom events from the new methods (see the Custom Events sections).

Parameters

Mixed obj Required vs. 1.1.0 Full+Lite
Can be one of the following:
  • String: an HTML element id.
  • HTML Element
  • Plug-in, Extended HTML Element or Component

Inheritance Tree

This class inherits the following classes and all their methods and properties. It's recommended to check if any private properties/options are defined before using them. The complete list of inheritted methods and events are listed below the current object Custom Events.
ng.Events ()
ng.Element (obj)

Methods

CSS & Styles

Function ng.Element.get_style (property) vs. 1.1.0 Full+Lite
Return the current CSS style value. All color values will be returned in a Hexadecimal code.
Function ng.Element.get_styles (properties) vs. 1.1.0 Full+Lite
Gets multiple CSS style values in an object. Review ng.Element.set_style for more details.
Function ng.Element.set_style (property, value) vs. 1.1.0 Full+Lite
Sets a CSS property (including tranformation) for the HTML Element.
Function ng.Element.set_styles (obj) vs. 1.1.0 Full+Lite
Sets multiple CSS properties for the HTML Element.
Function ng.Element.set_transform (property, value) vs. 1.1.0 FULL ONLY
Sets a CSS transformation property for the Html Element. The NoGray JavaScript Library calculates all the values for the transformation and use the matrix to apply them to the HTML Element.
Function ng.Element.get_transform (property) vs. 1.1.0 FULL ONLY
Returns the current CSS transform value.
Function ng.Element.transform () vs. 1.1.0 FULL ONLY
Applies the CSS transformation to the HTML Element. This method should be used after using the ng.Element.set_transform(prop, val).
Function ng.Element.set_ie_filter (filter, value) vs. 1.1.0 Full+Lite
This method takes out the complexity of adding, changing or removing multiple IE filters.
Function ng.Element.set_opacity (percent) vs. 1.1.0 Full+Lite
Sets the HTML Element opacity.
Function ng.Element.get_opacity () vs. 1.1.0 Full+Lite
Gets the opacity percentage.
Function ng.Element.set_zoom (percent, zoom_margin, artificial) vs. 1.1.0 FULL ONLY
Sets the HTML Element zoom level. If the browser doesn't support CSS zoom, this function will try to zoom artificially.
Function ng.Element.get_zoom () vs. 1.1.0 FULL ONLY
Gets the zoom percentage.
 
Function ng.Element.add_class (cls) vs. 1.1.0 Full+Lite
Adds a CSS class name to the HTML Element.
Function ng.Element.remove_class (cls) vs. 1.1.0 Full+Lite
Removes a CSS class name from the HTML Element.
Function ng.Element.has_class (cls) vs. 1.1.0 Full+Lite
Checkes if the HTML Element has a CSS class.
Function ng.Element.toggle_class (cls1, cls2) vs. 1.1.0 Full+Lite
Toggles between two CSS classes by adding one and removing the other.

Ajax

Function ng.Element.ajax (url, ajax_obj) vs. 1.1.0 FULL ONLY
Requests a URL and set the innerHTML of the HTML Element to the results returned from the server.
Function ng.Element.abort_ajax () vs. 1.1.0 FULL ONLY
Cancels the current Ajax request and any subsequent requests.

Animation

Function ng.Element.animate (anim_obj, func) vs. 1.1.0 FULL ONLY
This method will animate the HTML Element CSS properties.
Function ng.Element.fade_out (tm, func, obj) vs. 1.1.0 FULL ONLY
Animates the HTML Element opacity to 0.
Function ng.Element.fade_in (tm, func, obj) vs. 1.1.0 FULL ONLY
Animate the element opacity to 100.
Function ng.Element.pause_animation () vs. 1.1.0 FULL ONLY
Pauses the animation, but keeps the timeline and current frame at the same position.
Function ng.Element.play_animation () vs. 1.1.0 FULL ONLY
Starts playing the animation.
Function ng.Element.stop_animation () vs. 1.1.0 FULL ONLY
Stops the animation and clears the timeline. When the animation is stopped, the finishing function and the onAnimationFinish events won't run.
Function ng.Element.reverse_animation (obj, func) vs. 1.1.0 FULL ONLY
Reverses the last animation.
Function ng.Element.move_to (top, left, obj, func) vs. 1.1.0 FULL ONLY
Moves the HTML Element to a specific position. By default, the starting point is the current position, but this can be changed in the obj.start value (third parameter).
Function ng.Element.bezier_move (points, obj, func) vs. 1.1.0 FULL ONLY
Moves the HTML Element based on a bezier curve.

Drag & Drop

Function ng.Element.drag (drag_obj) vs. 1.1.0 FULL ONLY
Sets the HTML Element drag events and properties. after setting the drag properties.
Function ng.Element.stop_drag () vs. 1.1.0 FULL ONLY
Stops the user from dragging the element.
Function ng.Element.start_drag () vs. 1.1.0 FULL ONLY
Allow the user to drag the HTML Element after it was stopped.
Function ng.Element.can_drag () vs. 1.1.0 FULL ONLY
Checks if the HTML Element can be dragged or not.
Function ng.Element.set_drag_grid (grid) vs. 1.1.0 FULL ONLY
Sets the HTML Elements drag grid.
Function ng.Element.get_drag_grid () vs. 1.1.0 FULL ONLY
Gets the HTML Elements drag grid.
Function ng.Element.set_drag_left (left) vs. 1.1.0 FULL ONLY
Sets the CSS property to change on horizontal movement.
Function ng.Element.get_drag_left () vs. 1.1.0 FULL ONLY
Gets the CSS property to change on horizontal movement.
Function ng.Element.set_drag_top (top) vs. 1.1.0 FULL ONLY
Sets the CSS property to change on vertical movement.
Function ng.Element.get_drag_top () vs. 1.1.0 FULL ONLY
Gets the CSS property to change on vertical movement
Function ng.Element.set_drag_style (style) vs. 1.1.0 FULL ONLY
Sets the style on which the HTML Element will be dragged by.
Function ng.Element.get_drag_style () vs. 1.1.0 FULL ONLY
Gets the style on which the HTML Element will be dragged by.
Function ng.Element.set_drag_opacity (opacity) vs. 1.1.0 FULL ONLY
Set the element opacity while it's being dragged.
Function ng.Element.get_drag_opacity () vs. 1.1.0 FULL ONLY
Gets the HTML Element opacity while it's being dragged.
Function ng.Element.set_drag_zoom (zoom) vs. 1.1.0 FULL ONLY
Sets the HTML Element zoom level while it's being dragged.
Function ng.Element.get_drag_zoom () vs. 1.1.0 FULL ONLY
Gets an interger for the element zoom level while it's being dragged.
Function ng.Element.set_drag_on_top (on_top) vs. 1.1.0 FULL ONLY
Sets if the HTML Element should be always on top of everything else while dragged.
Function ng.Element.get_drag_on_top () vs. 1.1.0 FULL ONLY
Gets the HTML Element drag on top boolean value.
Function ng.Element.set_drag_container (element) vs. 1.1.0 FULL ONLY
Sets the HTML Element to constrain the movement of the dragged object.
Function ng.Element.get_drag_container () vs. 1.1.0 FULL ONLY
Gets the HTML Element that is used to constrain the movement of the dragged object. If there is no container, Null will be returned.
Function ng.Element.set_drag_offset (offset) vs. 1.1.0 FULL ONLY
Sets the offset object, which is an object with a "top" and "left" values to offset the dragged element from the initial clicked position.
Function ng.Element.get_drag_offset () vs. 1.1.0 FULL ONLY
Gets the offset object, which is an object with a "top" and "left" values to offset the dragged HTML Element from the initial clicked position.
Function ng.Element.set_drag_targets (targets) vs. 1.1.0 FULL ONLY
An array of HTML Elements (or IDs) that represents where the dragged element will fire the onTargetEnter, onTargetMove and onTargetLeave events. Also, if the element is dropped over a target, the target will be passed to the onDrop event.
Function ng.Element.get_drag_targets () vs. 1.1.0 FULL ONLY
Gets an array of HTML Elements that represent where the dragged HTML Element will fire the onTargetEnter, onTargetMove and onTargetLeave events. Also, if the element is dropped over a target, the target will be passed to the onDrop event.

Position and Scroll

Function ng.Element.set_scroll (top, left) vs. 1.1.0 Full+Lite
Sets the top and left scroll positions.
Function ng.Element.get_scroll () vs. 1.1.0 Full+Lite
Gets the top and left scroll positions.
Function ng.Element.set_scroll_top (top) vs. 1.1.0 Full+Lite
Sets the HTML Element top scroll position.
Function ng.Element.get_scroll_top () vs. 1.1.0 Full+Lite
Gets the top scroll positions.
Function ng.Element.set_scroll_left (left) vs. 1.1.0 Full+Lite
Sets the HTML Element left scroll position.
Function ng.Element.get_scroll_left () vs. 1.1.0 Full+Lite
Gets the left scroll positions.
Function ng.Element.set_width (width) vs. 1.1.0 Full+Lite
This method is a short cut to the ng.Element.set_style('width', value).
Function ng.Element.get_width () vs. 1.1.0 Full+Lite
Gets the HTML Element outer width.
Function ng.Element.set_height (height) vs. 1.1.0 Full+Lite
This method is a short cut to the ng.Element.set_style('height', value).
Function ng.Element.get_height () vs. 1.1.0 Full+Lite
Gets the HTML Element outer height.
Function ng.Element.get_position () vs. 1.1.0 Full+Lite
Gets the HTML Element's top and left positions relative to the document. As of version 1.2.0, this function will return the right and bottom as well.

Utilities

Function ng.Element.empty () vs. 1.1.0 FULL ONLY
Clears the HTML Element content.
Function ng.Element.remove_element () vs. 1.1.2 Full+Lite
Removes the element from the DOM tree.
Function ng.Element.remove () vs. 1.1.0 Full+Lite
This method is deprecated. Removes the element from the DOM tree.
Function ng.Element.set (property, value) vs. 1.1.0 Full+Lite
Sets the given property for the HTML element.
Function ng.Element.get (property) vs. 1.1.0 Full+Lite
Get the property value for the HTML Element.
Function ng.Element.set_html (html, append, eval_script) vs. 1.1.0 Full+Lite
Sets the HTML Element innerHTML value.
Function ng.Element.get_html () vs. 1.1.0 Full+Lite
Gets the HTML Element innerHTML.
Function ng.Element.append_element (elm, append) vs. 1.1.0 Full+Lite
Appends a child HTML Element inside or outside the current HTML Element.
Function ng.Element.replace (elm) vs. 1.1.0 Full+Lite
Replace the current HTML Element with the given elm HTML Element.
Function ng.Element.get_children (tag, func) vs. 1.1.0 Full+Lite
Returns an array of HTML Elements (extended by the ng.Element class) based on the tag name. This function will return all the HTML Elements that match the tag including sub-children.
Function ng.Element.get_direct_children (tag, func) vs. 1.1.0 Full+Lite
This functions works the same way as ng.Element.get_children except it only returns the direct children.
Function ng.Element.get_children_by_class_name (cls, tag, func) vs. 1.1.0 Full+Lite
This functions works the same way as ng.Element.get_children except it searches for a specific CSS class name. This function was added to the Lite version as of version 1.2.0
Function ng.Element.get_first_child () vs. 1.1.0 FULL ONLY
Returns the first HTML Element.
Function ng.Element.get_last_child () vs. 1.1.0 FULL ONLY
Returns the last HTML Element.
Function ng.Element.get_next_sibling () vs. 1.1.0 FULL ONLY
Returns the next HTML Element sibling.
Function ng.Element.get_previous_sibling () vs. 1.1.0 FULL ONLY
Returns the previous HTML Element sibling.
Function ng.Element.get_parent () vs. 1.1.0 Full+Lite
Returns the parent HTML Element.
Function ng.Element.is_child_of (elm) vs. 1.1.0 Full+Lite
Checks if the main HTML Element is a child of the given elm HTML Element.
Function ng.Element.clone_element (keep_children) vs. 1.1.0 Full+Lite
Clone the HTML Element and it's properties (including class name).
Function ng.Element.disable () vs. 1.1.0 Full+Lite
Disables the HTML Element (if not already disabled) and fire the custom event "onDisable". This method should be used on form elements only.
Function ng.Element.enable () vs. 1.1.0 Full+Lite
Enables the HTML Element (if not already enabled) and fire the custom event "onEnable". This method should be used on form elements only.
Function ng.Element.get_plugin () vs. 1.2.2 Full+Lite
This method will return the plugin or component that hold it. The element can be a child element of the plugin object.

Custom Events

In the events' functions, the this will refer to the class object.
Event onDisable vs. 1.1.0 Full+Lite
Fires when the element is disabled using the ng.Element.disable()
Event onEnable vs. 1.1.0 Full+Lite
Fires when the element is enabled using the ng.Element.enable()
Event onAnimationFinish vs. 1.1.0 Full+Lite
Fires when any of the element's animation is finished.
Event onDragStart vs. 1.1.0 Full+Lite
Fires when the user start dragging an element. The function for this event will receive the mouse down Event object.
Event onDrag vs. 1.1.0 Full+Lite
Fires when the user move the dragged element. The function for this event will receive the mouse move Event object.
Event onTargetEnter vs. 1.1.0 Full+Lite
Fires when the user drag an element over a target element. The function for this event will receive the target HTML element as a parameter and the mouse move Event object.
Event onTargetMove vs. 1.1.0 Full+Lite
Fires when the user move the dragged element over a target element. The function for this event will receive the target HTML element as a parameter and the mouse move Event object.
Event onTargetLeave vs. 1.1.0 Full+Lite
Fires when the user drag an element out of a target element. The function for this event will receive the target HTML element as a parameter and the mouse move Event object.
Event onDragEnd vs. 1.1.0 Full+Lite
Fires when the user stop dragging the element. The function for this event will receive the mouse up Event object.
Event onDrop vs. 1.1.0 Full+Lite
Fires when the user drop the element. If the user drop the element on a target HTML element, it will be passed to this event function. Otherwise, null will be passed. Also the function for this event will receive the mouse up Event object.
Event onAjaxReturnEmpty vs. 1.1.0 Full+Lite
Fires when the HTML Element makes a successful Ajax request and the results are empty.
Event onAjaxUpdate vs. 1.1.0 Full+Lite
Fires when the HTML Element makes a successful Ajax request and the results update the content. The function for this event will receive one parameter that holds the results text.
Event onAjaxReturn vs. 1.1.0 Full+Lite
First when the HTML Element makes a successful Ajax request regardless if the results were empty or not.

ng.Events () Methods

Some of these methods might be overriden by the inheriting class.
Function ng.Events.add_event (evt, func) vs. 1.1.0 Full+Lite
The add_event method will attach an event listener to an object. When the event is fired, the listeners functions will be executed on last added first run approach.
Function ng.Events.add_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.add_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.remove_event (evt, func) vs. 1.1.0 Full+Lite
Remove the function func from the event evt queue. When adding the event, you should add the function by reference. Anonymous functions cannot be removed.
Function ng.Events.remove_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.remove_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.clear_events (evt) vs. 1.1.0 Full+Lite
Remove all the functions under the event name evt.
Function ng.Events.clear_all_events () vs. 1.1.0 Full+Lite
This function works the same way Events.clear_events(evt) except it removes all the events attached to the object.
Function ng.Events.fire_event (evt_nm, args, evt) vs. 1.1.0 Full+Lite
Executes all the functions in the event evt_nm queue. Functions are executed in lasted added first exectued order.

API Menu