Tag Archives: css

JavaScript/CSS/HTML || SlidePanel.js – How To Create An Animated Sidebar Navigation Menu Panel Using Vanilla JavaScript

The following is a module with functions that demonstrates how to create an animated sliding sidebar navigation ‘hamburger’ menu panel using Vanilla JavaScript.

Using Vanilla JavaScript and CSS, by default the menu panel swipes in and out from left to right. The panel can also be opened from right to left, top to bottom, and bottom to top. All of this behavior, as well as its look and feel can be adjusted via CSS.

SlidePanel.js & CSS Source

Contents

1. Basic Usage
2. Navigation SlidePanel Menu HTML
3. SlidePanel.js & CSS Source
4. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates the JavaScript used to setup the sidebar navigation slide panels and menu event listeners.

Calling this function sets up all of the slide panels and buttons on the page.


2. Navigation SlidePanel Menu HTML

The following is the HTML used to setup the sidebar navigation slide panel. The placement of the ‘hamburger’ button, as well as the direction that the sidebar menu opens can easily be adjusted via CSS.

Below is a stripped down simple example demonstrating the basic html used to setup a sidebar panel. In this example, the panel is opened from left to right.

Navigation slide panel menus can also open from right to left, top to bottom, and bottom to top. Check out the end of the page for a full example!


Open Left To Right

The following demonstrates how to open the navigation slide panel menu from right to left.

By default, the menu opens on the left side of the page. Adding ‘right‘ to the class list places the menu on the right side of the page.

Sample Navigation Menu:

Sample


Sample When Opened:

Sample


Open Right To Left

The following demonstrates how to open the navigation slide panel menu from right to left.

By default, the menu opens on the left side of the page. Adding ‘right‘ to the class list places the menu on the right side of the page.


Open Top To Bottom

The following demonstrates how to open the navigation slide panel menu from top to bottom.

By default, the menu opens on the left side of the page. Adding ‘right‘ to the class list places the menu on the right side of the page.


Open Bottom To Top

The following demonstrates how to open the navigation slide panel menu from bottom to top.

By default, the menu opens on the left side of the page. Adding ‘right‘ to the class list places the menu on the right side of the page.


3. SlidePanel.js & CSS Source

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

The following is SlidePanel.css.


4. More Examples

Below are more examples demonstrating the use of ‘SlidePanel.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.

CSS || How To Use Inline SVG Image As Background Image Icon Using CSS

The following is a module which demonstrates how to use Inline SVG image as Data URL background image icon using CSS.


1. Usage

The example below demonstrates the use of the icon CSS class to display an SVG image as an image icon.

Sample:

Sample


2. Icon CSS

The SVG image used in this example is the following:

Make sure to URL encode your entire SVG, and then simply insert the encoded string as the css background-image.

You can use any online converter to URL encode the SVG string.

The following is the Icon css file.


3. More Examples

Below are more examples demonstrating the use of the ‘Icon‘ css. 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.

CSS || How To Zoom & Enlarge An Image On Mouse Hover Using CSS

The following is a module which demonstrates how to zoom and enlarge an image on mouse hover using CSS.


1. Usage

The example below demonstrates the use of the Grow CSS.

Sample:

Sample


Sample


2. Grow CSS

The following is the Grow css file. Include this in your project to start using!


3. More Examples

Below are more examples demonstrating the use of the ‘Grow‘ css. 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.

CSS || How To Create Horizontal Divider Line With Words In The Middle Using CSS

The following is a module which demonstrates how to create a horizontal divider line with words in the middle using CSS.


1. Usage

The example below demonstrates the use of the Divider CSS.

Sample:

Sample


2. Divider Line CSS

The following is the Divider css file. Include this in your project to start using!


3. More Examples

Below are more examples demonstrating the use of the ‘Divider‘ css. 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 || Simple Tic Tac Toe Game With Minimax AI Using Vanilla JavaScript

The following is a module with functions which demonstrates how to create a simple Tic-Tac-Toe game with computer AI using vanilla JavaScript.

This game allows for two or more players, or computer AI vs computer AI. The first player to match 3 pieces horizontally, vertically and diagonally in a row wins!


1. Features

This game allows for two or more players. To add more players, click the “add new” button under the “players” list. To edit a player, click the “edit” button next to a players name.

• Adding and editing a player allows you to change:


1. Name
2. Avatar image url
3. CPU player & difficulty

• To remove a player, click the “remove” button next to the players name.

• A “save game” button allows to save the progress of the game. A file is generated, which consists of the state of the game. This file can be used to reload the game, using the “load game” button.

• Match history is saved, and lets you see the game stats from the previous completed games.

• Player AI uses the minimax algorithm. It has 4 levels of difficulty:


1. Easy
2. Normal
3. Hard
4. Impossible - You will not win!


2. Screenshots

New Game

Initial

End Of Game

Game Over

Match History

Match History

Update Player

Update Player

Add New Player

Add New Player


Add New Player

CPU vs CPU

CPU vs CPU


3. Download & Play

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 || Notice.js – Simple Notification Message With Success, Warning & Error Icons Using Vanilla JavaScript

The following is a module with functions that demonstrates how to display a simple notification message with success, warning & error icons.

Using vanilla JavaScript, the message fades in and is displayed to the page, and fades out after a delay (in milliseconds). It’s look and feel can also be adjusted via CSS.

Notice.js & CSS Source

Contents

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

1. Basic Usage

Syntax is very straightforward. The following demonstrates the JavaScript used to show the notification message. The message fades away after a specified amount of time (in milliseconds).

Sample:

Sample


2. Notice HTML

If you wish to show the messages without using JavaScript, the following is an example of the HTML used to display the notices.

Sample:

Sample

Sample:

Sample

Sample:

Sample


3. Notice.js & CSS Source

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

The following is Notice.css.


4. More Examples

Below are more examples demonstrating the use of ‘Notice.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 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 examples 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/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.