javascript - Create a notification popup animated in a specific way? -


how go making following animation form submissions?

(i figured instead of typing it, create visual.)

here's andy's idea refined 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/


Comments

Popular posts from this blog

c++ - Convert big endian to little endian when reading from a binary file -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

unicode - Are email addresses allowed to contain non-alphanumeric characters? -