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

Views Total:0 views
Official Page:Go to website
Last Update:May 5, 2021


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


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=”dist/css/style.css” />
<script src=”dist/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>

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">

4. Customize the background color.

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

Source link

Add comment


All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.