(function($){
$.extend({
notify: function(options, duration) {
var defaults = {
inline: true,
href: '',
html: ''
};
var options = $.extend(defaults, options);
var body = $('body'),
container = $('<ul></ul>').attr('id', 'notification_area'),
wrapper = '<li class="notification"></li>',
clone;
if(!body.hasClass('notifications_active')){
body.append(container).addClass('notifications_active');
}
if(options.inline == true && options.href){
clone = $(options.href).clone().wrap(wrapper);
}
clone.css('visibility', 'hidden').appendTo(container);
var clone_height = 0 - parseInt(clone.outerHeight());
clone.css('marginBottom', clone_height);
clone.animate({marginBottom: 0}, 'fast', function(){
clone.hide().css('visibility', 'visible').fadeIn('fast');
});
}
});
})(jQuery);
$(function(){
$('a').click(function(){
$.notify({
inline: true,
href: '#alert'
}, 3000)
})
})
http://jsfiddle.net/sambenson/RmkEN/
In the above example I'm cloning an element and attempting to wrap it with and <li></li>
but the clone isn't being wrapped at all.
Any ideas why?