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.
Related posts:
6 Responses
trent
02|Dec|2009 1Thought I would also mention the dropIn effect drops the prompt down from the top of the screen. Curious minds might also play with the easing to make it a little more exciting as well.
Jeffrey Gilbert
02|Dec|2009 2Looks like all subsequent fade ins don’t animate in (safari 4 os x)
trent
02|Dec|2009 3Not sure I know what you mean? I tried it on safari on os x and it appears to be ok?
Jocke
10|Dec|2009 4Cant get it to work in explorer, any ideas, same on you page:
http://trentrichardson.com/Impromptu/demos/demostates.php
Dont work in explorer 8 or 7 :(
Jocke
10|Dec|2009 5The strange thing is, when I do it localy on my computer it works in explorer but when I upload to the server it don’t, can it be a serverside problem?
trent
10|Dec|2009 6Hey Jocke,
Are all your files uploaded since you made the changes? the declaration of the show effect and the call to $.prompt?
Leave a reply