2 * jQuery showLoading plugin v1.0
4 * Copyright (c) 2009 Jim Keller
5 * Context - http://www.contextllc.com
7 * Dual licensed under the MIT and GPL licenses.
11 jQuery.fn.showLoading = function(options) {
20 'indicatorZIndex' : 5001,
21 'overlayZIndex': 5000,
29 jQuery.extend(settings, options);
31 var loadingDiv = jQuery('<div></div>');
32 var overlayDiv = jQuery('<div></div>');
34 // Set up ID and classes
35 if ( settings.indicatorID ) {
36 indicatorID = settings.indicatorID;
39 indicatorID = jQuery(this).attr('id');
42 jQuery(loadingDiv).attr('id', 'loading-indicator-' + indicatorID );
43 jQuery(loadingDiv).addClass('loading-indicator-ui');
45 if ( settings.addClass ){
46 jQuery(loadingDiv).addClass(settings.addClass);
51 jQuery(overlayDiv).css('display', 'none');
53 // Append to body, otherwise position() doesn't work on Webkit-based browsers
54 jQuery(document.body).append(overlayDiv);
56 // Set overlay classes
57 jQuery(overlayDiv).attr('id', 'loading-indicator-' + indicatorID + '-overlay');
59 jQuery(overlayDiv).addClass('loading-indicator-ui-overlay');
61 if ( settings.addClass ){
62 jQuery(overlayDiv).addClass(settings.addClass + '-overlay');
65 // Set overlay position
70 var border_top_width = jQuery(this).css('border-top-width');
71 var border_left_width = jQuery(this).css('border-left-width');
74 // IE will return values like 'medium' as the default border,
75 // but we need a number
77 border_top_width = isNaN(parseInt(border_top_width)) ? 0 : border_top_width;
78 border_left_width = isNaN(parseInt(border_left_width)) ? 0 : border_left_width;
80 var overlay_left_pos = jQuery(this).offset().left + parseInt(border_left_width);
81 var overlay_top_pos = jQuery(this).offset().top + parseInt(border_top_width);
83 if ( settings.overlayWidth !== null ) {
84 overlay_width = settings.overlayWidth;
87 overlay_width = parseInt(jQuery(this).width()) + parseInt(jQuery(this).css('padding-right')) + parseInt(jQuery(this).css('padding-left'));
90 if ( settings.overlayHeight !== null ) {
91 overlay_height = settings.overlayWidth;
94 overlay_height = parseInt(jQuery(this).height()) + parseInt(jQuery(this).css('padding-top')) + parseInt(jQuery(this).css('padding-bottom'));
98 jQuery(overlayDiv).css('width', overlay_width.toString() + 'px');
99 jQuery(overlayDiv).css('height', overlay_height.toString() + 'px');
101 jQuery(overlayDiv).css('left', overlay_left_pos.toString() + 'px');
102 jQuery(overlayDiv).css('position', 'absolute');
104 jQuery(overlayDiv).css('top', overlay_top_pos.toString() + 'px' );
105 jQuery(overlayDiv).css('z-index', settings.overlayZIndex);
107 // Set any custom overlay CSS
108 if ( settings.overlayCSS ) {
109 jQuery(overlayDiv).css ( settings.overlayCSS );
114 // We have to append the element to the body first
115 // or .width() won't work in Webkit-based browsers (e.g. Chrome, Safari)
117 jQuery(loadingDiv).css('display', 'none');
118 jQuery(document.body).append(loadingDiv);
120 jQuery(loadingDiv).css('position', 'absolute');
121 jQuery(loadingDiv).css('z-index', settings.indicatorZIndex);
125 var indicatorTop = overlay_top_pos;
127 if ( settings.marginTop ) {
128 indicatorTop += parseInt(settings.marginTop);
131 var indicatorLeft = overlay_left_pos;
133 if ( settings.marginLeft ) {
134 indicatorLeft += parseInt(settings.marginTop);
138 // set horizontal position
139 if ( settings.hPos.toString().toLowerCase() == 'center' ) {
140 jQuery(loadingDiv).css('left', (indicatorLeft + ((jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width())) / 2)).toString() + 'px');
142 else if ( settings.hPos.toString().toLowerCase() == 'left' ) {
143 jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(jQuery(overlayDiv).css('margin-left'))).toString() + 'px');
145 else if ( settings.hPos.toString().toLowerCase() == 'right' ) {
146 jQuery(loadingDiv).css('left', (indicatorLeft + (jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width()))).toString() + 'px');
149 jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(settings.hPos)).toString() + 'px');
152 // set vertical position
153 if ( settings.vPos.toString().toLowerCase() == 'center' ) {
154 jQuery(loadingDiv).css('top', (indicatorTop + ((jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height())) / 2)).toString() + 'px');
156 else if ( settings.vPos.toString().toLowerCase() == 'top' ) {
157 jQuery(loadingDiv).css('top', indicatorTop.toString() + 'px');
159 else if ( settings.vPos.toString().toLowerCase() == 'bottom' ) {
160 jQuery(loadingDiv).css('top', (indicatorTop + (jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height()))).toString() + 'px');
163 jQuery(loadingDiv).css('top', (indicatorTop + parseInt(settings.vPos)).toString() + 'px' );
166 // Set any custom css for loading indicator
167 if ( settings.css ) {
168 jQuery(loadingDiv).css ( settings.css );
171 // Set up callback options
172 var callback_options =
174 'overlay': overlayDiv,
175 'indicator': loadingDiv,
179 // beforeShow callback
180 if ( typeof(settings.beforeShow) == 'function' ) {
181 settings.beforeShow( callback_options );
185 jQuery(overlayDiv).show();
188 // Show the loading indicator
189 jQuery(loadingDiv).show();
191 // afterShow callback
192 if ( typeof(settings.afterShow) == 'function' ) {
193 settings.afterShow( callback_options );
200 jQuery.fn.hideLoading = function(options) {
204 jQuery.extend(settings, options);
206 if ( settings.indicatorID ) {
207 indicatorID = settings.indicatorID;
210 indicatorID = jQuery(this).attr('id');
213 jQuery(document.body).find('#loading-indicator-' + indicatorID ).remove();
214 jQuery(document.body).find('#loading-indicator-' + indicatorID + '-overlay' ).remove();