JQuery Center Screen Download Message

Question

I know that there is a jQuery function ajaxStart () that will display the loaded message when an ajax call is ever made, I also know about creating a div for the loading message, both methods are shown here , but these methods create the loading message in the lower left the corner of the screen that I don’t want.

EDIT: I used both methods mentioned on the page I gave, but at the moment I'm using ajaxStart ()

add this as a script

<script type="text/javascript" charset="utf-8"> $("#loading").ajaxStart(function(){ $(this).show(); }).ajaxStop(function(){ $(this).hide(); }); </script> 

add this to HTML

 <div id="loading"> <p><img src="loading.gif" /> Please Wait</p> </div> 

Is there a way to focus one of these methods or another method that creates a boot message in the center of the screen?

Answer 1

Here is the code that I use to create the dialog box that appears in the center of the screen. In this example, id should be the "#id" selector for your div ...

 var winH = $(window).height(); var winW = $(window).width(); var dialog = $(id); var maxheight = dialog.css("max-height"); var maxwidth = dialog.css("max-width"); var dialogheight = dialog.height(); var dialogwidth = dialog.width(); if (maxheight != "none") { dialogheight = Number(maxheight.replace("px", "")); } if (maxwidth != "none") { dialogwidth = Number(maxwidth.replace("px", "")); } dialog.css('top', winH / 2 - dialogheight / 2); dialog.css('left', winW / 2 - dialogwidth / 2); 

Also note that if the DIV changes dynamically during display, then it will not automatically adjust in the center of the screen, but this rarely matters for my use, since my dialogs usually have a fixed size

Here is a working example

Answer 2

Put your Please Wait message in <div id="loading_text"> (for example).

Then do the style:

 #loading_text { position: absolute; top: 50%; left: 0; width: 100%; margin-top: -10px; line-height: 20px; text-align: center; } 

This will center one line of text (line height 20, negative margin 10) inside the fixed overlay.

Answer 3

I understand that this post was a bit late, but I found a good solution for this and thought I could share

I put this inside the document ready function

 $('.progress').ajaxStart(function () { $(this).dialog({ title: "Loading data...", modal: true, width: 50, height: 100, closeOnEscape: false, resizable: false, open: function () { $(".ui-dialog-titlebar-close", $(this).parent()).hide(); //hides the little 'x' button } }); }).ajaxStop(function () { $(this).dialog('close'); }); 

It may also be contained in a separate .js file.

Then, in my opinion, I use

This works great for me. No matter which function is called, if it is an ajax call, this loaded image is displayed.

Answer 4

you should align it to the center of the screen like this:

 left = ( this.parent().width() / 2 ) - (this.width() / 2 ); top = ( this.parent().height/ 2 ) - (this.height() / 2 ); this.css({top:top,left:left}); 

use the bloated jQuery plugin and call

  <script type="text/javascript" charset="utf-8"> $("#loading").ajaxStart(function(){ $(this).show().align(); // for absolute position pass {position:'absolute'} }).ajaxStop(function(){ $(this).hide(); }); </script> 

---

you can also create an overlay on the body of $('body').overlay();

// use this code:

  ;(function($){ $.extend($.fn,{ // Overlay ; $(body).overlay(); overlay: function(o){ var d={ addClass:'', css:{}, opacity:0.5, autoOpen:true, zIndex:998, onOpen:function(){x.show();}, onClose:function(){x.hide();}, onRemove:function(){x.remove();} },x,l; // Merge Options o=$.extend({},d,o); // Create overlay element x=$('<div>',{css:{opacity:o.opacity,zIndex:o.zIndex}}).css(o.css).addClass('overlay '+o.addClass).hide().appendTo(this); // If appended to body element, set position fixed this[0].tagName.toLowerCase()=="body"&&x.css("position","fixed"); // Overlay Control Object l = { remove:function(){o.onRemove(l)}, open:function(){o.onOpen(l)}, close:function(){o.onClose(l)}, obj:x }; // Call On Show o.autoOpen&& o.onOpen(l); // Return Object return l; }, align:function(o){ var d={ x:'center', y:'center', position:'fixed', parent:window }; o=$.extend({},d,o); var c=$(o.parent), t=$(this), s=c.scrollTop(), top, left; t.css('position',o.position); // Set Css Position if(oy)top = oy=='center' ? (c.height()/2) - (t.innerHeight()/2) : oy; if(ox)left = ox=='center' ? (c.width()/2) - (t.innerWidth()/2) : ox; if(o.position=='absolute') top += s; // For absolute position if(top<0) top=0; t.css({top:top,left:left}); }, }); })(jQuery); 

css for overlay:

 html{height:100%;width:100%;} .overlay{width:100%;height:100%;top:0;right:0;position:absolute;background:#000;} 

Answer 5

 <script type="text/javascript"> $("#loading").ajaxStart(function(){ $(this).css('position', 'fixed') .css('left', '45%') .css('top' '45%') .show(); }).ajaxStop(function(){ $(this).hide(); }); </script> 

Answer 6

If you are using Bootstrap and the Awesome Font, here is a good solution:

HTML - Your boot message (icon) should be placed outside your main container:

 <!-- Page --> <div class="page-content"> My Content </div> <!-- Loading --> <div id="loading" class="text-center hidden"> <i class="fa fa-spinner fa-spin blue fa-4x"></i> </div> 

jQuery - For handling Ajax requests.

 //Run when the page load (before images and other resource) jQuery(function($) { //Ajax Loading Message $(document).ajaxStart( function() { $(".page-content").addClass('disabled'); $('#loading').removeClass('hidden'); }).ajaxStop( function() { $(".page-content").removeClass('disabled'); $('#loading').addClass('hidden'); }); }); 

CSS - The width of the download (26 pixels) should be equal to the width of the download icon, and the background color (#fff) should be equal to the background color .page-content .. p>

 <!-- Style --> <style> /* Ajax Disable */ .page-content.disabled { pointer-events: none; opacity: 0.65; } #loading { position: fixed; top: calc(50% - 26px); left: calc(50% - 26px); z-index: 999; background: #fff; } </style> <!-- Style --> 

Note. pointer-events:none; does not allow the user to click on any button, enter, etc. on the page is supported by IE11 + .