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.
Related
I've run into an issue with jQuery code that I'd like some help on. While the next and previous buttons work correctly, there appears to be an issue correctly stopping a slideshow. This is probably something we're completely overlooking, but I can't see what.
There is no JavaScript errors showing in the console. The interrupt method was being reached - at one point I had console.log calls in there to verify (cleaned up for presentation reasons).
http://jsfiddle.net/eLn83ep0/
Your help is much appreciated.
The below code is the functionality for prev/stop/start/next:
if ($(settings.next).size()) {
$(settings.next).bind('click.scrollface', function (e) {
methods.interrupt.call($this);
methods.next.call($this);
});
}
if ($(settings.pause).size()) {
$(settings.pause).bind('click.scrollface', function (e) {
methods.interrupt.call($this);
});
}
if ($(settings.play).size()) {
$(settings.play).bind('click.scrollface', function (e) {
methods.interrupt.call($this);
methods.start.call($this);
});
}
/*
* Setup up prev bindings
*/
if ($(settings.prev).size()) {
$(settings.prev).bind('click.scrollface', function (e) {
methods.interrupt.call($this);
methods.prev.call($this);
});
}
Here is the method for interrupt:
interrupt: function (time) {
return $(this).each(function () {
var data = $(this).data('scrollface');
console.log(data);
console.log('...');
if (!data) {
return false;
}
var $this = $(this),
period = 0;
/*
* Stop the timer, and wait a period of time before restarting it.
* Period defaults to the timer interval
*/
if (data.timer) {
if (typeof time !== "number") {
period = data.interval;
} else {
period = time;
}
methods.stop.call(this);
setTimeout(function resume_timer () {
clearInterval(data.timer);
data.timer = null;
methods.start.call($this);
}, period);
}
});
},
if ($(settings.pause).size()) {
$(settings.pause).bind('click.scrollface', function (e)
methods.stop.call($this);
});
}
if ($(settings.play).size()) {
$(settings.play).bind('click.scrollface', function (e) {
methods.start.call($this);
});
}
and delete the interrupt call in prev and next
//methods.interrupt.call(this);
because the interrupt method stopping the interval method and after timeout starting again, so most time you pause in this timeout but after this timeout the interrupt method starting the intervall again and dont care if you stoped it manually
see your updated fiddle working here http://jsfiddle.net/7ko4rdda/
Edit:
if you call interrupt with 0 for the buttons prev next click handler then you have the expected behavier that the period for the intervall starts new after next/prev click
if ($(settings.prev).size()) {
$(settings.prev).bind('click.scrollface', function (e) {
methods.interrupt.call($this,0);
methods.prev.call($this);
});
}
if ($(settings.next).size()) {
$(settings.next).bind('click.scrollface', function (e) {
methods.interrupt.call($this,0);
methods.next.call($this);
});
}
http://jsfiddle.net/7ko4rdda/1/
I have the following countdown timer function:
jQuery.fn.countDown = function(settings,to) {
settings = jQuery.extend({
startFontSize: "46px",
endFontSize: "18px",
duration: 1000,
endNumber: 0,
callBack: function() { }
},
settings);
return this.each(function() {
//where do we start?
if(!to && to != settings.endNumber) { to = settings.startNumber; }
//set the countdown to the starting number
jQuery(this).text(to).css("fontSize",settings.startFontSize);
//loopage
jQuery(this).animate({fontSize: settings.endFontSize},
settings.duration,
"",
function() {
if(to > settings.endNumber + 1) {
jQuery(this).css("fontSize",
settings.startFontSize).text(to - 1).countDown(settings, to - 1);
} else {
settings.callBack(this);
}
});
});
};
To start a countdown on my page, I initialize it like so:
(This will make it count down from 5 to 0, shown in element #countdown)
jQuery("#countdown").countDown({
startNumber: 5,
callBack: function(me) { }
});
Now I sometimes need to cancel a running countdown and start a new one.
For example, stop the countdown at 3 and initialize again to start over.
Can somebody tell me how I can extend this code to do that?
(the original timer script was taken from http://davidwalsh.name/jquery-countdown-plugin)
V.
Given that you have some access to the settings, and you execute your timer as such:
var settings = {
startNumber: 5,
callBack: function(me) {}
};
jQuery("#countdown").countDown(settings);
You can stop and restart your timer like this:
function stopAndRestart() {
jQuery("#countdown").stop().countDown(settings);
}
.stop() stops the animation on a given element (which happens to, terribly, be the method of timing here)
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.
I found good answers here to how pause and resume a setTimeout. Very useful.
But how can I resolve a similar issue but with an array of setTimeouts?
I need a click on any element to pause and then resume after the click on the setTimeout in the array where it was stopped last time and so on.
My code so far works except the fact that it resumes the timeout sets at the beginning. Is there a way to check on which setTimeout element the pause was made and resume at this point again? I presume the second definition of var fadeTrailer has to subtract those elements that have been activated already. Somehow it should work with the index. But I don’t know how. Thanks for help!
//automatic fader
fadeTrailer = [
setTimeout( function() {
//first action
}, 9500),
setTimeout( function() {
//second action )
}, 19000),
setTimeout( function() {
//third action
}, 32000),
];
$("#Trailer").on( 'click.resumeTrailerFade', function() { resumeTrailerFade(); } );
function resume
function resumeTrailerFade() {
$.each( fadeTrailer, function(i, timer) {
clearTimeout(timer);
} );
fadeTrailer = [
setTimeout( function() {
//first action
}, 9500),
setTimeout( function() {
//second action )
}, 19000),
setTimeout( function() {
//third action )
}, 32000),
];
};
I hope this is the right way to do this here. Good but also difficult forum for beginners ;-)
What I did now is that I declared a timeline variable at the start as:
var fadingTimeline = [
setTimeout( function() {
//anything
fadeState = 0;
}, 9500),
setTimeout( function() {
//anything
fadeState = 1;
}, 19000),
setTimeout( function() {
//anything
fadeState = 2;
}, 32000),
];
Then I put in the first appearance:
//automatic fader
fadeTrailer = fadingTimeline;
// interrupts automatic fader and restarts it (to give user time to stay on each work when clicking elements in it)
$("#Trailer").on( 'click.resumeTrailerFade', function() { resumeTrailerFade(); } );
Then for the resumeTrailerFade() I tried to grep the array of the elements by index using the fadeState variable like:
function resumeTrailerFade() {
$.each( fadeTrailer, function(i, timer) {
clearTimeout(timer);
} );
//filter timeline array for already passed setTimeouts
fadeTrailerRemain = $.grep( fadingTimeline, function(n) {
return ( n.index < fadeState );
});
}
I know the last part is silly code, just for explaining my idea.
Is there someone out there able to follow my idea and put it into real working code? Would be so awesome!
Edited: Somehow I missed Igoel's comment where he says the same thing. Sorry about that.
There is no simple way to query a timeout to see how much time has elapsed. You can store the start time of a timeout in a separate variable and then calculate the difference explicitly.
FWIW, note that JavaScript timeouts are not necessarily accurate as JavaScript is a single-threaded execution environment.
the code you showed me, is in fact awesome for me!
I changed it a little (as I don’t need buttons etc.)
So I declared the variables this way:
var first = function() {
// do the first thing
}
var second = function() {
// do the second thing
}
var third = function() {
// do the third thing
}
var fourth = function() {
// do the fourth thing
}
var fifth = function() {
// do the fifth thing
}
//…
var timer;
var timeFrames = {
95: [first],
190: [second],
320: [third],
420: [fourth],
510: [fifth],
//…
};
var timerPaused = false;
var maxStep = 510;
var stepSize = 100;
var currentStep = 0;
var intervalTimer = function() {
if ( !timerPaused ) { currentStep ++; }
if ( !!timeFrames[currentStep] ) {
if ( !!timeFrames[currentStep][0] ) {
( timeFrames[currentStep][0])(timeFrames[currentStep][1] );
}
}
if ( currentStep >= maxStep ) {
timer = window.clearInterval(timer);
currentStep = 0;
}
}
On the right place inside a function where I needed it so start automatically I put:
//automatic trailer fader
timer = window.setInterval( intervalTimer, stepSize );
// interrupts automatic fader
// restarts it (to give user time to stay on clicked elements within the fading content)
$("#Trailer").on( 'click.resumeTrailerFade', function() {
timerPaused = true;
setTimeout( function() { timerPaused = false; }, 15000 ); // give some extra time when anything clicked before resume automatic fade again
} );
Then finally to abolish all I put:
//stops automatic trailer fader definitely without resume
timerPaused = true;
window.clearInterval(timer);
$("#Trailer").off( 'click.resumeTrailerFade' );
Works perfect even I am a aware that for you profs there might be still some strange things in it.
So feel free to comment about it. Every help to improve is welcome!
Thank you so far for great help, without it I would never have made it.
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