I'm relatively new to jQuery and am trying to learn best practices/design patterns with JavaScript. Came across [this link][1] and decided to try and put it to something useful. So far I've made a notifications menu dropdown using [TinyScrollBar][2] where the user can remove an individual notification. Once removed, the height of the dropdown updates until there are no more. [Here][3] is a demo of what I have so far. I would like to know ways on how I can improve my JavaScript. JS var TEST = TEST || {}; /* Notifications */ TEST.notif = {}; TEST.notif._notifOpen = false; TEST.notif._el = null; TEST.notif._sum = 0; TEST.notif._defaultVPHeight = 350; TEST.notif.init = function(){ this._el = $('#notifications'); $('.notif-trigger').on('click',function(e){ TEST.notif.toggleNotifications(); return false; }); // when you click outside the notification menu // hide the notifications $('html').on('click',function(e){ if( TEST.notif._notifOpen ) { TEST.notif.hideNotifications(); } }); // set initial notifications scrollbar height this._el.tinyscrollbar( {size: TEST.notif._defaultVPHeight} ); }; TEST.notif.showNotifications = function(){ var $el = this._el, $close = $('.notif-close'), $li = $('.notif-list li a'); // show notificatoins and update scrollbar position $el.show().tinyscrollbar_update(); // stop propagation $li.on('click',function(e){ e.stopPropagation(); }); // remove list-item $close.on('click', function(e){ // store var liHeight, newH, overviewH; // store individual list-item height liHeight = $(this).parent().height(); // remove the list-item you clicked $(this).parent().remove(); // store the new height TEST the viewport newH = TEST.notif._defaultVPHeight - liHeight; // get height TEST actual contents overviewH = $('.overview').height(); // set new defaultH TEST.notif._defaultVPHeight = newH; // update scrollbar $el.tinyscrollbar_update(); // once scrollbar is disabled, start changing the viewport height if( $('#notifications .scrollbar').hasClass('disable') && $('.notif-list li').length > 1 ){ $('#notifications .viewport').height( overviewH ); } else if( $('.notif-list li').length == 1 ) { $('.notif-list li.empty').show(); } return false; }); this._notifOpen = true; }; TEST.notif.hideNotifications = function(){ this._el.hide(); this._notifOpen = false; }; TEST.notif.toggleNotifications = function(){ this._notifOpen ? this.hideNotifications() : this.showNotifications(); }; /* init */ $(document).ready(function(){ TEST.notif.init(); }); [1]: http://addyosmani.com/resources/essentialjsdesignpatterns/book/ [2]: http://baijs.nl/tinyscrollbar/ [3]: http://jsfiddle.net/pSpBM/3/