Utilizing Ajax for Efficient Loading

I'm looking to incorporate a loading image while Ajax is in progress. Currently, my code looks like this:

    if(xml.readyState == 1) {
        divPrincipal.innerHTML = "<img src='/RH/images/loading.gif' />"
    }
    if(xml.readyState == 2) {
        divPrincipal.innerHTML = ""
    }

While it works fine, the issue is that the loading image doesn't show up where I want it to.

Is there a way to position the loading image precisely at the center and on top of everything else? Or do I need to insert a div at the specific location for the image?

Thank you!

javascriptajaxloading

Answer №1

These CSS rules should be applied to the element with the ID of divPrincipal:

#divPrincipal {
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    background: #cccccc;
    background: rgba(255,255,255,0.5);
}
#divPrincipal > img {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -Xpx; /* X is half the width of the image */
    margin-top: -Ypx; /* Y is half the height of the image */
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring VueJS watchers: How to get started?

Struggling to grasp the concept of Watchers in VueJS, particularly when trying to implement them for tracking tab changes and resetting values. Even though I have set up a watch with parameters like `oldValue` and `newValue`, their usage remains unclear to ...

javascriptvue.jsvuetify.jswatch

Refrain JavaScript - sift through an array of objects based on the values of a primitive array in linear time

I've got an array of objects that looks like this: [{ itemType: 'bottle', itemId: '111' }, { itemType: 'bottle', itemId: '222' }, { itemType: 'bottle', ...

javascriptarraysunderscore.jstime-complexity

What is the best way to store a downloaded video from the server?

I am currently in the process of downloading a video from a server using JavaScript XHR (specifically Angular $http GET with response type 'blob'). My question is, how can I save this downloaded video to a Chrome application's local storage ...

javascriptangularjsgoogle-chromegoogle-chrome-apphtml5-filesystem

Invoking AJAX function post readystatechange

Currently, I am in the process of making an Ajax call to a server and attempting to invoke another function once the response is ready (readystatechanged). As of now, there isn't any serverside code implemented. Surprisingly, Chrome and Firefox encoun ...

javascriptajaxgoogle-chromeinternet-explorer-8

Issue with Node.js xml2js module: Sitemap attributes are not being recognized during creation

Currently, my project involves utilizing node.js and xml2js to generate an XML sitemap.xml. Everything seems to be in order, but when I try to define attributes like: '$': { 'xmlns': 'http://www.sitemaps.org/schemas/sitemap/0 ...

javascriptnode.jsxmlsitemapxml2js

Dealing with encoding problems in Node.JS when parsing JSON data with UTF-

I have developed a small script that allows me to fetch keyword suggestions from the Google search API. One major issue I am facing is when the response contains special characters (such as à é ù etc.): my application returns unreadable keywords like: ...

javascriptjsonnode.jsutf-8

Problems arise with jQuery select change functionality following Ajax pagination

I am facing an issue with select boxes on my page. Whenever the user changes the select box, an alert is triggered. My website showcases a grid of various products, each of which includes a select box. I have implemented Ajax for pagination, so when the u ...

jqueryajax

Unforeseen anomalies arise when deleting an element from an array in a React application

I've been scouring for a solution, but I could really use some human guidance. I have a basic form where users can input additional fields. They also have the option to delete irrelevant fields. The problem arises when trying to remove these fields. ...

javascriptreactjs

What is the importance of having references to maintain the existence of mutable objects?

In the documentation for useRef, it is mentioned that this hook is useful for storing mutable values. I've been thinking, why can't we just use a variable in the outer scope of the component to achieve the same result? // the object I want to st ...

javascriptreactjs

Watch the video and follow along with your mouse using jQuery

Wouldn't it be cool to have a video play and follow your mouse pointer when you hover over the red box? And then once you move away, the video stops and disappears. Check out my progress so far: jsfiddle Here's the jQuery code I've used: $ ...

javascriptjqueryhtmlcss

Using Vanilla JavaScript library in Angular 6 - A Comprehensive Guide

I encountered an error while trying to import a Vanilla JavaScript library into an Angular 6 component. Can you please provide me with some guidance on how to resolve this issue? This is the syntax I used to import the library: import * as ExistingLibrar ...

javascriptangulartypescript

Error: angular-cli encountered an unexpected token syndrome

The current node version being used is v5.7.0. I am attempting to install/update angular-cli to the latest version in order to support angular-4 I upgraded npm to the latest version using powershell as suggested by the node team. The npm version after t ...

javascriptnode.jsnpmangular-cli

Looking to construct a multidimensional array in JavaScript for efficiently reading arrays along with their corresponding options?

I am looking to create a multidimensional array in JavaScript to store questions along with their related options. Here is my current code snippet: demoArray[i] = new Array(); var id=results.rows.item(i).del_ques_id; demoArray[i]["question"] = results.row ...

javascriptarraysangularjssqlitemultidimensional-array

Is there a method to keep the leftmost column in a Google visualization table anchored in place when scrolling horizontally?

I want to replicate the typical google visualization table header row functionality, but I would like it to be focused on the first column instead. It doesn't appear to be a default feature, so I'm curious if it could be achieved using custom CSS ...

javascriptjquerycssgoogle-visualization

Storing Code into mongoDB with the Help of CasperJS

What is the best way to save data scraped using casperjs into MongoDB? My casperjs script scrapes information from millions of websites and saves each site's content in its own folder. However, I have come to realize that it would be more efficient to ...

javascriptmongodbcasperjs

I'm experiencing a lack of feedback while implementing jQuery/AJAX with JSONP

Attempting to perform a cross-domain request using jQuery/AJAX, I have the code below; $.ajax({ url: "http://www.cjihrig.com/development/jsonp/jsonp.php?callback=jsonpCallback&message=Hello", crossDomain:true }) .done(function( msg ) { alert( ...

javascriptjqueryajaxjsonp

Best approach for transferring data from Node.js/Express controller to pug view for subsequent processing with JavaScript

I am a beginner in the realms of Node.js, Express, and frontend development, and I am currently exploring ways to effectively process data transferred from a controller to a pug view for subsequent JavaScript processing. Presently, here is how the data pr ...

javascriptnode.jsexpresspugcytoscape.js

How can I retrieve user input from a text box and showcase it in an array format using jQuery?

I successfully wrote a JavaScript code where I take input values from a text box, add them to an array using an 'add' button, and display the array values when the 'display' button is clicked. Now, I'd like to achieve the same fun ...

javascriptjquery

Passing a return value to ajax success within an Express application

I am trying to retrieve a value from an included file and use it in the success function of an ajax call within Express. Below is my code for app.js: var userdetail = { "useremail":req.body.useremail, "fname" : req.body.fname, "lname" : req.bo ...

javascriptjquerynode.jsexpressmongoose

Looking to transition from Node.js version v4.4.5 to v6.11.0 on your Windows system?

npm cache clean npm update -g I attempted upgrading using the provided commands, but unfortunately, the update did not go through as expected. Seeking advice for a successful update process. (Currently on Node.js 4.4.5 and aiming to upgrade to Node.js 6. ...

javascriptnode.jsnpm-installnode-modules