I'm having trouble getting rid of this stubborn loader on the website

I am currently utilizing the following template: . My objective is to eliminate the preloader progress bar that displays the loading progress of the page in percentage. The files associated with this preloader are as follows:

Loader CSS File - www[dot]themenesia[dot]com/themeforest/archi-light/css/jpreloader.css

JS File - www[dot]themenesia[dot]com/themeforest/archi-light/js/jpreloader.js

Page CSS File - www[dot]themenesia[dot]com/themeforest/archi-light/css/style.css

I have attempted to delete both of these files and removed the css link and script from the page. Additionally, I eliminated the specified style from line 55 of the Page CSS File:

body {
    display:none;
}

Despite taking these steps, the page continues to fail to load and appears blank on screen. Any assistance would be greatly appreciated!

javascripthtmlcsshtml5-canvas

Answer №1

I believe the identifier for the loader is #jpreOverlay.

Attempting to include the following:

#jpreOverlay { display: none !important; }

in your CSS might solve the issue.

Answer №2

To customize your website's appearance, include the following CSS:

#customOverlay { 
    visibility: hidden !important; 
}

Answer №3

The reason why the screen appears blank is because you have hidden the content. The loader on the screen is probably coded with JavaScript, so in order to remove it, you will need to delete both the JavaScript and HTML code related to the loader. Additionally, make sure to remove the following line of code:

body {
   display: none;
}

By doing this, the main page will be visible and the loader won't appear anymore.

Answer №4

body {
    display: block !important;
}

Include the code snippet provided below in your css file.

UPDATE

Remove the specified lines from designesia.js

// --------------------------------------------------
    // preloader
    // --------------------------------------------------

    //calling jPreLoader function with properties
    jQuery('body').jpreLoader({
        splashID: "#jSplash",
        splashFunction: function () {  //passing Splash Screen script to jPreLoader
            jQuery('#jSplash').children('section').not('.selected').hide();
            jQuery('#jSplash').hide().fadeIn(800);
            init_de();
            var timer = setInterval(function () {
                splashRotator();
            }, 1500);
        }
    }, function () {    //jPreLoader callback function
        clearInterval();

        jQuery(function () {
            var v_url = document.URL;

            if (v_url.indexOf('#') != -1) {
                var v_hash = v_url.substring(v_url.indexOf("#") + 1);


                jQuery('html, body').animate({
                    scrollTop: jQuery('#' + v_hash).offset().top - 70
                }, 200);
                return false;
            }
        });


    });

    // End of jPreLoader script

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

Updating Rails record using Ajax with select_tag and onchange functionality

I'm working on an index view where I want to update a table data dynamically using select_tag onchange feature without the need to refresh the page. Do I need to use Coffeescript to detect the onchange event, capture the new value, and then send it to ...

javascriptjqueryajaxruby-on-rails-4coffeescript

Utilizing HTML templates in Express instead of Jade

Currently in the process of setting up a new MEAN stack project, with Angular as my chosen front-end framework. I am aiming to utilize HTML files for my views in order to incorporate Angular within them. However, I am facing challenges when attempting to s ...

javascripthtmlangularjsnode.jsexpress

"Error message stating 'Unresolved variable' occurs in the code while trying to assign className={styles.nameOfClass

My current task involves adjusting the style of a button in ReactJS using the "className" property. However, I encountered an error message in WebStorm stating "Unresolved variable nameOfClass," and the desired style changes did not reflect when running we ...

cssreactjstypescript

Resizing Images Responsively Using Bootstrap

I'm working on specifying image sizes for different screen sizes. I'm wondering if there are any specific Bootstrap classes that only work at certain screen sizes. If so, it would be great because then I could use something like <img class = " ...

csstwitter-bootstrapscaling

The li elements within a 960.gs layout will not extend to fill the entire width of the

I am still learning about this and I have been following some tutorials online. I managed to make the columns work with paragraph tags, but when I use ul > li tags, the image takes up the entire space. I'm not sure what's causing this issue. ...

htmlcssweb960.gs

Utilizing Selenium automation to navigate a website that features a custom jQuery plugin-checkbox functionality

Utilizing Selenium WebDriver along with JavaScript to automate the testing of a website that features a custom jquery plugin named "jcf" (JavaScript Custom Forms) for aesthetically pleasing forms. You can find more information about this plugin here. I am ...

javascriptjqueryhtmlseleniumcheckbox

Is it possible to access the chrome://webrtc-internals/ variables through an API in JavaScript?

I couldn't find any information about how to access the logged variables in chrome://webrtc-internals/ on google. There is not even a description of the graphs available there. I am specifically interested in packetsLost, googCurrentDelayMs, and goo ...

javascriptgoogle-chromewebrtcgoogle-chrome-apppeerjs

Changing class names when removing an element from an array

I have a data table where users can input information: <tbody> <tr class="wiring_details_6-73" id="wiring_rows_0"> <td colspan="2"> Wire Type: <select class="wire_selector_0" id="wiring_select_0" name="select_w ...

javascriptjqueryarraysclassrename

Is it possible to customize the appearance of HTML input fields pre-populated by the browser

My ASP.NET MVC application has a login page: <form id="account" method="post"> <h2>Use email account to log in.</h2> <hr /> <div asp-validation-summary="ModelOnly" class=& ...

htmlcssbootstrap-5

Troubleshooting issue with AngularJS $http.get function failing to show retrieved

My data is showing up when I call the URL from dataSource, but it's not displaying when I use $http.get. I am sending this data to a dx-chart using a JsonResult from my controller. Below is the code snippet that includes my AngularJS file and MVC View ...

htmlasp.net-mvcangularjshttp

What is preventing the Navbar from aligning to the right side in Bootstrap 5?

I'm trying to position only the "Account" navbar all the way on the right side using ms-auto, but it doesn't seem to be working correctly. Here's my code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="u ...

htmltwitter-bootstrapbootstrap-5

Automatically collapse the Shadcn-UI Accordion when the mouse exits

For my self-education project, I am working on building a sidebar with an accordion using Shadcn-ui, NextJS (13.4), React, and Node. Being new to these technologies, I have encountered a problem that I can't seem to solve. The sidebar expands on mous ...

javascriptnode.jsreactjsnext.js

Mapping the Way: Innovative Controls for Navigation

Currently, I am utilizing the HERE maps API for JavaScript. However, I would like to customize the design of the map controls similar to this: Below is an example for reference: HERE EXAMPLE Is it feasible to achieve this customization? ...

javascriptcssmapshere-api

How can I incorporate the 'client' application into the 'loading.js' file?

I implemented a Lottie component in my loading.js file. Utilizing the App router (Next13). This is the code for the lottie component: import { Player } from '@lottiefiles/react-lottie-player'; import LoadingLottie from '@/assets/loading.j ...

javascriptnode.jsreactjsnext.js

Retrieving all the information stored in the tables

I'm struggling with retrieving the content of my table cells. Some cells contain a hyphen (-) and if they do, I want to center the text. I'm facing difficulties with my jQuery code, particularly the if statement which always evaluates to false. ...

javascriptjquery

JavaScript Firebase: Service worker malfunctioning during navigation

I'm currently developing a website that relies on firebase messaging. To make this happen, a specialized service worker for firebase has been integrated into the site. This website functions as a webchat platform where messages are synchronized and s ...

javascriptangular-ui-routerfirebase-cloud-messagingservice-worker

The Transforming Popup completely shattered the static background

Recently, I came across a fantastic morphing modal script that I decided to incorporate into my website. Everything seemed to be working perfectly until I realized that after closing the window, my background was completely broken. If anyone has experienc ...

javascriptjqueryvelocitymorphing

Organizing various elements into separate divs with just one ajax request

I recently encountered an issue with my project involving an ajax call that was functioning correctly. $.get( 'accNoRealMovs1.jsp', {mode:"0"}, function(responseText){ $('#divAccMovementNR').html(responseTe ...

javascriptjqueryajaxdatatables

Seeking Up/Down Arrows HTML numerical input feature specifically designed for iOS devices

I am having an issue with a number input box on iOS. I am utilizing jquery, kendo mobile, and HTML5 for this particular task. While the number input displays up and down arrows in the Icenium simulator, they are not showing on the iPad. I am seeking a sol ...

ioscsshtmlinputkendo-mobile

CSS selector for the only child element without any other adjacent sibling elements that are non-space characters

Here is a snippet of my code: <!DOCTYPE html> <html> <head> <style> code { display: inline-block; padding: 0; color: red; } p > code:only-child { display: block; white-space: pre; padding: 20px; line-height: 125 ...

htmlcss