Twitter Style jQuery Toaster

January 31, 2011

I was working on a project where I needed to display a confirmation alert to the user. I'm tired of the inline div's and facebox dialogs but was having a difficult time finding an alternative. Then I remembered I really liked the way Twitter confirmed changes to the user profile so I thought I would make my own version that I can use in my asp.net mvc apps."

I was working on a project where I needed to display a confirmation alert to the user. I’m tired of the inline div’s and facebox dialogs but was having a difficult time finding an alternative. Then I remembered I really liked the way Twitter confirmed changes to the user profile so I thought I would make my own version that I can use in my asp.net mvc apps.

I started messing around with a sliding div that would allow me to pop messages onto the page but in a subtle way. My first implementation was simple. I added a function to my main javascript file that I could call from anywhere within my app.

My buddy (err boss) Barry thought it would be clever to pop this when we detected ajax errors.

As I was adding cool effects I thought that I should blog about what I was doing because it was fun. Then I thought, why not turn this into a jQuery plugin that others could use and or extend?

So i did!

jQuery Toaster - a Twitter-like slide-down notifier.

You can download it from the jQuery plugin site.

The source-code is up on GitHub if you are interested.

Here are some live working examples if you want to see it in action.

Check it out and if you have any comments about jQuery Toaster, you can post it to Google Groups, or the GitHub issues page.