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();});
Comments
Post a Comment