I ran into this recently and I though I would share it with you. This animation is made possible by the use of JQuery and CSS. I’m quite impressed at what they were able to do. It is relatively easy if you compare to earlier Javascript techniques.

S.

Here’s a quick step by step tutorial to create a Twitter style Flash message using css and javascript.

The CSS
I’m using the blueprint css which can be found here

.notification
{
    text-align: center;
    display: none;
    width: 100%;
    position: fixed;
    padding-top: 8px;
    padding-bottom: 8px;
    margin: 0;
    font-weight: bold;
    font-size: 1.2em;
    overflow: visible;
}

Add the following html somewhere before the Body closing tag.

<div id="notification" class="notification">
	<span id="notification-text"></span>
</div>

And the javascript:
As you can probably tell we are using the JQuery library. We wanted the flash message to show up for a decent amount of time after witch it would go away. Luckily JQuery has the fadeIn and fadeOut animation methods. To make it more JQuery like we added a callback function. This callback will be invoked once the Flashmessage has completed it’s fadeOut.

//Provide a variable to hold the callback function
var notifyCallBack;

function showNotification(message, type, callback) {

    notifyCallBack = callback;

    var notification = $("#notification");
    notification.removeClass("success notice error");
    notification.addClass(type);

    //Make sure it's visible even when top of the page not visible
    notification.css("top", $(window).scrollTop());
    notification.css("width", $(document).width());

    $("#notification-text").html(message);

    //show the notification
    notification.slideDown("slow", function() {
        setTimeout(hideNotification,
            4000 // 4 seconds
            )
    });
}

function hideNotification() {
    $("#notification").slideUp("slow", function() {
        if (null != notifyCallBack && (typeof notifyCallBack == "function")) {
            notifyCallBack();
        }
        //reset the callback variable
        notifyCallBack = null
    });
}

Here’s a typical scenario where the showNotification would be usefull

$(form).ajaxSubmit({
		success: function(data) {
			if (true == data.isSuccessful){
				showNotification(data.FlashMessage, "success", function(){
					//do something
				});
			}
			else{
				showNotification(data.ErrorMessage, "error", function(){
					//display errors
				});
			}
		},
		dataType: "json"
	});

Some history,

As developers we’ve all built data-driven applications. Using any flavor of MSSql, MySQL, Oracle, Postgress etc… we’ve written queries and stored procedures. Spent many hours trying to come up with the right database schema. We’ve written countless data access layers and mapping code.

Does this line of code ring a bell.

person.FirstName = dr.GetString(dr.GetOrdinal("FIRST_NAME"));

We’d often have to revise the schema for new requirements and as a result rewrite our DAL.

It was a cycle.

We wrote some useful utility classes that we could use repeatedly and enhance them by using a configuration based data-mapping approach. In the last 5 years we’ve seen the development of ORMs (Object-Relational Mapping) reduce some of the time we took to impedance match our objects and logic to the database schema.

Early ORM’s:

• Strongly Typed Dataset – Microsoft
• The highly touted Hybernate – ported to .Net
• Rob Conery’s Subsonic

Plus a few commercial ones that haven’t really caught traction (IMO)

The cycle got shorter.

More recently, with the advent of LINQ, we’ve seen new versions of these ORM’s come to life. Subsonic 3 includes LINQ querying as well as Microsoft’s dying LINQ to SQL and the new favorite kid on the block the Entity Framework.

The cycle just got shorter again.

Now comes NoSQL!

From wikipedia:

NoSQL is an umbrella term for a loosely defined class of non-relational data stores that break with a long history of relational databases and ACID guarantees. Data stores that fall under this term may not require fixed table schemas, and usually avoid join operations. The term was first popularised in early 2009.

Early 2009 seems close but for a programmer it can seem like an eternity (almost a quote). Within a few months the NoSQL movement has gathered lots of momentum. A quick search on twitter for #mongodb,  #couchdb or #db4o will turn up some discussions about the newish trend.

The NoSQL movement is still quite young but I believe we’ll see a big shift within the next five years. I have only skimmed the surface.

In future posts I’ll try and dive deeper in the world of NoSQL and provide some sample code and findings.