• Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

Code Geekz

    • Most Popular

      All time

    • 30 Best Tools for Data Visualization

      37 Comments

    • Best PHP Frameworks for Developers

      33 Comments

    • Latest Stories

      What is new?

    • Building Product Teams That Scale: The Case for Remote .NET Developers

      May 21, 2025

    • Choosing a WooCommerce Theme? Here’s What Most Store Owners Get Wrong

      May 9, 2025

    • Comments

      Most Recent

    • B. Frances on:

      Best WordPress Wedding Themes

    • Ultimate Content Locker Pro on:

      Best WordPress Social Content Locker Plugins for 2017

  • Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

How to Easily Implement a Browser Title Notification with TitleNotifier.js

0
  • by Rafael Oshiro
  • In DEVELOPMENT · Javascript · RESOURCES · TUTORIALS
  • — 24 Apr, 2014

If you have worked on any kind of social network before you have probably faced the need to notify your users about new unread messages or alerts. Given the importance of that feature, I’ll explain in this article how you can easily implement a browser title notifier and you’ll be able to use it in your next project.

A common way to tell users they have new notifications is by changing the website title with the number of unread messages they have. And this is what TitleNotifier does easily for you.

What is TitleNotifier.js?

TitleNotifier

TitleNotifier is a lightweight, dependency-free library to handle browser title notification. It weights around 2kb and can be included in any WebApp because it has no dependency with other libraries. The idea to build this library was to prevent anybody that needs to implement this feature to not worry about the implementation logic and save their time to build other things.

Getting Started

It couldn’t be easier to get started with TitleNotifier, in 3 basic steps you can have it up and running in your website. Follow the steps below:

1. Go to the project website, download it and unpack it.

2. Include the title_notifier.js file in your page, before the </body> tag:

3. That’s it, now you just call the functions you need:

To add notifications:

 This will add +1 to the total notifications
titlenotifier.add();</code></strong>

Optionally you can pass in the number you want to add to the existing notifications.

 This will add 3 to the current number of notifications you have.
titlenotifier.add(3);

To set a specific number of notifications:

 This will set the number of notifications to 13.
titlenotifier.set(13);

To subtract from the total notifications:

 This will subtract -1 to the total notifications.
titlenotifier.sub();

Optionally you can pass in the number you want to subtract from the total:

titlenotifier.sub(2);

Benefits and Conclusion

TitleNotifier has a very simple and intuitive API as you could see above and provides a nice user experience. Do you have questions or comments about this library? Please leave a comment below.

If you feel like contributing to this project to make it better or even suggest changes or bug fixes, go to the project page and log an issue, fork the project or simply download it and use the way to prefer.

Share

Tags: browser title notificationjavascriptopen sourcetitlenotifier

— Rafael Oshiro

Rafael is a Front-End Developer working primarily with Javascript and Ruby on Rails. He also blogs at frontendjourna.com. You can find him on Twitter @roshiro.

  • Previous story An Intro to Scalable Vector Graphics (SVG)
  • Next story 20 jQuery Drag and Drop Plugins

You may also like...

  • Fresh Resources for Developers and Designers – May 2017
  • 12 Best Ruby Frameworks for Accelerated Development
  • Best Google Pixel 3 Fast Chargers in 2020
  • improving your coding skills 10 Proven Things You Can do for Improving your Coding Skills

Enter your em@il & get our posts delivered.





  • Enter your em@il & get our posts delivered.

  • Codegeekz
    • Home
    • DEVELOPMENT
    • How to Easily Implement a Browser Title Notification with TitleNotifier.js
    • Home
    • WORDPRESS
      • PLUGINS
      • PHP
      • Themes
      • DEVELOPMENT
        • Javascript
        • JQuery
        • Mootools
    • WEB DESIGN
      • DESIGN
      • CSS
      • HTML
    • TYPOGRAPHY
      • FONTS
    • RESOURCES
      • TUTORIALS
      • THEMES
      • SLIDERS
      • TECHNOLOGY
    • ARCHIVES
    • CONTACT
    • Advertise

    CODEGEEKZ.COM