Simple JS/jQuery notification system I'm new to front-end development and now I'm learning JavaScript with jQuery.
I couldn't understand JavaScript's classes and objects and jQuery plugins, but after reading some articles and examples I wrote simple notifications system.

(function ($) {
    var notification = function (title, msg, duration) {
        var self = this;

        this.hide = function () {
            self.element.fadeOut(1000, function () {
                self.element.remove();
            })
        }

        this.element = $('&lt;div class="notification"&gt;&lt;h3&gt;' + title + '&lt;/h3&gt;&lt;div class="notification_body"&gt;' + msg + '&lt;br/&gt;&lt;i&gt;(double click to hide)&lt;/i&gt;&lt;/div&gt;&lt;/div&gt;');
        this.element.dblclick(self.hide);

        if (duration !== undefined) {
            setTimeout(function () {
                self.hide();
            }, duration * 1000);
        }

        $('#notifications_bar').prepend(this.element.hide().fadeIn(1000));
    };
    $.extend({
        notify:function (title, msg, duration) {
            return new notification(title, msg, duration);
        }
    });


Example:

$(function() {
    $.notify('Title', 'Message'); // sticky note
    $.notify('Title', 'Message', 2); // 2-seconds notification
});


The most terrible were closures and this keyword. I couldn't understand how to use them, so I want to know if there in my code above 'bad-practice' parts.
First of, for someone learning jQuery and JavaScript, you've done a great job of avoiding the pitfalls of most new developers to JavaScript;


You're not passing strings to setTimeout, which a lot of people do.
You've got a good grasp on closures (no matter how long they took you to learn :)).
You're using strict equals (===) rather than equals.


... so, if you want me to be really, really picky;


I don't see much point in adding your code to the jQuery namespace. It would work just as well to be added to your own namespace. A lot of people fall into the habit of defining everything on $, and are scared of declaring your own namespace; don;t be:

var ME = {};

ME.notify = function (title, msg, duration) {
    return new notification(title, msg, duration);
};

It's a code convention to use a capital letter for constructors (e.g. functions you need to call new on); change function notification to function Notification.
You could make use of prototypical inheritance. As it stands, you're defining and adding a hide function on every instance of a notification you create. Obviously this has a negligible memory impact. Instead, use prototypical inheritance, and declare the function once;

function Notification (blah, blah, blah) {
   // blah blah blah
} 

Notification.prototype.hide = function () {
    var self = this;

    this.element.fadeOut(1000, function () {
        self.element.remove();
    });
}


... you'd then have to change your double click handler to use the anonymous function approach I recommended in my answer, as this will no longer be the correct this.
You've got a potential XSS exploit. For example, given the message:

&lt;script&gt;alert(document.cookie);&lt;/script&gt;


This will be injected, and evaluated in your page. You can fix this by setting the h3 and p using text() explicitly;

this.element = $('&lt;div class="notification"&gt;&lt;h3&gt;&lt;/h3&gt;&lt;div class="notification_body"&gt;&lt;span class="text"&gt;&lt;/span&gt;&lt;br/&gt;&lt;i&gt;(double click to hide)&lt;/i&gt;&lt;/div&gt;&lt;/div&gt;');

this.element.find('h3').text(title);
this.element.find('span.text').text(message);



... but again, I want to re-iterate that I'm being very, very picky. What you've got is well written, functioning JavaScript.