Facebook’s new beeper alert notification system looks so handy.
I believe that this is the most effective way of notifying anything live like a friends update or a friends request or when someone comes online.
In this tutorial we are going to learn how to create such a update notification plugin, which facebook developers call it as a beeper.
The Basic Setup
2. Include the notification CSS into your document
<link rel="stylesheet" type="text/css" href="style.css" />
3. Create a div to display the notification message and name it “tips”
- In Facebook Whenever there is a update entry in the updates table, it triggers the alert notification plugin using jQuery. In our case we will trigger it manually.
- Automatically hides the facebook beeper after five seconds.
- Onmouseover, the script prevents the hiding of facebook beeper.
- Again after 5 seconds of mouseout, the facebook beeper hides automatically.
- There is a close button at the top-right corner to close a particular facebook beeper.
- It almost simulates the facebook beeper (Update notification system).