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

Category: Javascript | May 25, 2021
Author: Mulaza
Views Total: 47 views
Official Page: Go to website
Last Update: May 25, 2021
License: MIT

Preview:

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

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:

05/25/2021

  • Update

05/12/2021

  • JS & CSS updated

You Might Be Interested In:


Leave a Reply