Develop Reference

easytimer.js restart timer when page refresh or open new window

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());
});
},

How can I cancel setTimeout? [duplicate]

This question already has answers here:
Cancel/kill window.setTimeout() before it happens
(2 answers)
Closed 7 years ago.
I wrote this simple Javascript for auto and manually hiding bootstrap alerts.
$(function () {
$.ajaxSetup({ cache: false });
$("[data-hide]").on("click", function () {
$(this).closest("." + $(this).attr("data-hide")).hide();
});
window.setTimeout(function () {
$(".alert").fadeTo(700).slideUp(700, function () {
$(this).hide();
});
}, 5000);
});
I want to cancel the setTimeout when the cancel button is clicked. How can I do this?

setTimeout returns a numeric timeoutId for your timer. You can pass that to the clearTimeout method.
$(function () {
var t = window.setTimeout(function () {
$(".alert").fadeTo(700).slideUp(700, function () {
$(this).hide();
});
}, 5000);
$("#yourHideButtonId").on("click", function () {
if(t!=null)
{
clearTimeout(t);
}
});
});

To start timer:
timer = window.setTimeout( f , 5000);
To clear it:
window.clearTimeout(timer);

Fade In & Out Interval Javascript

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

Twitter Bootstrap: How to close modal dialog?

I'm trying to implement modal loading dialog with Twitter's bootstrap. My current attemp is:
$(document).ready(function () {
$('#loading_dialog')
.ajaxStart(function () {
$(this).modal('show');
})
.ajaxStop(function () {
$(this).modal('hide');
});
});
Problem is that the dialog won't close.

I didn't test it but the issue could depend on the context of the ajaxStart/Stop anonymous function.
Can you try this?
var loading_dialog = $('#loading_dialog');
loading_dialog
.ajaxStart(function () {
loading_dialog.modal('show');
})
.ajaxStop(function () {
loading_dialog.modal('hide');
});

jquery redirect on click or after 10 seconds

I have a spash screen on a website that has a div with the ID of "splash" i'm trying to make the div fade in then if the user clicks on the div it fades out and redircts to the main site. If the user dosen't click it just fades out and redirects after 10 seconds.
The timed redirect is working but not the click function.
<script type="text/javascript">
$(document).ready(function() {
$('#splash').hide();
$('#splash').fadeIn(1000, function() {
$(this).delay(10000).fadeOut(1000, function() {
window.location = 'http://www.examle.com'; });
$(this).click().fadeOut(1000,function() {
window.location = 'http://www.example.com'; });
});
});
</script>
Any help would be great

Try this:
$(document).ready(function() {
$('#splash').hide();
$('#splash').click(function(){
$(this).fadeOut(1000,function() {
window.location = 'http://www.example.com'; });
});
$('#splash').fadeIn(1000, function() {
window.setTimeout ( function() {
$('#splash').fadeOut(1000, function() {
window.location = 'http://www.example.com'; }) }
, 10000);
});
});​
Changes that I've made to the example:
I've moved setting the click handler outside the fadeOut function (better practice, IMHO) and I've changed your call to delay() to a setTimeout().
The difference is, delay() will not allow other jQuery code to be executed in the background, while setTimeout() will.