TinyPop
TinyPop is a lightweight JavaScript for displaying Growl like notifications. It is truly tiny (around 2KB for JS+CSS minified) and can be extended/customized easily. Notifications can be Positioned at the 4 edges of the screen and can be configured individually. Multiple popups are supported, and at different positions in the screen.
Demo DownloadInstructions:
To use TinyPop, all you need to do is include the following lines in the head section of your HTML page:
<script type="text/javascript" src="tinypop.min.js"></script> <link rel="stylesheet" type="text/css" href="tinypop.min.css" />
Now just call the TINYPOP.show function with the right parameters. The parameters are:
1) Message - This is the message you want to display, enclosed within quotes
2) Options - The options object to customize your popup.
Options:
- position - Where should the notification be displayed? Currently the supported values are bottom-left, bottom-right, top-left, top-right (all enclosed in quotes)
- timeout - How long should the notification be displayed before it is removed? Values must be in millisecond. So if you want it to be displayed for 3 seconds, you would set the value as 3000 (no quotes!). Default timeout value is 1.5 seconds
- sticky - Should the notification not close automatically after the timeout? Values: true, false (no quotes!)
Below is the code for the examples on the demo page:
TINYPOP.show('This is a default popup!') - Default
TINYPOP.show('This should be shown for 5 seconds!',{timeout:5000}); - Show for 5 seconds
TINYPOP.show('This should not disappear and should be at the top right!',{sticky: true, position: 'top-right'});" - Sticky Notification at top right
Note: The options MUST be passed as a JS object! You can also initialize an object first and then send it, like so
var options = {
position: 'top-right',
timeout: 3000,
sticky: false
};
TINYPOP.show("This is my message", options);
Compatibility:
Tested on the following browsers/OS and works without issues:
Windows: Firefox 3.6, IE 8, Chrome
Linux: Firefox 3.6
Mac: Safari 5, Firefox 3.6, Chrome
It should work on IE 7, and 3+ version of Firefox and 4+ version of Chrome. IE 6 is not supported and never will be! If it works, good for you!
Comments, suggestions, and general feedback welcome.
October 18th, 2010 - 06:42
This is a really nice script. You may like to consider to include other positions:
vicinity – pop-up near the anchor
center – pop-up at the center of the screen, ability to set opacity of the background screen
October 20th, 2010 - 14:06
Thanks for your feedback! I will make sure those options are integrated in the next release
May 19th, 2011 - 14:43
Wooh super cool. I was searching for this simple thing and finally TinyPop solves it. I am porting it to Asp.net Ajax will send you the script once done. thanks a loads man
September 2nd, 2011 - 22:45
It works like a charm, but only when TINYPOP.show is run in the BODY tag, unfortunately. I wanted to add the code in a JS file but it would not work…