I want to show a Loading image when the page is not loaded yet. Before loading the page it shows a blank white page to the user. So, i want to remove the white blank space.
The page makes too many database hits, so it loads a bit slowly.
I've checked this post, but that doesn't work.
I've checked by adding <![CDATA[ infront of the script, as it stated in the blogpost.
That doesn't work.
Finally i've landed in Asking a Question, though it is a duplicate.
Here is my script finally.
<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(window).load(function () {
$("#divLoading").fadeOut("slow");
});
// ]]>
</script>
and in the body
<body style="background-color: white;">
<div id='divLoading'>
<div class="loading" align="center" id="divImageLoader">
<img src="../../ItemSelectorImages/ajax-loader_bluish.gif" alt="Loading..."/> Loading
</div>
</div>
</body>
The CSS of loading is:
.loading
{
font-family: Arial;
font-size: 10pt;
padding:20px;
position: fixed;
background-color: #ffffff;
z-index: 99999;
border-radius:5px;
}
What was wrong with my code ? Can someone point out or give working solution.
Cheers !!!
Karthik
I got the solution to this question.
The problem is not with the height of the div element nor the Images/CSS problem.
The problem is with another script that is executed right after the window load completes, the script includes the DOM ready and remaining javascript function(s).
I've removed the next script that is executed after the window.load and placed after end of the body tag.
<body style="background-color: white;">
<div id='divLoading'>
<div class="loading" align="center" id="divImageLoader">
<img src="../../ItemSelectorImages/ajax-loader_bluish.gif" alt="Loading..."/> Loading
</div>
</div>
</body>
//The following second script is placed here so as to load after the body load is complete.
<script>
includes DOM Ready, and some javascript functions to be called.
</script>
Assumption: I think after the $(window).load(function () { script is done, there should not be any other scripts further running.
Thanks to all the guys who commented.
If my assumption is wrong, please mention what the real problem that stopped the loading image to show up.
Related
I'm using a code for a GPA Calculator widget to run on my website, it was working fine, but now, it seems that it is changed from the source, and became unresponsive.
I've asked them for a new code with no response from their side.
Now, I'm trying to fix this from my side, and need your help!
Code:
<!-- Calculators.tech Widget -->
<div id="ppsWidgetCode" data-calculator-slug="gpa-calculator" data-calculator-keyword="GPA Calculator" data-config=""></div>
<div style="text-align: center; font-size:12px; color:#333;"><p>GPA Calculator provided by calculators.tech</p></div>
<script type="text/javascript" src="https://www.calculators.tech/assets/lib/js/calculator-widget.js"></script>
Here is how it looks like:
Previously, it was more like this:
I don't want to have this scroll option, I want it to show a complete shape of the calculator.
Is there a way to edit this from my side till I get any response from the calculator developer?
Looks like they have removed height attribute on iframe. Try this script below which tries to modify height on iframe when it finishes loading
<!-- Calculators.tech Widget -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
function renderCalc() {
setTimeout(function() {
$('iframe#ifr').css('height', '100%');
}, 3000)
}
</script>
<div id="ppsWidgetCode" data-calculator-slug="gpa-calculator" data-calculator-keyword="GPA Calculator" data-config=""></div>
<div style="text-align: center; font-size:12px; color:#333;">
<p>GPA Calculator provided by calculators.tech</p>
</div>
<script type="text/javascript" src="https://www.calculators.tech/assets/lib/js/calculator-widget.js" onload="renderCalc()"></script>
onload event fires when DOM elements gets loaded but still there is no way to find when the assets get loaded like images etc of the document embedded in . For mitigating that issue the timer of 3 sec is used
I'm pretty new to JS and jQuery, and i'm trying to make a subtitles player using them. Unfortunately, i'm stuck in a very early stage.
When I'm trying to select some HTML elements through a .js file, it acts like it can't locate the element I'm asking for, and nothing happens. If I try to alert the value or the HTML of the elements, it alerts undefined.
So this is the code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="jquery-2.1.3.min.js"></script>
<script src="script.js"></script>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
#wrapper{
width: 150px;
text-align: center;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#75bdd1), color-stop(14%,#75bdd1), color-stop(100%,#2294b3));
padding: 10px 2px;
}
h3{
font-family: Arial, Helvetica, sans-serif;
}
img{
width: 50px;
margin: 0 auto;
}
input{
display: none;
}
</style>
</head>
<body>
<div id="wrapper">
<h3>Select subtitles file</h3>
<img src="browse.png" alt="browse">
</div>
<input type="file" accept=".srt" id="file">
</body>
</html>
script.js
$("div").click(function () {
console.log('loaded');
});
Thanks.
Because your script tag is above the HTML defining the elements that it acts on, it can't find them because they don't exist as of when that code runs. Here's the order in which things are happening in your page:
The html and head elements are created
The meta element is created and its content noted by the parser
The script element for jQuery is created
The parser stops and waits for the jQuery file to load
Once loaded, the jQuery file is executed
Parsing continues
The script element for your code is created
The parser stops and waits for your file to load
Once loaded, your script code is run — and doesn't find any elements, because there are no div elements yet
Parsing continues
The browser finishes parsing and building the page, which includes creating the elements you're trying to access in your script
Ways to correct it:
Move the script elements to the very end, just before the closing </body> tag, so all of the elements exist before your code runs. Barring a good reason not to do this, this is usually the best solution.
Use jQuery's ready feature.
Use the defer attribute on the script element, but beware that not all browsers support it yet.
But again, if you control where the script elements go, #1 is usually your best bet.
When you call the .click() method the dom is not fully loaded.
You have to wait till everything in DOM is loaded.So you have to change your script.js to this:
$(document).ready(function(){
$("div").click(function () {
console.log('loaded');
});
});
You should execute your script after DOM Ready event. In jquery it makes so:
$(function(){
$("div").click(function () {
console.log('loaded');
})
});
$(document).on('click', "element" , function (ev) {
console.log('loaded');
})
})
I have db query in my page which fetches a lot of data at time and shows it on the page. FYI, I can not use pagination. So I just want to show a loader image till the time the query fetches all the data and show on the UI. I have tried this code for example, but its not working,
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('processing.gif') 50% 50% no-repeat rgb(249,249,249);
}
</style>
</head>
<body>
<div id="page">
<div class="loader"></div>
<cfquery datasource="dsn_spinlife_prod_new" name="qryGetProdList">
SELECT *
FROM tbl_products;
</cfquery>
</div>
</body>
</html>
But its not working , still firefox show a blank white page while the page loads.I have tried with document.ready also, not working. I want the loader image to be shown , How it can be done, I think i am missing something .
The problem is most likely that the browser doesn't even get your page until all the slow DB work has been done. You could try putting a <cfflush> into the script above after your loader div. That'll cause CF to send back everything generated up to that point back to the browser at that point.
Bear in mind that once you've called <cfflush> you can no longer set cookies or send redirects, so you'll want to examine your code to ensure that there's none of that later on in the code.
The other approach would be to generate a page with nothing but a placeholder in it and use jQuery to load in the results as a separate request:
<script>
$('#results').load('results.cfm',function(){$('.loader').hide()});
</script>
<div class="loader">Loading...</div>
<div id="results"></div>
Where results.cfm runs the query and generates the HTML necessary to complete the page.
I am trying to get my code working with a small Iframe I made. The site where it has to be used is running on the Enjin network and it doesn't allow PHP so I had to use an Iframe to get the PHP to work. It now displays a loading gif while it is loading the data and that works perfectly fine.
However,
What I want is this loading gif and Slimscroll to work. I can't get these 2 to work together nor can I get Slimscroll to work. I have to use a limited HTML editor which allows the use of scripts (I believe) but following the steps I cannot get it working!
Here's my code
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="libs/jquery.slimscroll.min.js"></script>
<script>
$(function(){
$('#inner-content-div').slimScroll({
height: '250px'
});
});
</script>
<div id="loadImg" style="background-image: url(http://sander.server2.tmg-clan.com/loading.gif);
background-repeat: no-repeat;
background-position: center;
background-size: 64px 64px;
">
<div name="scroll" onload="document.getElementById('inner-content-div');">
<iframe border="0" name="iframe" src="http://sander.server2.tmg-clan.com" onload="document.getElementById('loadImg').style.backgroundImage='none';" scrolling="non></iframe>
</div>
</div>
What am I doing wrong? What do I need to add? the website it is running on is:
The Brothers Production network and my code is the top bar on the right!
Please help me out!
When a page loads on my site, the HTML appears before the javascript, which leads to a flicker when the javascript loads. The answer to this stackoverflow post gave a great solution. But I would like to load at least some of the HTML before the Javascript so that the user is not faced with a blank page during a slow connection. For example, I would like to load the header immediately, but wait to load the HTML for the javascript enhanced accordion until after the javascript loads. Any suggestions?
Here's the code that I borrowed from the answer linked above:
CSS:
#hideAll
{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: white;
z-index: 99; /* Higher than anything else in the document */
}
HTML:
<div style="display: none" id="hideAll"> </div>
Javascript
window.onload = function()
{ document.getElementById("hideAll").style.display = "none"; }
<script type="text/javascript">
document.getElementById("hideAll").style.display = "block";
</script>
I'd suggest that you define the base/JavaScript-enabled styles of elements you want to display with CSS in the regular style block:
<style type="text/css">
#javaScriptAccordion {
display: none;
}
</style>
And then use the noscript tags (in the head) to amend this in the absence of JavaScript:
<noscript>
<style type="text/css>
#javaScriptAccordion {
display: block;
}
</style>
</noscript>
This ensures that the content is hidden on document load, preventing the flash, but visible to those users that have JavaScript disabled.
The above has been amended to prevent the 'flash of no content' (as described by #Josh3736 in his answer), and now uses opacity to hide the content:
<style type="text/css">
#elementToShowWithJavaScript {
opacity: 0.001;
width: 50%;
margin: 0 auto;
padding: 0.5em;
border-radius: 1em 0;
border: 5px solid #ccc;
}
</style>
<noscript>
<style type="text/css">
#elementToShowWithJavaScript {
opacity: 1;
}
</style>
</noscript>
Live demo.
I'm not, unfortunately, entirely sure that I understand your question. Which leaves me proposing a solution for the question I think you asked (all I can offer, in excuse, is that it's early in the UK. And I'm not awake by choice...sigh); if there is anything further that I'm missing (or I'm answering the wrong question entirely) please leave a comment, and I'll try to be more useful.
The hack in the linked question is—in my opinion—very poor advice. In this case, it is a better idea to include some script directly following your accordion elements.
<div id="accordion">...</div>
<script type="text/javascript">...</script>
However, inline script intermingled with your HTML markup is a Bad Idea and should be avoided as much as possible. For that reason, it is ideal to include inline only a function call to a function declared in your external script file. (When you reference an external script (<script src="...">), the rendering of your page will pause until it has loaded.)
<html>
<head>
<script type="text/javascript" src="script.js"></script> <!-- renderAccordion() defined in this file -->
</head>
<body>
...
<div id="accordion">...</div>
<script type="text/javascript">renderAccordion();</script>
...
</body>
</html>
Of course, the correct way to do this is to just attach to the DOM ready event from script.js and not use any inline script at all. This does, however, open up the possibility of a content flash on extremely slow connections and/or very large documents where downloading all of the HTML itself takes several seconds. It is, however, a much cleaner approach – your script is guaranteed to be loaded before anything is rendered; the only question is how long it takes for DOM ready. Using jQuery, in script.js:
$(document).ready(function() {
// Do whatever with your accordion here -- this is guaranteed to execute
// after the DOM is completely loaded, so the fact that this script is
// referenced from your document's <head> does not matter.
});
Clever use of <style> and <noscript> does a a good job of guaranteeing that there is no flash of all the content in your accordion; however, with that method there will be the opposite effect – there will be a flash of no content.
As the page loads, your accordion will be completely hidden (display:none;), then once your script finally executes and sets display back to block, the accordion will suddenly materialize and push down everything below it. This may or may not be acceptable – there won't be as much movement, but things will still have to jump after they've initially rendered.
At any rate, don't wait until onload to render your accordion. onload doesn't fire until everything—including all images— have fully loaded. There's no reason to wait for images to load; you want to render your accordion as soon as possible.