The loading indicator is not appearing inside the designated box

I have successfully implemented a loader using jQuery and CSS to display a gray background during an AJAX call. However, I am encountering an issue where the loader and background are being displayed across the entire page instead of just within a specific box as shown in the image below.

https://i.sstatic.net/yiPFa.png

The current state of my code is causing the loader and background to cover the entire page, like in the following image.

https://i.sstatic.net/DbWeO.png

If anyone has a solution to confine the loader and gray background within a defined box, please advise. My existing code is provided below for reference

JSFiddle

    ajaxindicatorstart('loading data.. please wait..');

    function ajaxindicatorstop()
    {
        $('#resultLoading .bg').height('100%');
        $('#resultLoading').fadeOut(300);
        $('.myBox').css('cursor', 'default');
    }

    function ajaxindicatorstart(text)
    {
        if($('.myBox').find('#resultLoading').attr('id') != 'resultLoading'){
            $('.myBox').append('<div id="resultLoading" style="display:none"><div><img src="http://w3lessons.info/demo/ajax-indicator/ajax-loader.gif"><div>'+text+'</div></div><div class="bg"></div></div>');
        }

        $('#resultLoading').css({
            'width':'100%',
            'height':'100%',
            'position':'fixed',
            'z-index':'10000000',
            'top':'0',
            'left':'0',
            'right':'0',
            'bottom':'0',
            'margin':'auto'
        });

        $('#resultLoading .bg').css({
            'background':'#000000',
            'opacity':'0.7',
            'width':'100%',
            'height':'100%',
            'position':'absolute',
            'top':'0'
        });

        $('#resultLoading>div:first').css({
            'width': '250px',
            'height':'75px',
            'text-align': 'center',
            'position': 'fixed',
            'top':'0',
            'left':'0',
            'right':'0',
            'bottom':'0',
            'margin':'auto',
            'font-size':'16px',
            'z-index':'10',
            'color':'#ffffff'

        });

        $('#resultLoading .bg').height('100%');
           $('#resultLoading').fadeIn(300);
        $('.myBox').css('cursor', 'wait');
    }

Answer №1

Your animated icon is set to have a fixed position, which means it will stay in place relative to the browser window rather than moving with your content.

    $('#resultLoading>div:first').css({
        'width': '250px',
        'height':'75px',
        'text-align': 'center',
        'position': 'absolute',
        'top':'0',
        'left':'0',
        'right':'0',
        'bottom':'0',
        'margin':'auto',
        'font-size':'16px',
        'z-index':'10',
        'color':'#ffffff'

    });

    $('#resultLoading').css({
        'width':'100%',
        'height':'100%',
        'position':'absolute',
        'z-index':'10000000',
        'top':'0',
        'left':'0',
        'right':'0',
        'bottom':'0',
        'margin':'auto'
    });

Make sure to also assign a relative position to your myBox.

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

The v-menu closes before the v-list-item onclick event is detected

I have set up the following menu using vue and vuetify: <div id="app"> <v-app id="inspire"> <div class="text-center"> <v-menu> <template v-slot:activator="{ on }"> ...

Regular expressions: Capturing characters that come after and before a designated symbol

Is there a way to extract all letters, both before and after an underline "_", in JavaScript using Regex while excluding specific words like "pi", "\Delta" and "\Sigma"? How can this be achieved in Regex JS? /\b([^e|_|\d|\W])&bso ...

Selecting multiple elements with jQuery's selector

While this may not be directly related to coding, it is an interesting question that could benefit others: What exactly differentiates using the following code snippet: $(function() { var $fullArea = $('#full-sized-area'); var $fullCont ...

Navigation structure on a website built with HTML

As I dive into HTML5 programming, I am working on creating a simple navigation menu with links to different HTML pages such as "1.html", "2.html," and others. However, when I click on a link like "1.html," it takes me to a new page where the navigation men ...

The getimagesize functionality seems to be malfunctioning

I have developed a function that resizes images to fit as a background image for a div. I provide the function with the div size and the image path. It works perfectly when the height is larger than the width, but it fails when the width is larger than the ...

I'm puzzled by why my newly purchased website domain occasionally redirects me to the outdated webpage

My website was previously hosted with n*agahoster but we decided to switch to a government server and change the domain from example.com to example.gov.xx. The transition was smooth, as someone managed the server and I provided backup files (public_html an ...

Tips for formatting angular text sections

Within the scope of a controller, I have a status variable. After a successful rest PUT request, I add a message to this JavaScript variable. This message is displayed in my template using the {{status}} Is there a way to customize the styling of this mes ...

Have Vue props been set to null?

Currently, I have a component within my vue.js application that looks like this: export default { props: ['forums'], methods: { increment(forum, index) { ForumService.increment(forum) .then(() => { ...

Challenge encountered while implementing a countdown using a for loop in a node.js application

I've been struggling with the following code and despite trying everything, I can't seem to find a solution. Hopefully, someone out there can lend me a hand. Currently, the code runs fRoll.roll, enters a FOR loop, initiates the countdown of the ...

Refresh Angular 2 data after a related data update

I am facing an issue with my <select> elements in Angular. One for the Districts and another for the Cities. The districts are fetched using the getDistricts() function within the ngOnInit() function without any problems. However, I am unsure how to ...

Is there a way to identify when a radio button's value has changed without having to submit the form again?

Within this form, I have 2 radio buttons: <form action='' method='post' onsubmit='return checkForm(this, event)'> <input type = 'radio' name='allow' value='allow' checked>Allow ...

Apply CSS styles conditionally to an Angular component

Depending on the variable value, I want to change the style of the p-autocomplete component. A toggle input determines whether the variable is true or false. <div class="switch-inner"> <p [ngClass]="{'businessG': !toggle }" clas ...

Switching Formview mode using javascript

Currently, I have a formview on my website and I am looking to change the formview mode using JavaScript. Specifically, I want the formview to switch between insert mode and edit mode based on different interactions with buttons. I have a repeater on my p ...

Choose an item from the list and use the scrollbar when the menu opens

My select element has over 50 options, but the options popup and go off the page without a scroll bar. As a result, I can only see and select up to 20 options. Is there a way to make the select element display a vertical scroll bar when there are more tha ...

Using the jQuery $.each method with $.getJSON and struggling to access data within a nested array

I've been trying to achieve the same functionality in my jQuery code as my PHP code below, but so far I haven't been able to find any helpful information after nearly two days of searching. <script> $(document).ready(function(){ var s ...

console displaying indentation problems with laravel and vue

I am currently utilizing Vue within Laravel and encountering a multitude of indentation errors in the console. https://i.sstatic.net/sfRec.png Here is an excerpt from my package.json file: "private": true, "scripts": { "clean": "rimraf public/buil ...

Compilation failure resulting from core UI build in React js

I have recently transitioned my domain to React Js and am in the process of learning. I have been working on creating an admin panel using Core UI Reactjs components, however I keep encountering an error that says "This error occurred during the build ti ...

Error message occurs when attempting to use the ->num_rows function on inner join statement and accessing a property of a non-object

I am attempting to fetch both Product_Name from the product table and Order_Date from the order table, but I keep encountering an issue at line 35 mentioning the "num_rows line". <?php $servername = "localhost"; $username='root'; $password = ...

Sliding and repositioning elements using jQuery

My goal is to build a simple slideshow for learning purposes. I want the list items to slide automatically to the left in a continuous loop. I've written some code that makes the slides move, but I'm struggling to set the correct position for ea ...

Issue with Tanstack React Query failing to import

Attempting to integrate tanstack react query into my current project to handle state management has proven challenging. Following a tutorial on using react query with nextjs 13, I thought I was following it correctly. However, I encountered various import ...