I want to show ajax loader when my website is fully loaded. i'm using the following codes but it's not working.
<div style="display:none" id="divloader"><img src="loading.gif" /></div>
$(function() {
$(".changepass").click(function() {
$("#divloader").show();
$(".block1").load("index.php", function(){ $("#divloader").hide(); });
return false;
});
});
I've fixed all typo error/ syntax error . But It's not working yet. Is there anyone who has working example ?
syntax error in your code
at this line $("#dvloader").show(); use $("#divloader").show();
<div style="display:none" id="divloader"><img src="loading.gif" /></div>
and
$(function() {
$(".changepass").click(function() {
$("#divloader").show();
$(".block1").load("views/index.php", function(){ $("#divloader").hide(); });
return false;
});
});
Related
I'm trying to load an element only after the img element has been loaded, but I've tried everything I can think of and nothing is working. Right now I'm trying to see where the code stops working and I found that the alert I set up isn't running after the line I need the code to execute from.
$img = $('#picture');
function bubbleOnLoad() {
$(document).ready(function() {
$img.load(function(){
alert('document loaded')
$('#left-bubble').show();
})
})
The $img is defined within a function. The alert works at the document.ready line but not after the $img.load. I have tried to add eventlisteners, jquery .on, .load, and a bunch of others. I'm also calling the function to run within my init function. Can someone explain to me why nothing is working?
function choosePic()
$('.speechbubble').hide();
$('#picture').remove();
var randomNum = Math.floor(Math.random() * samplePics.length);
var img = new Image();
img.onload = function() {
$('.playing-field').prepend(img);
handleImageLoad();
}
img.src = samplePics[randomNum];
img.id = "picture";
}
var samplePics =
"assets/images/barack-obama.jpg",
"assets/images/donald-trump_3.jpg",
"assets/images/dt-2.jpg",
"assets/images/bill-clinton.jpg",
"assets/images/Rose-Byrne.jpg",
"assets/images/pic.jpeg",
"assets/images/priest.jpg",
"assets/images/tb.jpg",
"assets/images/test.jpg",
"assets/images/amy-poehler.jpg",
"assets/images/stephen-colbert.jpg",
"assets/images/aziz-ansari.jpg"
];
You had some syntax errors in your code which I corrected and came up with this:
function bubbleOnLoad() {
$img = $('#picture');
$img.load(function () {
alert('document loaded');
$('#left-bubble').show();
});
}
$(document).ready(function () {
bubbleOnLoad();
});
Here is the JSFiddle demo
In you code you are not even telling the browser it's supposed to run a code after image load. you should do something like this:
$(function(){
// DOM Content is ready, let's interact with it.
$('#picture').attr('src', 'image.jpg').load(function() {
// run code
alert('Image Loaded');
});
});
Also according to docs a common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
Try this jQuery plugin waitForImages
https://github.com/alexanderdickson/waitForImages
//Javascript/jQuery
$(document).ready(function(){
var counter = 0,totalImages= $('#preloader').find('img').length;
$('#preloader').find('img').waitForImages(function() {
//fires for all images waiting for the last one.
if (++counter == totalImages) {
$('#preloader').hide();
yourCallBack();
}
});
});
/*css*/
#preloader{
position:absolute;
top:-100px;/*dont put in DOM*/
}
#preloader > img{
width:1px;
height:1px;
}
<!--HTML [add the plugin after jQuery] -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.waitforimages/1.5.0/jquery.waitforimages.min.js" ></script>
<!--HTML [after body start] -->
<div id=preloader>
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.png" />
<img src="4.gif" />
<img src="5.jpg" />
</div>
You can only access the HTML element after it was created in DOM.
Also you need to check if the image was loaded before showing.
Thus your code need to look something as below:
$(document).ready(function() {
bubbleOnLoad();
});
function bubbleOnLoad() {
var newSrc = "https://lh5.googleusercontent.com/-lFNPp0DRjgY/AAAAAAAAAAI/AAAAAAAAAD8/Fi3WUhXGOY0/photo.jpg?sz=328";
$img = $('#picture');
$img.attr('src', newSrc) //Set the source so it begins fetching
.each(function() {
if(this.complete) {
alert('image loaded')
$('#left-bubble').show();
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left-bubble" style="display:none">
<img id="picture"/>
</div>
I'm trying to implement a simple functionality using the hover property in jQuery. When I hover on the div, some text must be displayed in the span element. That is pretty much the concept.
<script>
$(".logo").hover(
function() { $("#span_hover").html("Please visit http://www.gmu.edu for more information.") },
function() { $("#span_hover").html(""); } );
</script>
<div class="logo"><img src="images/GMU_logo" height="100" width="150" /></div>
<span id="span_hover" style="position:fixed; bottom:5px; right:150px;"></span>
This code is not working! Can someone enlighten me?
Change your code like this way:
$(document).ready(function() {
$(".logo").hover(
function() {
$("#span_hover").html("Please visit http://www.gmu.edu for more information.");
},
function() {
$("#span_hover").html("");
}
);
});
With $(document).ready(...); your javascript code will wait for DOM and if it's completely loaded it will start.
http://jsfiddle.net/8as30y06/
Your script does actually work: http://jsfiddle.net/g2n403zs/ . Are you sure you are loading jquery before you are calling it's functions? What does the error console say?
$(".logo").hover(
function() { $("#span_hover").html("Please visit http://www.gmu.edu for more information.") },
function() { $("#span_hover").html(""); } );
This seems to work ( you were missing a semicolon)
Here is fiddle:
jsFiddle
$(".logo").hover(function() {
$("#span_hover").html("Please visit http://www.gmu.edu for more information."); },
function() { $("#span_hover").html(""); });
I am refreshing an iframe on my page when someone clicks on an image with this code:
$("img").click(function() {
$('#space iframe').attr('src', function(i, val){ return val; });
openBox();
});
But I only want to execute openBox() function after the iframe is done refreshing.
How can I achieve something like that?
Using jQuery:
$('#frameId').on('load', function() {
//code to execute after frame loaded
});
Using vanilla JavaScript:
document.getElementById('frameId').addEventListener('load', function() {
//code to execute after frame loaded
});
While this isn't exactly your problem, here is how you listen for an load event on an iFrame.
HTML
<iframe id="frame"></iframe>
<button id="loadFrame">load frame</button>
JS
$("#loadFrame").click(function () {
$("#frame").attr("src", "http://www.google.com");
$("#frame").on("load", function () {
alert("ad");
});
});
Fiddle: http://jsfiddle.net/7RL35/4/
I am loading another page in to a div with the help of this jQuery code:
$('#maildiv').load('reports/mail_report.php');
The load is taking some time. Meanwhile I want to show a loading image. When the file message is loaded the loading image should be hidden.
How can I do this?
I tried with:
function mail() {
$("#mailimg").show();
$('#maildiv').load('reports/mail_report.php') {
$("#mailimg").fadeOut("10000");
$('#maildiv').fadeOut("10000");
}
}
<input type="button" class='button green' value="Mail Report" name="" id="" Onclick='mail();return false;'/>
<img id="mailimg" style='display:none;' src='img/loading.gif' width='20' height='20'>
<div id="maildiv" style="color:red;"> </div>
Use the .load() complete callback to hide the load image.
Another point is the loaded div maildiv, why do you want to hide it using $('#maildiv').fadeOut("10000"). I think you need to use show it using $('#maildiv').fadeIn("10000")
function mail() {
$("#mailimg").show();
$('#maildiv').load('reports/mail_report.php', function() {
$("#mailimg").fadeOut("10000");
$('#maildiv').fadeOut("10000");
})
}
This is generic and should solve it for this issue.
//Do what you have to before its starts
$('#whereitstobeloads').load('filethatstobeloaded', function() {
//What you want to do when its loaded
});
It looks like you've got the right idea - using a callback function of the load - however your syntax is incorrect. Try this:
function mail() {
$('#mailimg').show();
$('#maildiv').load(
'reports/mail_report.php'),
function() {
$('#mailimg').fadeOut("10000");
$('#maildiv').fadeOut("10000");
}
}
}
Try this:
function mail() {
$("#mailimg").css('display','block');
$('#maildiv').load('reports/mail_report.php', function(){
$('#mailimg').animate({
opacity: 0.0
}, 1000, 'linear', function(){
$('#maildiv').animate({
opacity: 1.0
}, 1000, 'linear');
});
});
}
I updated Colorbox.min.js file from v1.3.19 to v1.4.6 and some of my colorboxes doesn't work. I don't get any error on page and Chrome's console.
I checked for changelog but I didn't find the anser. Can you help please?
(I use jQuery 1.7.2)
This doesn't work:
e-mail
function emailDialog(){
$.fn.colorbox({
width:"700px", height:"550px",
iframe:true, href:"/contact",
opacity:0.6
});
}
This works well:
<a href="http://example.com/1.jpeg" class="colorbox-avatar" title="some title" rel="nofollow" >photo</a>
$(document).ready(function() {
$(".colorbox-avatar").colorbox({
rel:'colorbox-avatar',
scrolling: false,
current: "",
slideshow:true, slideshowAuto:false,
opacity:0.6,
width:"60%" , height:"60%"
});
}
call it without the .fn ... so $.colorbox({...})
($.fn is used for developing jQuery plugins and is really just shorthand for $.prototype).
function emailDialog(){
$.colorbox({
width:"700px", height:"550px",
iframe:true, href:"/contact",
opacity:0.6
});
}
jsfiddle demo