Monthly Archives: June 2020

JavaScript || Sort.by.js – Simple Array Sorting With Multiple Sorting Conditions Using Vanilla JavaScript


The following is a module that handles complex array sorting. Much like the SQL/LINQ ‘Order By’ operation, this module allows sorting capabilities with multiple sorting conditions for arrays of any type.

Sort.by.js Source

Contents

1. Usage
2. Sorting Condition
3. Comparison
4. Null Values
5. Filtering & Selecting Items
6. Sort.by.js Namespace
7. Notes
8. More Examples


1. Usage

Syntax is very straightforward. The following demonstrates sorting a simple array:

To sort a simple array in descending order, it can be done like so:

In the example above, the second parameter of the ‘Sort.by‘ function defines the sorting condition by which the array should be sorted.



2. Sorting Condition

A sorting condition defines how the array should be sorted. It is made up of 3 properties.

The ‘value‘ property is a function which defines how the value for the sorting condition should be determined. The ‘desc‘ property is a boolean, which defines the sorting direction of the sorting condition. The ‘compare‘ property is a function, which overrides the default compare function for the sorting condition.

More than one sorting condition can be used. The array is sorted in the order in which the conditions were specified (FIFO).

The following example sorts an object array with multiple sorting conditions. In this example, the array is first sorted by the full name length in descending order, followed by the id field sorted in ascending order.



3. Comparison

Overriding the default comparison function is optional. But, when it is used, it takes precedence over the ‘desc’ property. That is because when supplying the custom comparison function, that ultimately defines the sorting direction and behavior.

The following example demonstrates the use of the comparison function to sort a mixed array.



4. Null Array Values

The default comparison function automatically handles null values by placing them at the end of the array, regardless of the sorting direction. This behavior can be overridden by supplying your own user defined comparison function.

The following example demonstrates sorting an array with null values.

In the example below, the default comparison function is overridden, but null values are un-handled. This leaves it up to the user to define it’s behavior.



5. Filtering & Selecting Items

Filtering and selecting result items can be achieved by using either the Array.filter() and Array.map() technique, or by using Array.reduce().

The example below demonstrates this. It first sorts an object array with multiple conditions. The array is sorted by score DESC, time ASC, and age ASC. It then filters the result array by a certain score, and returns a new list which contains only the score, time, and age properties.

It should be noted that using the Array.filter() and Array.map() technique iterates the array twice. This same effect can be achieved by using Array.reduce(), which only iterates the array once, thus being more efficient.



6. Sort.by.js Namespace

The following is the Sort.by.js Namespace. Include this in your project to start using!



7. Notes

This module uses the Array.sort() function to handle array sorting. But instead of altering the original array, it returns a newly sorted array. Internally, a separate ‘sortable’ array is created, which contains only the values to be sorted. This is done to reduce overhead in the .sort().compare() function, so item values are only computed once, as opposed to possibly multiple times for each comparison. So instead of sorting the original array, the lightweight ‘sortable’ array is sorted instead. Once array sorting is complete, the newly sorted ‘sortable’ array is used to reorder the original array, and that result is returned.



8. More Examples

Below are more examples demonstrating the Sort.by use for sorting arrays. Don’t forget to include the module when running the examples!


QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript/CSS/HTML || sliderRadioButton.js – Simple Animated Slider Radio Button Using Vanilla JavaScript

Radio buttons let a user select only one of a limited number of choices. Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.

Using JavaScript, the following is sample code which demonstrates how to display a simple animated slider radio button group to the page.

This animated slider radio button comes with a few basic features. When a selection is chosen, a sliding animation appears. The speed of the animation can be modified via CSS transitions. The look and orientation can also be modified via CSS, with the button group direction being either vertical or horizontal.

sliderRadioButton.js & CSS Source

Contents

1. Basic Usage
2. Slider HTML - Default
3. Slider HTML - Column
4. sliderRadioButton.js & CSS Source
5. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates the JavaScript used to setup the radio buttons decorated with the ‘slider’ CSS class.


2. Slider HTML – Default

The following is an example of the HTML used to display the slider. By default, the options are displayed inline.

Sample:

Sample


3. Slider HTML – Column

The following is an example of the HTML used to display the slider as a column.

Sample:

Sample


4. sliderRadioButton.js & CSS Source

The following is the sliderRadioButton.js Namespace & CSS Source. Include this in your project to start using!

The following is sliderRadioButton.css.


5. More Examples

Below are more examples demonstrating the use of ‘sliderRadioButton.js‘. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript/CSS/HTML || Collapsible.js – Simple Collapsible Accordion Panel Using Vanilla JavaScript

Accordion panels are a vertical stack of items. Each item can be “expanded” or “collapsed” to reveal the content associated with that item. There can be zero expanded items, or more than one item expanded at a time, depending on the configuration.

Using JavaScript, the following is sample code which demonstrates how to display a simple collapsible accordion panel to the page.

This panel comes with a few basic features. Using data attributes, you can adjust the slide up and slide down speed, as well as the initial collapsed status. You can also specify either the entire row as selectable, or just the button.

Collapsible.js & CSS Source

Contents

1. Basic Usage
2. Collapsible HTML
3. Collapsible.js & CSS Source
4. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates the JavaScript used to setup the elements decorated with the ‘collapsible‘ CSS class.


2. Collapsible HTML

The following is an example of the HTML used to display the collapsible.

To make the entire row clickable, only add the ‘collapsible‘ class to the ‘collapsible-header‘ element. To make just the button clickable, only add the ‘collapsible‘ class to the ‘collapsible-button‘ element

Sample:

Sample


3. Collapsible.js & CSS Source

The following is the Collapsible.js Namespace & CSS Source. Include this in your project to start using!

The following is Collapsible.css.


4. More Examples

Below are more examples demonstrating the use of ‘Collapsible.js‘. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

jQuery/CSS/HTML || Simple Progress Bar

The following is sample code which demonstrates how to create a progress bar. Using jQuery, the progress bar is animated to simulate download progress.

REQUIRED KNOWLEDGE


JavaScript - setInterval

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

jQuery/CSS/HTML || Simple Collapsible Accordion Panel

Accordion panels are a vertical stack of items. Each item can be “expanded” or “collapsed” to reveal the content associated with that item. There can be zero expanded items, or more than one item expanded at a time, depending on the configuration.

Using jQuery, the following is sample code which demonstrates how to display a simple collapsible accordion panel to the page.

This panel comes with a few basic features. Using data attributes, you can adjust the slide up and slide down speed, as well as the initial collapsed status. You can also specify either the entire row as selectable, or just the button.

REQUIRED KNOWLEDGE


jQuery - closest
jQuery - next
jQuery - find
JavaScript - stopPropagation
JavaScript - Events
Accordion Panel - What is it?

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

jQuery/CSS/HTML || Simple Notification Message Div With Success, Warning & Error Icons

Using jQuery, the following is sample code which demonstrates how to display a simple notification message div with success, warning & error icons. The message is displayed to the page on a delay, and disappears after the delay completes.

REQUIRED KNOWLEDGE


jQuery - fadeIn
jQuery - fadeOut
JavaScript - setTimeout
JavaScript - Object.freeze
Base64 Image - What is it?

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.