This library contains a number of simple static javascript functions.
hasClasses
addClasses
removeClasses
toggleClasses
show
hide
fadeIn
fadeOut
createElementFromHTML
onReady
loadUrl
alias
Function Aliases
Checks if the element contains one or more of the given class names.
Regular.hasClasses(selector, classes, true)
Parameter | Description | Default |
---|---|---|
selector |
A CSS selector string or a HTMLElement object. | |
classes |
A string or array of class names. | |
matchAll |
Optional boolean whether the element should have all given classes (true) or at least one (false). | true |
boolean
true or false based on whether the element contains one or more of the given class names.
<div id="mydiv" class="foo bar">...</div>
Regular.hasClasses('#mydiv', 'foo');
// => true
Regular.hasClasses('#mydiv', 'baz');
// => false
Regular.hasClasses('#mydiv', 'bar baz');
// => false
Regular.hasClasses('#mydiv', ['bar', 'baz']);
// => false
const div = document.querySelector('#mydiv');
Regular.hasClasses(div, ['bar', 'baz'], false);
// => true
Adds given class name(s) to the element.
Regular.addClasses(selector, classes)
Parameter | Description |
---|---|
selector |
A CSS selector string, a HTMLElement object or a collection of HTMLElement objects. |
classes |
A string or array of class names. |
<div id="mydiv" class="foo">...</div>
Regular.addClasses('#mydiv', 'bar');
// => class="foo bar"
Regular.addClasses('#mydiv', 'foo');
// => class="foo"
Regular.addClasses('#mydiv', 'bar baz');
// => class="foo bar baz"
const div = document.querySelector('#mydiv');
Regular.addClasses(div, ['bar', 'baz']);
// => class="foo bar baz"
Removes given class name(s) from the element.
Regular.removeClasses(selector, classes)
Parameter | Description |
---|---|
selector |
A CSS selector string, a HTMLElement object or a collection of HTMLElement objects. |
classes |
A string or array of class names. |
<div id="mydiv" class="foo bar baz">...</div>
Regular.removeClasses('#mydiv', 'bar');
// => class="foo baz"
Regular.removeClasses('#mydiv', 'bar baz');
// => class="foo"
Regular.removeClasses('#mydiv', ['bar', 'baz']);
// => class="foo"
const div = document.querySelector('#mydiv');
Regular.removeClasses(div, 'qux');
// => class="foo bar baz"
Toggles given class name(s) of the element.
Regular.toggleClasses(selector, classes)
Parameter | Description |
---|---|
selector |
A CSS selector string, a HTMLElement object or a collection of HTMLElement objects. |
classes |
A string or array of class names. |
<div id="mydiv" class="foo bar baz">...</div>
Regular.toggleClasses('#mydiv', 'bar');
// => class="foo baz"
Regular.toggleClasses('#mydiv', 'bar baz');
// => class="foo"
Regular.toggleClasses('#mydiv', ['bar', 'qux']);
// => class="foo baz qux"
const div = document.querySelector('#mydiv');
Regular.toggleClasses(div, 'qux');
// => class="foo bar baz qux"
Shows the given element (changes opacity and display attributes).
Regular.show(el)
Parameter | Description |
---|---|
selector |
A CSS selector string, a HTMLElement object or a collection of HTMLElement objects. |
<div id="mydiv" style="display:none;">...</div>
Regular.show('#mydiv');
const div = document.querySelector('#mydiv');
Regular.show(div);
Hides the given element (changes opacity and display attributes).
Regular.hide(el)
Parameter | Description |
---|---|
selector |
A CSS selector string, a HTMLElement object or a collection of HTMLElement objects. |
<div id="mydiv">...</div>
Regular.hide(div);
const div = document.querySelector('#mydiv');
Regular.hide('#mydiv');
Fades in the the given element.
Regular.fadeIn(selector, duration, oncomplete)
Parameter | Description | Default |
---|---|---|
selector |
A CSS selector string, a HTMLElement object or a collection of HTMLElement objects. | |
duration |
Optional duration of the effect in milliseconds. | 250 |
oncomplete |
Optional callback function to execute when effect is completed. |
<div id="mydiv" style="display:none;">...</div>
Regular.fadeIn('#mydiv');
const div = document.querySelector('#mydiv');
Regular.fadeIn(div, 1000, () => console.log('Faded in'));
Fades out the the given element.
Regular.fadeOut(selector, duration, oncomplete)
Parameter | Description | Default |
---|---|---|
selector |
A CSS selector string, a HTMLElement object or a collection of HTMLElement objects. | |
duration |
Optional duration of the effect in milliseconds. | 250 |
oncomplete |
Optional callback function to execute when effect is completed. |
<div id="mydiv">...</div>
Regular.fadeOut('#mydiv');
const div = document.querySelector('#mydiv');
Regular.fadeOut(div, 1000, () => console.log('Faded out'));
Converts a string with HTML code to a HTMLElement object.
Regular.createElementFromHTML(html)
Parameter | Description |
---|---|
html |
String with HTML code. |
HTMLElement
object based on the given string.
const mydiv = Regular.createElementFromHTML(`<div id="mydiv" class="foo">My <strong>cool</strong> element!</div>`);
Runs a function when the document is loaded (on ready state).
Regular.onReady(func)
Parameter | Description |
---|---|
func |
Callback function to execute when document is ready. |
Regular.onReady(`console.log('Document is ready!')`);
Loads a url with optional POST data and optionally calls a function on success or fail.
Regular.loadUrl(url, data, success, fail)
Parameter | Description |
---|---|
url |
String containing the url to load. |
data |
Optional string representing the POST data to send along. |
success |
Optional callback function to execute when the url loads successfully (status 200). |
fail |
Optional callback function to execute when the url fails to load. |
The result (responseText), status and the full XMLHttpRequest object will be passed to the callback functions.
Regular.loadUrl('my/url.php');
Regular.loadUrl(
'my/url.php',
'id=123&format=ajax',
(result) => {
console.log('Yeah!');
console.log(result);
},
(result, status) => console.log(`Oh no! Failed with status: ${status}`)
);
Sets a global alias for the Regular class.
Regular.alias(word)
Parameter | Description |
---|---|
word |
A string (character or word) representing the alias for the Regular class. |
boolean
true if the alias is created, false if the given alias already exists as a global variable names.
Regular.alias('$');
$.addClass('#myDiv', 'foo');
There are some aliases for some of the functions:
Function | Alias for |
---|---|
hasClass | hasClasses |
addClass | addClasses |
removeClass | removeClasses |
toggleClass | toggleClasses |
as | alias |