Is it possible to apply a transparent grey effect to an entire <table> and display a loading image in the center?
I am interested in running some AJAX calls where the table is rendered inaccessible, with a grey overlay and a loading GIF positioned at the center while waiting for the ajax content to load.
I believe this solution will do the trick! Check out the JSFiddle link for a demonstration. The ajax functionality was implemented by simulating a call using a custom Timeout function.
Some important points to consider - make sure not to overlook setting a height or width for the parent div. Since the table is small, it may appear distorted without these dimensions. Additionally, remember to include position:relative to allow proper spacing for the element with the class .page-loader.
Feel free to experiment and customize as needed!
HTML:
<div style="position: relative">
<div class="page-loader">
<img src="/Content/loader.gif" style="position:absolute; margin:auto; top:0; left:0; right:0; bottom:0;" width="100" alt="Loading">
</div>
<table>
</table>
</div>
CSS:
.page-loader {
position:absolute;
height:100%;
width:100%;
background:gray;
-ms-opacity:0.5;
opacity:0.5;
z-index:1000000;
display: none;
margin-left: -40px;
margin-top: -19px;
}
I am trying to display the category name instead of its ID in the table for the user. To achieve this, I added the $data['category'] object in my Controller. Controller Code: $Query="group by product_image order by product_id"; $data["product ...
Currently, I am working on a selenium automation project in Python and have run into an issue. In order to upload a file, I require the input tag which is only activated when I click on an "Upload" button. However, this same button opens a separate window ...
I oversee the management of numerous ads on a website. My goal is to enhance their accessibility, and though I have been doing research, there seems to be limited information available on how to achieve this effectively. While I continue my investigation, ...
It is expected that the code $(".post-title").append(postTitle); will retrieve the title of the post, as will postBody. However, when I console.log these variables, it returns undefined. $.ajax({ url: "http://api.tumblr.com/v2/blog/ohc-gallery.tumblr. ...
When the date is retrieved from the Json data, it is displayed as follows: 2017-09-14T22:11:05.5303556 Is there a way to present it in a more user-friendly format, such as: 09/14/2017 22:11:05 Here is a snippet of the Json data: [ { id: 98, dateCreate ...
Within my app.js file, I am encountering a challenge as I aim to transfer the username inputted in a form on the login page over to the game page. Despite having successfully retrieved the data using req.body.username within app.post('/login'), I ...
I am trying to achieve a torn and indented effect on an image on my webpage, with rough edges and an inner shadow. I want the content on top of this image to scroll underneath the torn edges without extending beyond the visible area of the image. The image ...
Trying to create a smooth text fading effect across different browsers using jQuery. In the example below, you may notice that during the last part of the animation when the text fades in, the font weight suddenly increases causing a jerky/clunky appearan ...
I am facing a challenge involving three divs. One of them is the main div, while the other two are positioned below it and contain different content. I am trying to find a way to swap the content between div one and div two in such a way that the original ...
Within my web application, I am utilizing a factory. This factory contains an object named mapLayers. Within my controller, I am assigning this factory.mapLayers object to a variable on the scope called $scope.mapLayers and using ngRepeat to iterate over i ...
Q: I have a navigation menu that seems to change position every time I adjust the browser zoom. How can I make the menu stay fixed in its place? The CSS: ul#topnav { margin-left:0; margin-bottom:50px; margin-top:5px; padding: 0; flo ...
Requesting help with adminLte template design issue. There seems to be a gap between my content page and the top bar, causing them not to align properly. I have spent several hours inspecting elements but cannot identify the source of the problem. Any sugg ...
Recently, I encountered an issue with a "dropdown button" that I created using only CSS and HTML. Surprisingly, it works flawlessly in Chrome and FireFox, but seems to have some glitches when tested on Internet Explorer (IE). The "New Invoice" button fails ...
My approach to setting the height of my wrapper to 100vh in order to fill up the entire screen and then aligning a div vertically in the middle by setting it to 50% using position: relative, top, and transform (translateY) seems to be working perfectly o ...
Currently, I am utilizing Blazorise along with Bootstrap 5, however, I have noticed that the spacing between the input field and the label is too wide. Here is an illustration of the space between the input and the label: Is there a way for me to reduce ...
I'm having trouble with the Navigation Bar code in my header. The text is not staying within the header and I can't seem to fix it. Is there a CSS solution to keep the text contained within the header? <div class="header"> <img src= ...
I have encountered a glitch in the website I am working on. In a regular grid layout of projects, fragments of images are overlapping other HTML image containers nearby, with unpredictable behavior when scrolling or zooming. This issue only occurs on cer ...
I've been attempting to create a situation where the text next to my checkbox is clickable. However, for some reason, the code I'm using doesn't seem to be working as expected. Can anyone help me troubleshoot this issue? <form name="f1"& ...
My goal is to create a calendar with fixed width and height, where if the content within a day exceeds the allotted space, a scroll bar will appear inside that specific day. I have been attempting to restrict the height of each day on the calendar, but al ...
Currently, I am facing a challenge with old HTML/JavaScript code. Some parts I have control over, while others are generated from an external source that I cannot manage. There is a form created dynamically with hidden fields. The form is produced using a ...