Good day! Could somebody suggest please.. I am using for record time easytimer.js plugin.
I have a button on the page where there is timer starts when I click it. But the problem is if
someone reloads the page or open new window the timer restarts. I dont know how to use local
storage to make sure my timer does not reset upon reload.
initTimer: function (){
$(".timer").draggable({
containment: "window",
scroll: false,
cursor: "move"
});
var timer = new easytimer.Timer();
$('.timerDetails .startButton').click(function () {
timer.start();
//localStorage.setItem('timer', timer);
$(".timer").css("display", "flex");
$(".startButton").parent().children().removeClass("active");
$(".startButton").addClass("active");*/
});
$('.timerDetails .pauseButton').click(function () {
timer.pause();
$(".pauseButton").parent().children().removeClass("active");
$(".pauseButton").addClass("active");
});
$('.timerDetails .stopButton').click(function () {
timer.pause();
$(".stopButton").parent().children().removeClass("active");
$(".stopButton").addClass("active");
});
timer.addEventListener('secondsUpdated', function (e) {
$('.timerDetails .timer-values').html(timer.getTimeValues().toString());
});
timer.addEventListener('started', function (e) {
$('.timerDetails .timer-values').html(timer.getTimeValues().toString());
});
timer.addEventListener('reset', function (e) {
$('.timerDetails timer-values').html(timer.getTimeValues().toString());
});
},
Related
$("#element").addClass("myclass").on('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function (e) {
$("#element").addClass('text-success');
$("#element2").addClass('myclass2');
setTimeout(function () {
$("#element").fadeOut("slow", function () {
$("#element").remove();
});
}, 60000);
});
This working correctly, when the tab is active. When the tab is inactive, the code will stop at the on event.
Any idea, how this will work if the tab is also inactive, when switching to the tab, thats looking like it should?
Well, I don't know how to detect if the animation had ended while the tab is out of focus, but if you know approximately how long the animation should take, you can always trigger the event manually after some safe period of time if it hasn't been fired already. Eg:
var hasRun = false;
$("#element").addClass("myclass").on('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function () {
runIt();
});
setTimeout(function () {
runIt();
}, 10000); // Some period of time
function runIt() {
if(!hasRun) {
$("#element").addClass('text-success');
$("#element2").addClass('myclass2');
setTimeout(function () {
$("#element").fadeOut("slow", function () {
$("#element").remove();
});
}, 60000);
hasRun = true;
}
});
Your code will only run when the tab is active due to the browser pausing the css animations when the tab is inactive. I would recommend doing your animations in javascript, not css, that way it should continue to run when the tab is inactive.
It depends on how the browser manages inactive tabs.
How can I have this fiddle to change from first content (mario) to next content (smiley face) without being on hover/click? I want it to change automatically after 5 seconds. Also from second content to third content and fourth content.
Here is a sample from JSFIDDLE. I figured that maybe the coding should be change somewhere here:
$('#text1').hover(function () {
hey();
});
Besides that, anyone knows why my fourth content isn't showing?
I am new in this. Please guide me. Many thanks in advance.
Use setTimeout() function
setTimeout(function () {
hey();
},5000);
Fiddle Updated Fiddle
EDIT
As per your need shoe after 35 seconds
$('#text1,#text2, #text3, #text4').hide();
setTimeout(function () {
$('#text1').show();
hey();
},35000);
function hey() {
setTimeout(function () {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
},5000);
}
Updated fiddle. NEW FIDDLE UPDATED AS PER COMMENT
Just add setTimeout(hey, 5000); instead hover handler:
$('#text2, #text3, #text4').hide();
setTimeout(hey, 5000);
function hey() {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
}
Your hey() is showing upto 3rd text.Add another next() transition.
function hey() {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow",function(){
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
});
});
}
If you want to change content automatically after 5 second you should use setTimeout function, for example:
setTimeout(function(){ alert("Hello"); }, 5000) this will triger alert box after 5 seconds...
I Think you have to use setInterval()
setInterval(function(){ hey(); }, 3000);
See this Link what is difference between setTimeout and
setInterval
$("#customerAdded").modal("show").on("shown.bs.modal", function () {
window.setTimeout(function () {
$("#customerAdded").modal("hide");
}, 5000);
location.reload();
});
Ok, it works. But with location.reload(), despite I change the time, the page is reloaded immediately.
I would, after modal closed, that the page was reloaded according the time specified.
You could just fire the location.reload() when you hide your modal:
$("#customerAdded")
.modal("show")
.on("shown.bs.modal", function () {
window.setTimeout(function () {
$("#customerAdded").modal("hide");
location.reload();
}, 5000);
});
$("#customerAdded").modal("hide").on("hidden.bs.modal", function () {
location.reload();
});
Here is the code
$('#customerAdded').on('hidden', function () {
location.reload();
})
I'm making a web page for my self. I have a welcome screen with big background wallpaper and just one link that you have to click to get to the index page. I have a sound on welcome page that plays when link is clicked, but as soon as the link is clicked it opens index page so the sound is not even heard. I want to make few seconds delay after the link is clicked so that the sound can play first to the end.
My jsfiddle http://jsfiddle.net/cs6yqawr/.
$('a[href*="/*html"]').each(function() {
$(this).on('click', function(event) {
event.preventDefault();
(function(h) {
setTimeout(function() {
window.location = h;
}, 5000);
})(this.href);
});
});
Tried this code but I can't get it working.
Any suggestions?
Tried and it'll play music before to new page.
$('.big-btn').click(function(e) {
e.preventDefault();
console.log(this);
var embed = $('<embed src="Kalimba.mp3" hidden="true">');
embed.appendTo($('#embed'));
embed.ready(function () {
setTimeout(function() {
window.location = 'index.html';
}, 2000);
});
});
You should replace my test mp3, target location, and delay ms for your usage.
I think it's just the selector on your event handler. Try:
$(document).on('click', 'a', function(event) {
event.preventDefault();
setTimeout(function(h) {
window.location = h;
}, 5000, this.href);
});
Or ideally just give the link an id and bind the handler to that.
setInterval(function(){ $("#nav #nextslide").click()},10000);
It works. But I have a tag:
click.
I want, when mouseover on gallery button, pause timer. When mouseout, setInterval active again.
Tried this but not working:
$('a.gallery').hover(function(ev){
clearInterval(timer);
}, function(ev){
setInterval(function(){ $("#nav #nextslide").click()},10000);
});
How can I fix it?
You need to store the timer reference into a variable to clear it later
//declare it in a shared scope
var timer;
function startTimer() {
timer = setInterval(function () {
$("#nav #nextslide").click()
}, 10000);
}
$('a.gallery').hover(function (ev) {
clearInterval(timer);
}, function (ev) {
startTimer();
});
startTimer();
step 1:
function example(){ $("#nav #nextslide").click() //code you want ot execute inside setInterval() }
step 2:
var timer= setInterval(example(); ,10000);
step 3:
$('a.gallery').hover(function(ev){
clearInterval(timer);
}, function(ev){
timer=setInterval(example(); ,10000);
});
I've tested it, working fine.