After a while we all get a little board of seeing the same lame entrance of Impromptu. So this little snippet is to help spice things up a bit by adding a nice fresh entrance effect. Here we will create our own jQuery effect, but we’ve tailored it to work mainly for Impromptu. For the demo of this monster check out Ex 7 in the docs. Heres the new jQuery effect:


(function($){
	$.fn.extend({
		dropIn: function(speed, callback){
			var $t = $(this);

			if($t.css("display") == "none"){
				eltop = $t.css('top');
				elouterHeight = $t.outerHeight(true);

				$t.css({ top: -elouterHeight, display: 'block' }).animate({ top: eltop },speed,'swing',callback);
			}
		}
	});
})(jQuery);

Now that jQuery has an effect called dropIn, we just need to set the “show” option in Impromptu:


$.prompt('Example 7',{ show:'dropIn' });

And thats it! With Impromptu it is dirt simple to customize everything from it’s effects to it’s appearance. Please don’t hesitate to share your additions! Also note the dropIn effect may work fine with your other projects not related to Impromptu, however I developed and tested it with only Impromptu in mind.

Be Sociable, Share!

Related posts:

  1. jQuery Impromptu 1.7, A Few Changes
  2. jQuery Impromptu 0.4, a Few New Options
  3. Add the YoYo effect to your WordPress Sidebar
  4. Impromptu 3.2 – Mobile jQuery Prompts
  5. jQuery Impromptu – Final Call for Version 1.0