Notify Better.js: Creating a Dynamic Favicon and Title

by in Tutorials on 11th Sep 2013 · 0 Comment

Have you ever wondered how in God’s name does the Google Calendar web app create a favicon that shows the right date dynamically. Well wonder no more, because today I would like to introduce a jQuery plugin called Notify Better that I built to help web developers create a better notification allowing them to show a notification bubble right on your website’s favicon or on your website’s title with only a few lines of code.

Note: Unfortunately, changing favicon after page load is not supported on Safari and IE. It should work fine on Firefox and Chrome.

Dynamic Favicon and Title with Notify Better.js


Using Notify Better.js to Create a Dynamic Favicon and Title

How-Tos

Let’s begin, first you need to make sure that you’ve included: the latest jQuery plugin available here, and jquery.notify-better.js found here into your document's . In order to allow JS to dynamically change your favicon, you need to assign a unique id to the link tag of your favicon and a hidden container for where you want to display your notification count:

HTML Markup

<link rel="shortcut icon" id="favicon" href="favicon.png">
<div id="notification"></div>

Now, simply call the notify_better function on the hidden container we added before as follows:

JS

$("#notification").notify_better({
  interval: 2000,
  url: "random_count.html", 
  overrideAjax: false,
  updateTitle: false,
  updateFavicon: {
    id: "favicon", 
    backgroundColor: "#f1c40f",
    textColor: "#6D461D",
    location: "full",
      shape: "square"
  },
  done: function() {
    alert("done!")
  }
});

With this call, the script will automatically poll for a notification count at every certain interval and update the container, favicon and/or website’s title with the number received from the AJAX. The reason I decided to add automatic polling is because sometimes, the user may receive new notifications while they are on other browser tabs. With this script, the user will know that there’s a new notification on your website without even switching to your tab. There are several customization available:

  • Interval will allow you to determine the time between each polling. The default value is 5000 milliseconds (5 seconds) which means the script will try to get a notification count update every 5 seconds. Set this to 0 or false to execute the function once on page load.
  • URL will be used by the AJAX call to retrieve the latest notification count. You should have a url that you can call to get the notification count returned as a plain number so the script can update accordingly. (This parameter will be ignored if overrideAjax is on)
  • overrideAjax accepts a function which will let you override the whole predefined AJAX call with your own call allowing you to customise the data returned and how it will be displayed. For more information, check out the Further Customization section below.
  • updateTitle if true, the website’s title will be prepended by the notification count and will be updated automatically. For example, when the script receives a 99 notification count, the title will be updated as follows: (99) Website’s Title.
  • updateFavicon accepts a hash of customization options. Options available are:
    • id lets you define an id of you favicon’s link tag.
    • backgroundColor lets you define the background color of the notification bubble that will be shown in the favicon
    • textColor lets you define the text color of the notification bubble.
    • location lets you set the position where the bubble will appear on the favicon. Options available are full, ne (northeast), nw (northwest), se (southeast), and sw (southwest). The bubble will cover the whole area if the option is set to full.
    • shape lets you define what shape the notification will be. Options are square and circle.
  • Done is a callback function that will be executed after everything is completed. Perfect for when you want the user to know that the polling has been completed.

Clearing Notifications

With all these features, it would be a nightmare if you have to manually remove each one of your notifications individually. If you want to clear all the notifications indicating that the user has read the notification, simply call:

$("#notification").clear();

and your favicon and website title will be reverted back to the original version.

For Further Customization

Sometimes, you may want to handle the AJAX call and the data returned by yourself. With the overrideAjax parameter, you can do just that by calling the notify_better function like this:

$("#notification").notify_better({
  overrideAjax: function() {
    $.ajax({
      url: "count.html",
    }).done(function(data, textStatus, jqXHR) {
      titleclear(); 
      changeFavicon(data)  
      ...
    });
  }
});

Make sure that you call titleclear() and changeFavicon(data) within the done callback of your custom AJAX call if you want the plugin to perform correctly. The titleClear function will clear the website’s title of the previously added notification bubble and changeFavicon(data) function will update the favicon with the number provided (data).

Conclusion

Now you should have a dynamic favicon and website title that automatically updates to reflect the new notification count being received by your website. I hope you enjoy this tutorial and my plugin. Can’t wait to see what you guys can come up with using this.

If you have any questions, feature requests or suggestions, please let me know in the comments below.

Pete is a Bangkok entrepreneur, a UI designer, and a Ruby on Rails developer. He is the founder of Bucketlistly.com and MyColorscreen.com. Other than his businesses, design and development, he also loves astronomy, indie music, and blogging.