Develop Reference

how use loading gif in apex pages?

i want use loading gif in apex pages when doing a query:
i have a button and behind of it i use dynamic action for executing a query, in attributes of page in javascript section, i wrote these:
https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js
and in css section, in inline, i wrote these:
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(#APP_IMAGES#Preloader_1.gif) center no-repeat #fff;
}
and finally, behind of my button, in dynamic action , i created a true action (execute javascript code) and i wrote these:
$(window).load(function() {
$(".se-pre-con").fadeOut("slow");;
});
after that, i created another true action (execute pl/sql code) for doing my query.
i expected when i clicked button, i saw gif loading until my query went done, but i didnt it and i havent any error.
what is my mistake?
thank you

Did you know there's a built-in API for this? Just call apex.util.showSpinner: https://docs.oracle.com/en/database/oracle/application-express/19.2/aexjs/apex.util.html#.showSpinner
You can then call remove on the object returned.
Here's an example from the doc:
var lSpinner$ = apex.util.showSpinner($( "#container_id"));
// Then later...
lSpinner$.remove();

Display loader on load event and remove the loader when background image is loaded

I have two divs.
1 : where background image is loaded
2 : where loader gif is loaded.
what I want is , when there is a window.load() event is called then loader gif should displayed , and when background image is fully loaded , then loader gif should be removed. that's what I want to achieve.
$(window).load(function (){
$('.background_image_div').load(function(){
$('.gif_loader_image').hide();
});
});
// this code is not working.
.background_image_div{
background: url(http://www.banneredge.com/images/portfolio.jpg);
width: 600px;
height: 300px;
margin: 0 auto;
border: thin black solid;
z-index: 900;
}
.gif_loader_image{
position: absolute;
width: 50px;
height: 50px;
background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif);
// border: thin red solid;
left: 55%;
bottom: 15%;
z-index: 1001;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gif_loader_image"></div>
<div class="background_image_div">
</div>
Thank you.

instead of $(window).load(function (){ do a $( document ).ready(function() { as,
$( document ).ready(function() {
// Handler for .ready() called.
$('.background_image_div').load(function(){
$('.gif_loader_image').hide();
});
});
EDIT Caveats of the load event when used with images as taken from here, .load API
EDIT 2 try a poller, keep polling and check for the image inside the div using .length > 0. Do some changes to your html,
Keep a div and then an image tag inside it with this structure, <div id="backgroundImageDiv"><img src="whatEverTheURLIs" id="backgroundImageID"></div>
Inside your poller check if $("#backgroundImageDiv > #backgroundImageID").length() > 0
If the condition satisfies, hide the gif loader using .hide(). Check for the syntaxes please.
By poller I mean an interval timer.

You can do as like this way.
Just see this link
<div class="feature"><div class="loader"><img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif"></div></div>
$(function(){
var bgimage = new Image();
bgimage.src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg";
$(bgimage).load(function(){
$(".feature").css("background-image","url("+$(this).attr("src")+")").fadeIn(2000);
$(".loader").hide();
});
});
http://jsfiddle.net/n4d9xxon

You can try like this :
$(document).ready(function (){
$('.gif_loader_image').fadeOut(1000);
});
body{
background: url(http://www.banneredge.com/images/portfolio.jpg);
width: 100%;
height: auto;
}
.gif_loader_image{
position: fixed;
width: 100%;
height: 100%;
left: 0px;
bottom: 0px;
z-index: 1001;
background:rgba(0,0,0,.8);
text-align:center;
}
.gif_loader_image img{
width:30px;
margin-top:40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gif_loader_image">
<img src="https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif" alt="Loader..."/>
</div>
<div class="background_image_div"></div>

The main problem is that your $(window).load doesn't even fire
Why
This won't work since the .load() method was fully removed by jQuery 3 and since you are working with the version 3.1.1 it's not a surprise that your code doesn't work. You have to use now the .on() method to achieve the same effect
So
$(window).load(function (){
$('.background_image_div').load(function(){
$('.gif_loader_image').hide();
});
});
would turn into
$(window).on('load', function (){
$('.background_image_div').on('load', function(){
$('.gif_loader_image').hide();
});
});
Notice
Since you have already the $(window).load function at the beginning you don't have to define it again for your background image because this method will only be fired when all images are fully loaded so I think in your case this should also do the job.
jQuery
$(window).on('load', function () {
$('.gif_loader_image').hide();
});

Jquery show not working with effects

I'm trying to show a fixed div using the show function of jquery. The show function works, but not when I try to add an effect with jquery ui. I have both jquery and jquery ui linked in an external file via a php include. When I use the inspector in chrome, I can see the blue box of the div I'm trying to show when I click the show button, yet the page remains unchanged.
This is my html:
<link rel="stylesheet" href="js/jquery-ui.min.css">
<script src='js/jquery-2.1.1.min.js'></script>
<script src="js/jquery-ui.min.js"></script>
<div class="twitterbar" id="baremily">
<a class="twitter-timeline" href="https://twitter.com/EmilyPalmaers" data-widget-id="number">Tweets by #EmilyPalmaers</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="twitterbar" id="barcharlotte">
<a class="twitter-timeline" href="https://twitter.com/CPalmaers" data-widget-id="number">Tweets by #CPalmaers</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
This is my jquery:
<script>
$(document).ready(function()
{
$("#twitteremily").click(function(e)
{
e.preventDefault();
if( $('#baremily').is(':visible') ) {
// it's visible, do something
$('#baremily').hide("blind");
}
else {
// it's not visible so do something else
if ($('#barcharlotte').is(':visible'))
$('#barcharlotte').hide("blind");
$('#baremily').show("blind");
}
});
$("#twittercharlotte").click(function(e)
{
e.preventDefault();
if( $('#barcharlotte').is(':visible') ) {
// it's visible, do something
$('#barcharlotte').hide("blind");
}
else {
// it's not visible so do something else
if ($('#baremily').is(':visible'))
$('#baremily').hide("blind");
$('#barcharlotte').show("blind");
}
});
}
);
</script>
and this is the css (note, the div I'm trying to show has a class and ID tag:
.twitterbar
{
position: fixed;
display: none;
top: 35%;
left: 50%;
margin-top: -10em;
margin-left: -10em;
z-index: 99999;
height: 20em;
width: 20em;
}
#media (min-width:961px) {
.twitterbar
{
top:50%;
margin-top: -16rem;
margin-left: -16rem;
height: 32rem;
width: 32rem;
}
}
I'm pretty much clueless at the moment, thanks in advance

http://jsfiddle.net/a9dbeo1o/
Recheck your script references.
To make sure jQuery is ready, try:
if ( jQuery.isReady ) {
alert('jQuery is ready');
}
Edit:
Just a note: I also see you have your jquery css file inside your js folder.
Edit 2:
Updated fiddle:
http://jsfiddle.net/a9dbeo1o/2/

Blocking all UI using pure JavaScript

How to block all UI things in a webpage until all JavaScript files including jquery.js are loaded completely. Is there any possibility to do it using only JavaScript?

You can add a css mask with z-index set to higher than all your other ui elements on the page
In your page
<body>
<div class="mask"></div>
..
..
</body>
CSS
.mask {
position: fixed;
top: 0px;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background: #666;
overflow: hidden;
opacity: 0.7;
z-index: 99;
}
Once your jQuery is loaded, hide this mask.
$( document ).ready(function() {
$('.mask').hide();
});

Add some kind of this snippet at the very top of you body:
<div class="loading-overlay" id="loading">
<div class="loading">Loading..</div>
</div>
and this styles inline in HEAD:
<style>.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
z-index: 1000;
}
.loading {
font-size: 20px;
text-align: center;
color: #FFF;
position: absolute;
top: 50%;
left: 0;
width: 100%;
}</style>
Then after all javascript files execute this code:
document.getElementById('loading').style.display = 'none';
Make sure z-index property of the overlay is high enough to cover everything on the page.
However this solution is not reliable if some of your heavy scripts are loaded asynchronously.
Example: http://jsfiddle.net/ucPLW/

Statically listing the script tags in the head will ensure they are loaded before the DOM. This has been the case for as long as I can remember.
<html>
<head>
<!-- insert your script tags here -->
</head>
<body>
<!-- your DOM here -->
</body>
</html>
Its recommended to load the scripts at the bottom of the page instead so I'm not sure your motivations for this.

If by "UI Things," you mean the DOM, then you can put your javascript either at the end of your html like so:
<html>
<head>...</head>
<body>
<script>
// This javascript will execute after the HTML has loaded
</script>
</body>
</html>
Or if you want to use JQuery then you can put your UI code in a document ready function like this:
$(document).ready(function() {
// This javascript will also execute after the HTML has loaded
});
Best of Luck.

You can use the $(window).load() event for your code since this happens after the page is fully loaded and all the code in the various $(document).ready() handlers have finished running.
$(window).load(function(){
//your code here
});

$(window).load does not display images in Firefox

I am trying to write a script which displays a loader gif images while the image loads, but none of the images in the page in firefox after including the script. It works fine in chrome. I have included the following code.
Javascript:
<script>
$(window).load(function() {
$('#loader').hide();
$('#best').fadeIn();
});
</script>
HTML:
<body>
<div id="loader"></div>
<div id="best">
<!-- Contents of the page here -->
</div>
</body>
CSS:
#loader {
background: url('img/19-0.gif');
height: 95px;
width: 95px;
position: relative;
top: 50%;
left: 50%;
margin-top: 15em;
margin-left: 13em;
}
#best {
display: none;
}
Is there any problems in my code or should I try an alternative approach?

Try this:
$(document).ready(function() {
$('#loader').hide();
$('#best').fadeIn();
});

Use
$('document').on("load", function() {
});
instead of $(window).load().
Source: http://api.jquery.com/on/

I hope you know, that for security reasons Firefox prevents user from loading local scripts and files loaded by scripts? Try using a local webserver instead.