discourse/app/assets/javascripts/external/show-html.js

46 lines
1.7 KiB
JavaScript
Raw Normal View History

2013-02-05 14:16:51 -05:00
// Animates the dimensional changes resulting from altering element contents
2013-02-25 11:42:20 -05:00
// Usage examples:
2013-02-05 14:16:51 -05:00
// $("#myElement").showHtml("new HTML contents");
// $("div").showHtml("new HTML contents", 400);
2013-02-25 11:42:20 -05:00
// $(".className").showHtml("new HTML contents", 400,
2013-02-05 14:16:51 -05:00
// function() {/* on completion */});
(function($)
{
$.fn.showHtml = function(html, speed, callback)
{
return this.each(function()
{
// The element to be modified
var el = $(this);
2013-02-25 11:42:20 -05:00
// Preserve the original values of width and height - they'll need
2013-02-05 14:16:51 -05:00
// to be modified during the animation, but can be restored once
// the animation has completed.
var finish = {width: this.style.width, height: this.style.height};
// The original width and height represented as pixel values.
// These will only be the same as `finish` if this element had its
2013-02-25 11:42:20 -05:00
// dimensions specified explicitly and in pixels. Of course, if that
// was done then this entire routine is pointless, as the dimensions
2013-02-05 14:16:51 -05:00
// won't change when the content is changed.
var cur = {width: el.width()+'px', height: el.height()+'px'};
// Modify the element's contents. Element will resize.
el.html(html);
2013-02-25 11:42:20 -05:00
// Capture the final dimensions of the element
2013-02-05 14:16:51 -05:00
// (with initial style settings still in effect)
var next = {width: el.width()+'px', height: el.height()+'px'};
el .css(cur) // restore initial dimensions
.animate(next, speed, function() // animate to final dimensions
{
el.css(finish); // restore initial style settings
if ( $.isFunction(callback) ) callback();
});
});
};
2013-02-25 11:42:20 -05:00
})(jQuery);