so i have this loading screen that displays information while the page is loading but because of faster internet speeds this can be displayed in a flash.. I would like to add a minimum display time! this is my current code
jQuery(window).load(function() {
jQuery('.pageLoad').animate({
opacity: 0
}, 800, function() {
jQuery('.pageLoad').css({
display: 'none'
});
});
});
How can i do this?
You could put your fade-out method in a function and call that after an xx number of seconds from $(document).ready():
var timeoutID;
jQuery(document).ready(function() {
// start hiding the message after 2 seconds
timeoutID = window.setTimeout(hideMessage, 2000);
});
function hideMessage() {
jQuery('.pageLoad').animate({
opacity: 0
}, 800, function() {
jQuery('.pageLoad').css({
display: 'none'
});
});
}
As mentioned by #Rayf, if that piece of info should be read, regardless of page loading speed, you should add some delay to it like this:
// time to read the message...adjust it to the time you feel is right
var msgDisplayTime = 5000,
interval = 0,
loaded = false,
delayed = false,
fadeLoader = function () {
jQuery('.pageLoad').animate({opacity: 0}, 800, function () {
jQuery('.pageLoad').css({display: 'none'});
});
};
//timeout for your desired delay time
//it will ask if it is already loaded after delay ends
//triggering the fading of loading overlay
timeout = setTimeout(function(){
delayed = true;
if(loaded){
fadeLoader();
}
},msgDisplayTime);
//when loaded, it will wait until delay happened
//if not, it will delegate the execution to the timeout
// so at the end, it will be triggered after the delay or
//loading time, in case it longer than desired delay
jQuery(window).load(function(){
loaded = true;
if(delayed){
fadeLoader();
}
});
Inside comments is the roughly explanation about how it works
Related
How do I execute the flipclock once the fadeIn animation is finished?
I want to start and show, maybe even fade in a clock once my fadeIn() animation for the video has completed. Currently it fades the video in, but when I added queue() which I read this was the recommended option to achieve this my code broke.
I think my overall syntax is wrong, that's why my error occurs? (or maybe I'm just going about this completely wrong.
This is my code:
var video= document.getElementById('vid');
var overlay= document.getElementById('overlay');
var timer;
var clock;
// Hides recorded video until timer reaches 0
// TODO: Should start recording once video appears fully on screen not while being hidden.
$("#recording").hide();
// Counter;
function countdown(seconds, callback){
timer = setInterval(function(){
document.getElementById("coutdownText").innerHTML = "Recording will start automatically in: " + seconds;
if(seconds == 0){
$("#vid").show();
setTimeout(function() {$("#vid").fadeOut(2500);}, 0)
overlay.style.visibility ='hidden';
// console.log("Worked the seconds is:" + seconds)
setTimeout(function() {$("#recording").fadeIn(2500).queue(function(next){
// FlipClock : My problem occurs when I try to use queue
$(document).ready(function() {
// Instantiate a counter
clock = new FlipClock($('.clock'), 600, {
clockFace: 'MinuteCounter',
autoStart: true,
countdown: true
});
});
next();
}));}, 3000)
}
seconds-- || (clearInterval(timer), callback());
}, 1000);
}
overlay.style.visibility = "hidden";
// Check for when PreRecorded video ends.
video.addEventListener('timeupdate', function() {
if(video.ended){
overlay.style.visibility ='visible';
countdown(10, function(){ console.log("Coutdown done!") });
}
})
I'm trying to make 2 banners changing on the same place, let me explain better:
Window load ok
loop{
1- Load Banner 1 (gif)
2- delay 6000 ms
3- Remove Banner 1
4- Load Banner 2 (gif)
5- delay 7500 ms
6- remove Banner 2
}
Im trying to do this, so all frames are loaded correctly, that's why I need the banner div to be loaded on the correct timing.
My code now (not working):
$( window ).load(function() {
function go() {
$("#bannerkingbong").load("banner_king_bong.php");
setTimeout(function(){
$('#bannerkingbong a').remove();
}, 6000);
$("#bannerultra").load("banner_ultra420.php");
setTimeout(function(){
$('#bannerultra a').remove();
}, 7500);
}
go();
});
If someone could help me.. I appreciate :) thanks.
Tested this, but no success:
$(function() {
var queue = ["#bannerkingbong;http://smokebuddies.com.br/banner_king_bong.html", 3000, "empty;#bannerkingbong", "#bannerultra;http://smokebuddies.com.br/banner_ultra420.html", 4000, "empty;#bannerultra"];
(function next(queue) {
if(!queue.length) {
return;
}
var action = queue.shift();
//If wait action
if($.isNumeric(action)) {
setTimeout(function() {
next(queue);
}, action);
return;
}
var c = action.split(";");
//If remove action
if(c[0] === 'empty') {
$(c[1]).empty();
return next(queue);
}
//If load action
$(c[0]).load(c[1], function() {
return next(queue);
});
})(queue);
});
My idea (or solution) is to create a queue of actions like this:
["#bannerkingbong;https://httpbin.org/user-agent",
3000,
"empty;#bannerkingbong",
"#bannerultra;https://httpbin.org/ip",
4000,
"empty;#bannerultra"]
Action type 1 ( #bannerkingbong;https://httpbin.org/user-agent):
load https://httpbin.org/user-agent into #bannerkingbong.
Action type 2 ( 3000 ) integers:
wait 3 seconds.
Action type 3 empty;#bannerultra:
empty the element with selector #bannerultra.
Now, you can play with the queue to chain your actions. Here is the code that will execute the queue:
$(function() {
var queue = ["#bannerkingbong;https://httpbin.org/user-agent", 3000, "empty;#bannerkingbong", "#bannerultra;https://httpbin.org/ip", 4000, "empty;#bannerultra"];
(function next(queue) {
if(!queue.length) {
return;
}
var action = queue.shift();
//If wait action
if($.isNumeric(action)) {
setTimeout(function() {
next(queue);
}, action);
return;
}
var c = action.split(";");
//If remove action
if(c[0] === 'empty') {
$(c[1]).empty();
return next(queue);
}
//If load action
$(c[0]).load(c[1], function() {
return next(queue);
});
})(queue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bannerkingbong">
</div>
<div id="bannerultra">
</div>
I hope this will help you.
This is a problem with superslides from nicinabox Github Link
I know that you can use the 'play' option in order to set a time in milliseconds before progressing to the next slide automatically. This sets a global time for the entire slideshow.
What I would like to achieve is for individual slides to have their own specific progress/delay time.
For example if I have a slideshow with twenty slides I want all the slides to progress automatically and to stay on screen for 5 seconds. However the third slide should be displayed for 20 seconds.
I have tried to do this by using the animated.slides event but I cant get it to work as the animation stops with the fourth slide :
Here is my code:
$(function () {
$('#slides').superslides({
hashchange: true,
play: 5000,
pagination: true
});
});
$('#slides').on('animated.slides', function () {
var current_index = $(this).superslides('current');
if (current_index === 2) { // third slide
$(this).superslides('stop');
var disp = function test1() {
setTimeout(function ()
{
$('#slides').superslides('animate', 3)
}, 20000);
}
disp();
}
});
Any help would be appreciated. Maybe there is someone out there to solve my problem.
Replace .superslides('animate', 3) with .superslides('start').
Demo (the condition is 2, as you originally wrote)
Just do this:
$('#slides').on('animated.slides', function () {
var current_index = $(this).superslides('current');
if (current_index === 2) { // third slide
$(this).superslides('stop');
var disp = function test1() {
setTimeout(function ()
{
$('#slides').superslides('start')
}, 20000);
}
disp();
}
});
FIDDLE
You can do it like this:
$('#slides').superslides({
hashchange: true,
play: 500,
pagination: true
});
$('#slides').on('animated.slides', function () {
var slideNo = $(this).superslides('current');
if(slideNo === 2){
$(this).superslides('stop');
setTimeout(function(){
$('#slides').superslides('start')
}, 2000);
}
});
Here's a fiddle.
This question already has answers here:
Why is the method executed immediately when I use setTimeout?
(8 answers)
Closed 8 years ago.
i use this javascript code to open two pictures and toggle a vertical menu by clicking on another picture. an know i want to run code without clicking on image, with a timer. so i wrote this code but it run only once at first time.
what's wrong with my code?
<script type="text/javascript">
$(document).ready(function () {
$("#lista2").slideToggle(1);
$curtainopen = false;
$(".rope").click(function () {
$(this).blur();
if ($curtainopen == false) {
var selected = $(this).val();
var image = $(".rope");
image.fadeOut('fast', function () {
$("#largeImg").attr('src', 'images/power-on.png');
image.fadeIn('fast');
});
$(".leftcurtain").stop().animate({ left: '-120px' }, 2000);
$(".rightcurtain").stop().animate({ left: '120px' }, 2000);
$("#R").attr('src', 'images/Right.gif');
$("#L").attr('src', 'images/Left.gif');
$curtainopen = true;
$("#lista2").slideToggle(2000);
$(this).attr('id', '1');
} else {
var selected = $(this).val();
var image = $(".rope");
image.fadeOut('fast', function () {
$("#largeImg").attr('src', 'images/power-off.png');
image.fadeIn('fast');
});
$(".leftcurtain").stop().animate({ left: '0px' }, 2000);
$(".rightcurtain").stop().animate({ left: '0px' }, 2000);
$curtainopen = false;
$("#lista2").hide();
$(this).attr('id', '0');
}
return false;
});
});
function startTimer() {
setTimeout($(".rope").click(), 4000);
}
</script>
use this to execute your code after a specific time interval
setInterval(function() {
$(".rope").click(); // this will execute after every 4 sec.
}, 4000);
use this to execute your code after a specific time delay
setTimeout(function() {
$(".rope").click(); // this will execute after 4 sec delay only once.
}, 4000);
use above according to your requirement
setTimeout need a function, When you are passing $(".rope").click() it is called immediately.
Use it like
function startTimer() {
setTimeout(function () {
$(".rope").click();
}, 4000);
}
setTimeout(function() {
$(".rope").click();
}, 4000);
because setTimeout needs a function, but $(".rope").click() calls itself immediatly (instead of assigning a function to be called). So you don't want to call a function but to pass it to setTimeout.
A timer implies repeating the function after each timeout. setTimeOut only delays a function once (after a given time, in milliseconds).
function startTimer() {
//do your stuff
$(".rope").click();
//repeats itself after 4 seconds
setTimeout(startTimer, 4000);
}
And do not forget to start it on document ready :
$(document).ready(function () {
startTimer();
...
}
I you don't want your function to be called immediately on page load, you can add an initial delay :
$(document).ready(function () {
setTimeout(startTimer, 5000); //the timer will start only 5 seconds after page load
...
}
I am animating images within a logo in a slot-machine type of animation. I need it to stop animating once it gets to the top of the image (and send a callback if possible).
Currently, this is how I'm accomplishing the animation:
window.setInterval(function() {
$('#title-1 img').animate({bottom : '-=60px'})
}, 5000);
Any ideas on how I would get it to stop, and to send the callback?
So I assume you have a sprite image containing multiple logos, you want them to slide each 5 seconds until you reach the last one, and then call the callback?
var cnt = 6,
$img = $('#title-1 img'),
i = 0;
function animate_logo(cb) {
if (i < cnt) {
$('#title-1 img').animate({bottom : '-=60px'});
i += 1;
setTimeout(function () {animate_logo(cb)}, 5000);
}
else {
cb();
}
}();
var interval = window.setInterval(function() {
$('#title-1 img').animate({bottom : '-=60px'},
function(){
if(`some stop point`) clearInterval(interval);
}
);
}, 5000);
I would not suggest using a setInterval when dealing with animations due to the way newer browsers are making changes to the way setInterval and setTimeout work when the tab is not the active tab.
var $title1 = $("#title-1");
var $title1img = $title1.find('img');
function anim(){
if ($title1.height() < parseInt($title1img.css("bottom"))) {
setTimeout(function(){
$title1img.animate({bottom : '-=60px'},anim);
},5000);
}
}
$title1img.animate({bottom : '-=60px'},anim);
Edit: another reason not to use setInterval to fire off animations is due to the reqeustAnimationFrame that was implemented in 1.6 and removed in 1.6.3, which will more than likely be added back in 1.7. If you write code now that will be compatible later, that's less maintenance you will have to do later if you end up being required to upgrade.
Here's a jsfiddle http://jsfiddle.net/czUnU/
Edit: function...
function animColumn(title,img){
function anim(){
if (title.height() < parseInt(img.css("bottom")) {
setTimeout(function(){
img.animate({bottom : '-=60px'},anim);
},5000);
}
}
img.animate({bottom : '-=60px'},anim);
}
animColumn($("#title-1"),$("#title-1 img"));
animColumn($("#title-2"),$("#title-2 img"));
animColumn($("#title-3"),$("#title-3 img"));
http://jsfiddle.net/czUnU/1/