Class: HTMLElement

HTMLElement

The HTML DOM HTMLElement interface.
It should be noted that all functions that do not have a specified return value, return the calling object, allowing for function chaining.

Mixes In

Methods

addClass(className)

Adds the specified class(es) to the element.

Parameters:
Name Type Description
className String

One or more classes separated by a single space to be added to the element's class attribute.

Source:
Throws:
TypeError
The input `value` must be string. __Note:__ This error will not be thrown if `value` is not a string and is truthy and the element does not have a `class` value at the time of invocation.

animate(properties, duration, easing, complete())

Performs a custom animation of a set of CSS properties.
Parameters:
Name Type Argument Default Description
properties Object

An object of CSS properties and values that the animation will move toward.

duration Number <optional>
400

A number of milliseconds that specifies how long the animation will run.

easing String <optional>
"swing"

Indicates which easing function to use for the transition. The string can be any CSS transition timing function or "swing".

complete() function <optional>

A function to call once the animation is complete. Inside the function, this will refer to the element that was animated.

Just like HTMLElement#css, CSS properties must be specified the same way they would be in a style sheet since Firebolt does not append "px" to input numeric values (i.e. 1 != 1px).

Unlike jQuery, an object that specifies different easing types for different properties is not supported. (Should it be supported? Tell me why.) However, relative properties (indicated with += or -=) and the toggle indicator are supported.

Also, Firebolt allows "auto" to be a viable target value for CSS properties where that is a valid value.

For more easing options, use Firebolt's easing extension (or just grab some functions from it and use them as the easing parameter).

Note: In IE 9, the easing for all animations will be linear.

Source:
See:

css(propertyName) → {String}

Gets the value of the specified style property.

Parameters:
Name Type Description
propertyName String

The name of the style property who's value you want to retrieve.

Source:
Returns:
Type
String

The value of the specifed style property.

css(propertyNames) → {Object.<String, String>}

Gets an object of property-value pairs for the input array of CSS properties.

Parameters:
Name Type Description
propertyNames Array.<String>

An array of one or more CSS property names.

Source:
Returns:
Type
Object.<String, String>

An object of property-value pairs where the values are the computed style values of the input properties.

css(propertyName, value)

Sets the specified style property.

Note: Unlike jQuery, if the passed in value is a number, it will not be converted to a string with 'px' appended to it prior to setting the CSS value. This helps keep the library small and fast and will force your code to be more obvious as to how it is changing the element's style (which is a good thing).

Parameters:
Name Type Description
propertyName String

The name of the style property to set.

value String | Number

A value to set for the specified property.

Source:

css(properties)

Sets CSS style properties.

Note: Just like the previous function, if a value in the object is a number, it will not be converted to a string with 'px' appended to it to it prior to setting the CSS value.

Parameters:
Name Type Description
properties Object.<String, String, Number>

An object of CSS property-values.

Source:

fadeIn(duration, easing, complete())

Displays the element by fading it to opaque.

Parameters:
Name Type Argument Default Description
duration Number <optional>
400

A number of milliseconds that specifies how long the animation will run.

easing String <optional>
"swing"

Indicates which easing function to use for the transition. The string can be any CSS transition timing function or "swing".

complete() function <optional>

A function to call once the animation is complete. Inside the function, this will refer to the element that was animated.

Source:

fadeOut(duration, easing, complete())

Hides the element by fading it to transparent.

Parameters:
Name Type Argument Default Description
duration Number <optional>
400

A number of milliseconds that specifies how long the animation will run.

easing String <optional>
"swing"

Indicates which easing function to use for the transition. The string can be any CSS transition timing function or "swing".

complete() function <optional>

A function to call once the animation is complete. Inside the function, this will refer to the element that was animated.

Source:

fadeToggle(duration, easing, complete())

Displays or hides the element by animating its opacity.

Parameters:
Name Type Argument Default Description
duration Number <optional>
400

A number of milliseconds that specifies how long the animation will run.

easing String <optional>
"swing"

Indicates which easing function to use for the transition. The string can be any CSS transition timing function or "swing".

complete() function <optional>

A function to call once the animation is complete. Inside the function, this will refer to the element that was animated.

Source:

finish()

Immediately completes the element's currently running animation.

Unlike when HTMLElement#stop() is called with a truthy jumpToEnd parameter, this function will also trigger a transitionend event in addition to immediately finishing the element's running animation. The event will not be triggered however, if the element is not running an animation.

Source:

hasClass(className) → {Boolean}

Determines if the element's class list has the specified class name.

Parameters:
Name Type Description
className String

A string containing a single class name.

Source:
Returns:
Type
Boolean

true if the class name is in the element's class list; else false.

hide()

Hides the element by setting its display style to 'none'.

Source:

offset() → {Object}

Gets the element's current coordinates relative to the document.

Source:
Returns:
Type
Object

An object containing the coordinates detailing the element's distance from the top and left of the document.

Example
// HTML
// <body style="margin: 0">
//   <div id="mydiv" style="position: absolute; margin: 10px; left: 10px"></div>
// </body>

$$('mydiv').offset();  // -> Object {top: 10, left: 20}

offset(coordinates)

Sets the element's coordinates relative to the document.

Parameters:
Name Type Description
coordinates Object

An object containing the properties top and left, which are numbers indicating the new top and left coordinates for the element.

Source:

removeClass(className)

Removes the specified class(es) or all classes from the element.

Parameters:
Name Type Argument Description
className String <optional>

One or more classes separated by a single space to be removed from the element's class attribute.

Source:

serialize() → {String}

Encode a form element or form control element as a string for submission in an HTTP request.

Note: Unlike jQuery, successful <select> controls that have the multiple attribute will be encoded using Firebolt.param() with the traditional parameter set to false, so its array value will be preserved in the encoded string.

This:
  • (HTMLFormElement|HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement)
Source:
Returns:
Type
String

A URL-encoded string of the form element's value or an empty string if the element is not a successful control.

show()

Shows the element if it is hidden.
Note: If the element's default display style is 'none' (such as is the case with <script> elements), it will not be shown. Also, this method will not show an element if its visibility is set to 'hidden' or its opacity is 0.

Source:

slideDown(duration, easing, complete())

Displays the element with a sliding motion.

Parameters:
Name Type Argument Default Description
duration Number <optional>
400

A number of milliseconds that specifies how long the animation will run.

easing String <optional>
"swing"

Indicates which easing function to use for the transition. The string can be any CSS transition timing function or "swing".

complete() function <optional>

A function to call once the animation is complete. Inside the function, this will refer to the element that was animated.

Source:

slideToggle(duration, easing, complete())

Displays or hides the element with a sliding motion.

Parameters:
Name Type Argument Default Description
duration Number <optional>
400

A number of milliseconds that specifies how long the animation will run.

easing String <optional>
"swing"

Indicates which easing function to use for the transition. The string can be any CSS transition timing function or "swing".

complete() function <optional>

A function to call once the animation is complete. Inside the function, this will refer to the element that was animated.

Source:

slideUp(duration, easing, complete())

Hides the element with a sliding motion.

Parameters:
Name Type Argument Default Description
duration Number <optional>
400

A number of milliseconds that specifies how long the animation will run.

easing String <optional>
"swing"

Indicates which easing function to use for the transition. The string can be any CSS transition timing function or "swing".

complete() function <optional>

A function to call once the animation is complete. Inside the function, this will refer to the element that was animated.

Source:

stop(jumpToEnd)

Stops the animation currently running on the element.
Parameters:
Name Type Argument Default Description
jumpToEnd Boolean <optional>
false

A Boolean indicating whether to complete the current animation immediately.

When .stop() is called on an element, the currently-running animation (if any) is immediately stopped. If, for instance, an element is being hidden with .slideUp() when .stop() is called, the element will now still be displayed, but will be a fraction of its previous height. Callback functions are not called.

If jumptToEnd is true, this is equivalent to calling HTMLElement#finish(), except the transitionend event will not occur.

Source:

toggle(showOrHide)

Shows the element if it is hidden or hides it if it is currently showing.

Parameters:
Name Type Argument Description
showOrHide Boolean <optional>

Indicates whether to show or hide the element (true => show, false => hide).

Source:
See:

toggleClass(className, addOrRemove)

Add or remove one or more classes from the element depending on the class's presence (or lack thereof).
Parameters:
Name Type Argument Description
className String <optional>

One or more classes separated by a single space to be toggled. If left empty, the element's current class is toggled.

addOrRemove Boolean <optional>

Indicates whether to add or remove the class (true => add, false => remove).

Note: Functionality is undefined if the input class names are not unique.

Source:

val() → {String|Array|null}

Retrieves the element's current value. If the element is a <select> element, null is returned if none of its options are selected and an array of selected options is returned if the element's multiple attribute is present.

Source:
Returns:
Type
String | Array | null

The element's value.

val(value)

Sets the element's value.

Parameters:
Name Type Description
value String

The value to give to the element.

Source:

val(values)

Checks the element if its current value is in the input array of values and deselects it otherwise (only <input> elements with type checkbox or radio).
If the element is a <select> element, all of its options with a value matching one in the input array of values will be selected and all others deselected. If the select element does not allow multiple selection, only the first matching element is selected.

Parameters:
Name Type Description
values Array.<String>

The array of values used to determine if the element (or its options) should be checked (or selected).

Source: