iOS Style Notification Badge Plugin - iOSBadge

iOSBadge is a simple jQuery & Vanilla JavaScript plugin that adds an iOS style, fully customizable notification badge to an element.

This plugin has been created because there are many instances where a site will have a number of unread items, whether it be emails or forum posts. On iOS devices such as the iPhone and iPad, there is a notification badge that displays how many items the user has. The idea of this plugin was to replicate something similar within web pages.

How to use it:

1. Load the iOSBadge plugin's files.

<link rel="stylesheet" href="/path/to/dist/iosbadge.min.css" />
<script src="/path/to/dist/iosbadge.min.js"></script>
<!-- jQuery Is OPTIONAL -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. Add a default notification badge to the element you specify. Note that the target element must be relatively positioned.

<div id="demo" class="app">
  ...
</div>

.app {
  position: relative;
  /* your own styles here */
}

// Vanilla JS
var icon = document.getElementById('demo');
var badge = new IOSBadge(icon, {
    // options here
});

// OR jQuery
$("#app").iosbadge({ 
  // options here
});

3. Customize the notification badge:

{

  // number of notifications
  content: 1,

  // 20, 22, 24, 26, 28, 30, 32, 34, and 36
  size: 20,

  // 'red', 'blue', 'green', 'grey',and 'ios'
  theme: 'red',

  // 'top-left', 'top-right', 'bottom-left' or 'bottom-right'
  position: 'top-right',

  // namespace
  namespace: 'iosb',

}

4. Available API methods which allow you to control the notification badge programmatically.

// set the number of notifications
badge.setContent(number);

// get the number of notifications
badge.getContent();

// set the position of the badge
badge.setPosition(position);

// set the theme of the badge
badge.setTheme(theme);

// set the size of the badge
badge.setSize(size);

// increase & decrease
badge.decreaseBy(number);
badge.increaseBy(number);

// show & hide the bage
badge.show(number);
badge.hide(number);

5. Note that most of those methods are chainable.

badge
  .setContent(5)
  .increaseBy(3)
  .show();

---

This awesome jQuery plugin is developed by kristerkari. For more Advanced Usages, please check the demo page or visit the official website.