Monthly Archives: September 2020

JavaScript/CSS/HTML || Modal.js – Simple Modal Dialog Prompt Using Vanilla JavaScript

The following is a module which allows for a simple modal popup dialog panel in vanilla JavaScript. This module allows for custom Yes/No prompts.

Options include allowing the modal to be dragged, resized, and closed on outer area click. Modal drag and resize supports touch (mobile) input.

Modal.js & CSS Source

Contents

1. Basic Usage
2. Available Options
3. Alert Dialog
4. Yes/No Dialog
5. Custom Buttons
6. Dialog Instance
7. Modal.js & CSS Source
8. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates adding a simple dialog to the page.


Sample:

Sample

The following example demonstrates how to add click events to the default dialog buttons. The ordering of the buttons on initialization defines its placement on the dialog.


2. Available Options

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

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


3. Alert Dialog

The following example demonstrates an alert dialog.


Sample:

Sample


4. Yes/No Dialog

The following example demonstrates a yes/no dialog.


Sample:

Sample


5. Custom Buttons

The following example demonstrates multiple custom buttons.


Sample:

Sample


6. Dialog Instance

The following example demonstrates how to use the dialog instance to show and hide when needed.


7. Modal.js & CSS Source

Modal.js & CSS Source


8. More Examples

Below are more example demonstrating the use of ‘Modal.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 || How To Get The Minimum & Maximum Values In A Simple & Object Array

The following is a module with functions which demonstrates how to get the minimum and maximum values in a simple and object array.

The functions on this page allows for an optional selector function as a parameter, which makes them general enough to work on arrays of any type.


1. Simple Array

The example below demonstrates the use of ‘Utils.arrayMin‘ and ‘Utils.arrayMax‘ to get the minimum and maximum values from a simple array.


2. Object Array

The example below demonstrates the use of ‘Utils.arrayMin‘ and ‘Utils.arrayMax‘ to get the minimum and maximum values from an object array.

In this example, a selector is used, which extracts the value to be used in the evaluation.


3. Mixed Array

The example below demonstrates the use of ‘Utils.arrayMin‘ and ‘Utils.arrayMax‘ to get the minimum and maximum values from a mixed array.

In this example, a selector is used, which extracts the value to be used in the evaluation.


4. 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/CSS/HTML || Placeholder.js – Simple Animated Floating Label For Textbox, Dropdown & Textarea Using Vanilla JavaScript

The following is a module which allows for a simple animated floating placeholder label for textbox, dropdown & textarea using vanilla javascript.

No special HTML markup is required.

Placeholder.js & CSS Source

Contents

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

1. Basic Usage

Syntax is very straightforward. The following demonstrates adding and removing floating placeholders to elements.

Placeholder.float‘ and ‘Placeholder.remove‘ accepts either a string selector or one or more Javascript elements.


2. Placeholder HTML

The following is sample HTML used for the floating placeholder label. No special HTML markup is required. Simply supply an element with a ‘placeholder‘ attribute, and you’re all set!

Sample – Blank:

Sample

Sample – Filled:

Sample


3. Placeholder.js & CSS Source

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

The following is Placeholder.css.


4. More Examples

Below are more example demonstrating the use of ‘Placeholder.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 || Modal.js – Simple Modal Popup Panel Using Vanilla JavaScript

The following is a module which allows for a simple modal popup panel in vanilla JavaScript. Options include allowing the modal to be dragged, resized, and closed on outer area click.

Modal drag and resize supports touch (mobile) input.

Modal.js & CSS Source

Contents

1. Basic Usage
2. Modal HTML
3. Initialize Modal Options
4. Modal Dialog
5. Modal.js & CSS Source
6. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates showing and hiding a modal popup.

Modal.show‘ and ‘Modal.hide‘ accepts either a string selector or a Javascript element.


2. Modal HTML

The following is the HTML used to display the modal. The attributes supplied to the ‘modal’ element specifies whether it is allowed to be dragged, resized, or closed on outer area click.

Sample:

Sample


3. Initialize Modal Options

In order for the options on the modal to take effect, it needs to be initialized.

The following example demonstrates initializing the modal popup options.

Note: ‘Modal.init‘ only needs to be called once. It will initialize all modals on the page.


4. Modal Dialog

The following demonstrates adding a simple dialog to the page.

For more options, click here!


Sample:

Sample


5. Modal.js & CSS Source

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

The following is Modal.css.