Mobile App Style Badge Notification Count – Unread-Messages.js

Preview:

Description:

Unread-Messages.js is a tiny JavaScript library that helps you create floating notification badges with unread messages count just like the app icon badge you see on iOS or Android.

How to use it:

1. Import the following JavaScript and CSS files into the document.

<link rel="stylesheet" href="src/css/style.css" />
<script src="src/js/main.js"></script>

2. Determine the number of unread messages in the data-val attribute:

<div class="notification-container" data-val="99">
  <div>My App</div>
</div>

3. Specify the position of the badge:

• top
• top-right
• top-left
• bottom
• bottom-right
• bottom-left

<div class="notification-container btn" data-val="1234567" data-pos="bottom-left">
  <div>App</div>
</div>

4. Customize the background color.

<div class="notification-container btn" data-val="5" data-color="black">
  <div>App</div>
</div>

5. Determine whether to hide the badge after click.

<div class="notification-container btn" data-val="5" data-select-hide="false">
  <div>App</div>
</div>

Changelog:

07/10/2021

• v1.0.4

07/08/2021

• v1.0.3

07/04/2021

• v1.0.2

05/25/2021

• Update

05/12/2021

• JS & CSS updated