I am trying to show a loader GIF image in the div section of this html page. But I can't get it to work. The div content is hidden and the GIF image disappears.
CSS:
.loader {
background-image: url(image/Preloader_8.gif);
background-repeat: no-repeat;
height:100px;
width:200px;
}
JavaScript:
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
Html:
<body>
<div class="loader">
Loading Image
</div>
</body>
Are you using AJAX to fetch the content in div or simply .load function?
In case of .load() jQuery event,
$( ".loader" ).load( "test.html", function() {
$(".loader").fadeOut("slow");
});
In case of AJAX request, call the function loader in success event of AJAX call.
function loader() {
$(".loader").fadeOut("slow");
});
HTML
<body>
<div class="loader" style="display:none">
Loading Image
</div>
</body>
js
$(window).load(function() {
$(".loader").fadeOut("slow");
})
Please add the following script on the top of your web page
$(".loader").fadeIn();
Add loading div on top of just above script
I think the reason why your code:
$(window).load(function() {
$(".loader").fadeOut("slow");
})
didn't work is because the script is executed after the document is fully loaded.
Following code works.
if (document.readyState == 'complete') {
$(".loader").fadeOut("slow");
} else {
$(window).load(function () {
$(".loader").fadeOut("slow");
})
}
jsfiddle
In your code, the loader class is assigned to the div section, so when you trigger the fade out of the loader page, the entire div assigned to the class fade's out. So better have internal div to which the loader is assigned. This may help check out
<body>
<div class="Image">
<div class="loader">
Loading Image
</div>
</div>
</body>
Working example here
The simplest way of showing loader.gif on web page as:
<div id="divloader" class="ShowLoader">
<img id="imgUpdateProgress" class="loaderIMG" src="../../images/newloader.gif" alt="Loading ..." title="Loading ..." />
</div>
CSS code
<style>
.loaderIMG {
padding: 10px;
position: fixed;
top: 45%;
left: 45%;
width: 80px;
}
.HideLoader {
display: none;
}
</style>
jQuery code:
$(document).ready(function () {
$("#divloader").addClass("HideLoader");
});
First check that your jQuery library working or not by showing alert msg, and then check that image path from browser inspect element.
Add this code:
$(document).ready(function(){
$(".loader").fadeOut("slow");
})
jsfiddle
Related
I want to add a click event to an iframe. I used this example and got this:
$(document).ready(function () {
$('#left').bind('click', function(event) { alert('test'); });
});
<iframe src="left.html" id="left">
</iframe>
But unfortunately nothing happens.
When I test it with another element (e.g. a button), it works:
<input type="button" id="left" value="test">
You could attach the click to the iframe content:
$('iframe').load(function(){
$(this).contents().find("body").on('click', function(event) { alert('test'); });
});
Note: this will only work if both pages are in the same domain.
Live demo: http://jsfiddle.net/4HQc4/
Two solutions:
Using :after on a .iframeWrapper element
Using pointer-events:none; one the iframe
1. Using :after
use a transparent overlay ::after pseudo element with higher z-index on the iframe's wrapper DIV element. Such will help the wrapper to register the click:
jQuery(function ($) { // DOM ready
$('.iframeWrapper').on('click', function(e) {
e.preventDefault();
alert('test');
});
});
.iframeWrapper{
display:inline-block;
position:relative;
}
.iframeWrapper::after{ /* I have higher Z-index so I can catch the click! Yey */
content:"";
position:absolute;
z-index:1;
width:100%;
height:100%;
left:0;
top:0;
}
.iframeWrapper iframe{
vertical-align:top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iframeWrapper">
<iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>
2. Using pointer-events:none;
Clicks are not handleable from outside the iframe from an external resource (if the iframe is not in your domain).
You can only create that function inside your 'called into iframe' page, not from within the iframe-hosting page.
How to do it:
You can wrap your iframe into a div
make the click "go through" your iframe using CSS pointer-events:none;
target clicks with jQuery on your wrapping DIV (the iframe parent element)
jQuery(function ($) { // DOM ready
$('.iframeWrapper').on('click', function(e) {
e.preventDefault();
alert('test');
});
});
.iframeWrapper{
display:inline-block;
position:relative;
}
.iframeWrapper iframe{
vertical-align:top;
pointer-events: none; /* let any clicks go trough me */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iframeWrapper">
<iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>
NOTA BENE:
No clicks will be registered by the iframe element, so a use-case would be i.e: if by clicking the iframe you want to enlarge it full screen.... Etc...
I got it to work but only after uploading it to a host. I imagine localhost would work fine too.
outer
<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
var myFrame = document.getElementById("myFrame");
$(myFrame.contentWindow.document).find("div").on("click", function () { alert("clicked"); });
});
</script>
<body>
<iframe id="myFrame" src="inner.htm"></iframe>
</body>
</html>
inner
<html>
<head>
<style>
div {
padding:2px;
border:1px solid black;
display:inline-block;
}
</style>
</head>
<body>
<div>Click Me</div>
</body>
</html>
Pure Javascript
Not my solution but only this works well.
let myConfObj = {
iframeMouseOver : false
}
window.addEventListener('blur',function(){
if(myConfObj.iframeMouseOver){
console.log('Wow! Iframe Click!');
}
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){
myConfObj.iframeMouseOver = true;
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseout',function(){
myConfObj.iframeMouseOver = false;
});
$(document).ready(function () {
$('#left').click(function(event) { alert('test'); });
});
<iframe src="left.html" id="left">Your Browser Does Not Support iframes</iframe>
The script would have to be ran entirely from the iframe. I would recommend a different method of calling content, such as php.
iframes aren't really worth the hassle.
The actual problem is that, the click event does not bind to the DOM of the iframe and bind() is deprecated, use .on() to bind the event. Try with the following codes and you will find the borders of the iframe clickable getting that alert.
$('#left').on('click', function(event) { alert('test'); });
Demo of that Issue
So how to get it done?
How you should do is, create a function on iframe page, and call that function from that iframe page.
I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html
From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>
Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>
Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});
I loading external website (my own) using Jquery.
<div id="siteloader"><center>
<img style="width: 100px; height: 100px;" src="http://seafood.greenpeaceusa.org/images/spinner.gif" alt="Mountain View" /></center></div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$( document ).ready(function() {
$("#siteloader").html('<object "width:100%; height:2000px; data="http://example.com/findex.php">');
});
</scirpt>
As you can see right now, I am loading spinner gif inside the div and replacing the content of the div with the external website html, However it is replacing it on the moment it is downloading the website can I make it wait untill the website is downloaded and only then replace the html ?
By the way, .load method is not working for me for some reason =\
Your object replaces content of the div at document.ready. It should be done when the object is loaded.
<script>
$( document ).ready(function() {
//$("#siteloader").html('<object "width:100%; height:2000px; data="http://example.com/findex.php">'); syntax errors here
//this doesn't work as well
$('<object "width:100%; height:2000px; data="http://example.com/findex.php">')
.load(function(){
$("#siteloader").empty().append(this);
});
});
</script>
Fixed working script:
<script>
$( document ).ready(function() {
/*
//wrong again spinner disappear before object loaded
$('<object style="width:100%; height:400px; display:none;" data="http://www.w3schools.com/tags/helloworld.swf" />')
.appendTo($("#siteloader"))
.after(function () {
console.log('loaded');
$(this).show().siblings().each(function () {
$(this).remove();
});
});
*/
//and this work for sure
var obj = document.createElement('object');
obj.onload = function () {
console.log('loaded');
$(this).css({ width: '100%', height: '400px' }).show()
.siblings().each(function () {
$(this).remove();
});
};
obj.data = 'json.php';
$(obj).appendTo('#siteloader');
});
</script>
I hope it will work with your data as well. This looks ugly (mix jquery and pure JS) but this is the only found way to make it work. $(obj).appendTo('#siteloader') triggers the load.
Just in case, PHP used:
<?php
usleep(10000000);
echo '{"name":"qwas","qty":10,"curr":"'.date('h:i:s').'"}';
?>
Is there a way to show a loading spinner while my javascript is running?
I want toshow something to the user while the page is waiting.....
This is taking about 5-6 secs..so I want to show a spinner or box while its waiting
$.each(ARRAY, function(key, item){
//IM DOING SOME LOGIC HERE
});
Add a hidden loading image in your page, display it when you start you function and hide it again when the function completes.
<img src="loading image " id="loading">
function(){
$("#loading").show();
your logic
$("#loading").hide();
}
This is just the first thing that came to mind. Probably not the best solution. But it does the job.. You could define a loading div and hide it by default. Then, while the each is doing its thing, show the loading div. So something like:
CSS:
.hidden{display:none;}
HTML:
<div class="loading hidden"></div>
JavaScript:
function(){
$('.loading').removeClass('hidden');
$.each(ARRAY, function(key, item){
});
}
Try this. Works for me with a bootstrap 5.2 spinner, with the following referenced in the html:
bootstrap 5.2 stylesheet
referencing the bootstrap bundle script
jquery script
$function doLogic() {
$("#loadingImg").css('visibility','visible');
setTimeout(function() { // allow spinner to load before work starts
// logic here to load page
$("#loadingImg").hide();
},5000); //5000ms = 5secs
}
#loadingImg {
width: 3rem;
height: 3rem;
align-self: center;
visibility: hidden;
}
<div id="spinnerContainer">
<div id="loadingImg" class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
This may be helpful for AJAX logic:
<img id="loadingImg" src="loding.gif"/>
$('#loadingImg')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
The ajaxStart/ajaxStop functions will fire whenever you do any AJAX calls and displays the loading spinner.
Alternatively, this may be helpful too:
function doLogic() {
$('#loadingImg').show();
setTimeout(function() { // allow spinner to load before work starts
// logic here
},500);
$('#loadingImg').hide();
}
I have two large image files in a div on a page that take several seconds to load. How can I hide the loading content while a "loading gif" appears and then have the content appear once it has fully loaded?
I don't really know anything about javascript but I tried using this code. It did half of what I wanted it to do. The "loading gif" worked but the problem was that the content was visible as it was loading.
http://aaron-graham.com/test2.html
<div id="loading" style="position:absolute; width:95%; text-align:center; top:300px;">
<img src="img/parallax/ajax-loader.gif" border=0>
</div>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
Any help would be greatly appreciated!
Use jquery, with code like:
$(document).ready(function(){
$('#pic1').attr('src','http://nyquil.org/uploads/IndianHeadTestPattern16x9.png');
});
With the html like:
<img id="pic1" />
It works by running when document's ready function is called (which is called after the DOM and other resources have been constructed), then it will assign the img's src attribute with the image's url you want.
Change the nyquil.org url to the image you want, and add as many as needed (just don't go overboard ;). Tested Firefox 3/chrome 10.
Here is the demo: http://jsfiddle.net/mazzzzz/Rs8Y9/1/
Working off your HTML structure I added a notifyLoaded class for the two images so you can watch for when both have loaded via an onload event. Since css background images don't get that event I've created a hidden img using the background's path so we can test when that image is loaded
HTML:
<div id="loading">
<img src="http://aaron-graham.com/img/parallax/ajax-loader.gif" border="0" />
</div>
<div id="vertical">
<div>
<div class="panel">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/tile3.png" />
</div>
</div>
</div>
<div id="imgLoader">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/deepspace3.jpg" alt="" />
</div>
You have reference to jQuery in your page already so I've replaced your script to the following.
jQuery:
$(document).ready(function() {
var $vertical = $('#vertical');
var $imgs = $('.notifyLoaded');
var imgCount = $imgs.length;
var imgLoadedCount = 0;
$vertical.backgroundparallax(); // Activate BG Parallax plugin
$imgs.load(function() {
console.log(this);
imgLoadedCount++;
if (imgCount == imgLoadedCount) {
// images are loaded and ready to display
$vertical.show();
// hide loading animation
$('#loading').hide();
}
});
});
I've also set #Vertical to a default display:none; which gets changed when images have loaded
CSS:
body {background-color:black;}
#loading {position:absolute;width:95%;text-align:center;top:300px;}
#vertical {display:none;background-image: url('http://aaron-graham.com/img/parallax/deepspace3.jpg');background-position: 0 0;height: 650px;width: 900px;overflow: auto;margin:35px auto auto auto;}
#vertical > div {margin: 0;color: White;}
#vertical .panel {padding: 100px 5%;margin-left:40px;height: 3363px;}
#imgLoader {display:none;}