Create a notification popup with a specific animation in mind.. possible?

Question

Hey guys, how would I go about making the following animation for my form submissions? I figured instead of typing it, I would create a visual.. Let me know if you think this is easily done.

Answer 1

I would use jQuery. Here's the steps I would take to approach this:

1. Code the basic HTML to get started including the necessary <form> and <input> fields.
2. Create an empty div for the item saved notification. <div id="item_saved">Item Saved!</div> and have the default styling be display:none.
3. Add JavaScript to do form verification to make sure the inputs have what you're expecting.
4. In the form save code, I expect you'll be using Ajax. In the success callback, call a function which makes changes to #item_saved. Initially, change visibility of the element and apply a class which gives it the initial position in your second image.
5. Use the jQuery animate function. You'll want to have it change the position and the dimensions. jQuery UI extends the animate function to provide additional capabilities: look at the animate demos.

Update: Edited to provide additional information and more directly address the question.

Answer 2

I've thrown together a proof of concept for you, using jsFiddle:

http://jsfiddle.net/kAhXd/1/ (animation now resets, click the submit button)

You'll need to take a good look at the CSS, but the important thing to note is the <form> element's position is set to relative, and the message element's position is set to absolute. This is to ensure that the message element's position is always relative to the form element.

HTML

<form><div id="message"></div>
    <input> Label 1<br/><br/>
    <input> Label 2<br/><br>
    <textarea>Larger text area</textarea><br/><br/>
    <textarea>And another</textarea><br/><br/>
    <button type="button">Submit</button>
</form>​

CSS

form { position:relative; width:500px; }
#message { 
    position:absolute;
    display:none;
    height:100px;
    width:200px;
    border: 1px gray solid;
    background-color:lime;
    font-size: 1.4em;
    line-height:100px;
    text-align:center;
    left: 150px;
    bottom:100px; 
    border-radius: 5px;
}    ​

JavaScript

$("button").click(function () {
    var msg = $("#message");
    msg[0].style.cssText = "";
    msg.text("Item saved!");
    msg.fadeIn('slow').animate({
        "bottom": "3px",
        "height": "17px",
        "font-size": "1em",
        "left": "80px",
        "line-height": "17px",
        "width": "100px"
    });
});​

Answer 3

Here's Andy's idea refined with horizontal centering.

HTML:

<form><div id="message"></div>
   <input> Label 1<br/><br/>
   <input> Label 2<br/><br>
   <textarea>Larger text area</textarea><br/><br/>
   <textarea>And another</textarea><br/><br/>
<button type="button">Submit</button>

​

CSS:

form { 
   position:relative; 
   width:500px;}
#message { 
   position:absolute;
   display:none;
   height:100px;
   width:200px;
   border: 1px gray solid;
   background-color:lime;
   font-size: 1.4em;
   line-height:100px;
   text-align:center;
   border-radius: 5px;
   bottom: 100px;}

​

Centering function:

(function($) {
$.fn.extend({
    center: function() {
        return this.each(function() {
            var left = ($(window).width() - $(this).outerWidth()) / 2;
            $(this).css({
                position: 'absolute',
                margin: 0,
                left: (left > 0 ? left : 0) + 'px'
            });
        });
    }
});})(jQuery);

Call center:

$("#message").center();

Click function:

$("button").click(function() {
var msg = $("#message");
msg.text("Item saved!")
msg.hide()
msg.stop(true, true).fadeIn('slow').animate({
    "bottom": "4px",
    "height": "17px",
    "font-size": "1em",
    "left": "80px",
    "line-height": "17px",
    "width": "100px"
}).delay(2000).fadeOut('slow').css({
    "height": "100px",
    "width": "200px",
    "font-size": "1.4em",
    "line-height": "100px",
    "bottom": "100px"
}).center();});​

http://jsfiddle.net/2qJfF/