Question

I am trying to create a loading function that build a basic DOM with a loading animation vertically centered and another method to destroy it. I don’t know how to implement the hide! I don’t want to create another separate function to destroy the loading DOM! I would like to have both of them under one namespace!

$(document).ready(function() {
    $.extend({
        loading:function(status) {
            var _status=status || 'Loading';
            var $this= $('<div class="loadnote"><img src="loadinfo.net.gif" width="16" height="16" /><span>'+_status+'</span></div>').appendTo($('body'));
            function center() {
                var w = $this.width();
                w+= parseInt($this.css('padding-left'))+parseInt($this.css('padding-right'));
                var w_box = $(window).width();
                var w_total = (w_box - w)/2; 
                var css = {
                    "left": w_total+'px'
                    };
                $this.css(css)
            }

            center();

            function hide() {
                $this.remove();
            }

        //return hide();
        }
    });

    $.loading();
    //$.loading().hide();
});

Answer 1

Try:

$.extend({
    loading:function(status) {
        var _status=status || 'Loading';
        var $this= $('<div class="loadnote"><img src="loadinfo.net.gif" width="16" height="16" /><span>'+_status+'</span></div>').appendTo($('body'));
        function center() {
            var w = $this.width();
            w+= parseInt($this.css('padding-left'))+parseInt($this.css('padding-right'));
            var w_box = $(window).width();
            var w_total = (w_box - w)/2; 
            var css = {
                "left": w_total+'px'
                };
            $this.css(css)
        }

        center();

        function hide() {
            $this.remove();
        }

    return {hide: hide};
    }
});
var retval = $.loading();
retval.hide();

http://jsfiddle.net/FVcpH/1/