Monthly Archives: August 2020

JavaScript || How To Make Change – Display The Total Sales Amount In Dollars & Cents Using Modulus

The following is a module with functions which demonstrates the use of the modulus (%) operator to make change.

So for example, given the value of 2.34, this function would return the result of 2 dollars, 1 quarters, 1 nickels, and 4 pennies.


1. Make Change

The example below demonstrates how to make change.


2. Utils Namespace

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

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 || Swap Two HTML Element Locations In Dom Tree Using Vanilla JavaScript

The following is a module with functions that demonstrates a simple way how to swap two HTML element locations in the Dom tree using JavaScript.

This method retains any existing event listeners.


1. Swap Element Locations

The example below demonstrates how to swap two HTML element locations.


2. Utils Namespace

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

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 || Check If An Element Comes Before Or After Another Element In Dom Tree Using Vanilla JavaScript

The following is a module with functions that demonstrates a simple way how to check if an element comes before or after another element in the Dom tree using JavaScript.


1. Check If Before / After

The example below demonstrates how to check if an element is before or after another element.


2. Refined Search

The example below demonstrates how to check if an element is before or after another element by refining the search by a specific container.


3. Utils Namespace

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

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 || Round A Number Up / Down To The Nearest Multiple Of A Number

The following is a module with functions that demonstrates how to round up / down to the nearest multiple of a number.

If a number is already a multiple, there is a parameter that allows you to specify if it should be rounded or not.


1. Get Next Multiple – Include Existing

The example below demonstrates how to round up a number to the next multiple. In this example, if a number is already a multiple, it will not be rounded up to the next multiple.


2. Get Next Multiple – Skip Existing

The example below demonstrates how to round up a number to the next multiple. In this example, if a number is already a multiple, it will be rounded up to the next multiple.


3. Get Previous Multiple – Include Existing

The example below demonstrates how to round down a number to the previous multiple. In this example, if a number is already a multiple, it will not be rounded down to the previous multiple.


4. Get Previous Multiple – Skip Existing

The example below demonstrates how to round down a number to the previous multiple. In this example, if a number is already a multiple, it will be rounded down to the previous multiple.


5. Utils Namespace

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

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 || How To Scroll To An Element & Add Automatic Anchor Scroll Using Vanilla JavaScript

The following is a module with functions that demonstrates how to scroll to a specific HTML element, as well as setting anchors to have a smooth scroll effect on button click.


1. Scroll To Element

The example below demonstrates how to scroll to a specific element.

The ‘Utils.scrollToElement‘ function accepts either a JavaScript element or a string selector of the element to scroll to.


2. Add Scroll To Anchor Target

The example below demonstrates how to automatically add a scrolling effect to an anchor target.

The ‘Utils.registerAnchorScroll‘ function gets all the anchor links on a page and registers smooth scrolling on button click using ‘Utils.scrollToElement‘.


3. Utils Namespace

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


4. More Examples

Below are more example demonstrating the use of ‘Utils.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 || TablePagination.js – Simple Add Pagination To Any Table Using Vanilla JavaScript

The following is a module which allows for simple yet fully customizable table pagination in vanilla JavaScript.

With multiple options, as well as multiple callback functions to modify the pagination buttons and information text, almost all the ways you can think of pagination is supported by this module. It’s look and feel can also be adjusted via CSS.

TablePagination.js & CSS Source

Contents

1. Basic Usage
2. Available Options
3. Only Show Page Numbers
4. Mini - Only Show Arrow Buttons
5. Show All Pages
6. Only Show Go Input
7. Format Navigation Text
8. Button Click Event
9. Navigation Position
10. Specify Initial Page
11. Navigation Binding Area
12. Remove Pagination
13. TablePagination.js & CSS Source
14. More Examples


1. Basic Usage

Syntax is very straightforward. The following demonstrates adding pagination to a table.

Calling ‘TablePagination.page‘ with no options will add pagination with all of the default options applied to it. It accepts one or more HTMLTableElement.


Sample:

Sample



2. Available Options

The options supplied to the ‘TablePagination.page‘ function is an object that is made up of the following properties.

Supplying different options to ‘TablePagination.page‘ can change its appearance. The following examples below demonstrate this.



3. Only Show Page Numbers

The following example demonstrates pagination with only page numbers.


Sample:

Sample



4. Mini – Only Show Arrow Buttons

The following example demonstrates pagination with only arrow buttons.


Sample:

Sample



5. Show All Pages

The following example demonstrates pagination showing all page numbers.


Sample:

Sample



6. Only Show Go Input

The following example demonstrates pagination with only showing the “Go” user input option.


Sample:

Sample



7. Format Navigation Text

The following example demonstrates pagination formatting the navigation text. This allows to alter the navigation text without having to modify the pagination code!


Sample:

Sample



8. Button Click Event

The following example demonstrates pagination with the button click callback. This allows you to do something on button click


Sample:

Sample



9. Navigation Position

The following example demonstrates formatting the navigation position. The position options can be on top, or bottom. Bottom is the default position.


Sample:

Sample



10. Specify Initial Page

The following example demonstrates pagination setting the initial default page.


Sample:

Sample



11. Navigation Binding Area

By default, the navigation controls are placed either above or below the table element, depending on the ‘navigationPosition’ value. You can override this placement by specifying the container where the controls should be bound to.

The following example demonstrates specifying the element where the controls are bound to.


Sample:

Sample



12. Remove Pagination

The following example demonstrates how to remove pagination from a table.

TablePagination.remove‘ will remove pagination. It accepts one or more HTMLTableElement.



13. TablePagination.js & CSS Source

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