I Am Bot

Srinath on Web development, technology and other titbits

TinyPop

Update: A completely rewritten version of Tinypop is now available! For more detail, see the github project here

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.

[download type=”demo” url=”http://iambot.net/demo/tinypop/”]Demo[/download]

[download type=”download” url=”http://iambot.net/dScript/download.php?fname=./tinypop.zip”]Download[/download]

Instructions:

To use TinyPop, all you need to do is include the following lines in the head section of your HTML page: [sourcecode language=”html”] <script type="text/javascript" src="tinypop.min.js"></script> <link rel="stylesheet" type="text/css" href="tinypop.min.css" /> [/sourcecode]

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:

[sourcecode language=”html”] 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 [/sourcecode]

Note: The options MUST be passed as a JS object! You can also initialize an object first and then send it, like so

[sourcecode language=”html”] var options = {

    position: 'top-right',
    timeout: 3000,
    sticky: false

}; TINYPOP.show("This is my message", options); [/sourcecode]

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.

Comments