I have a slider error notification which slides out, displays error and disappears in 10 seconds. It can be removed earlier if you click on it.
On thing that is missing is stopping it disappearing by mouse hover.
For some people, 10 seconds is not enough to read the error.
So I need to stop the timer with mouse hover.
To summarise: I'd like it to disappear in 10 seconds as it is now if you don't interact with it. If I hover over it, the timer should be stopped and the message should stay there till you click on it to remove.
How can I stop the timer (the setTimeout function) on hover?
This is the message slider function:
function popa(text = "Internal Error!", type = "error") {
var alert = document.createElement("div");
var stack = document.querySelectorAll('.alert').length;
alert.appendChild(document.createTextNode(`${stack + 1}: ${text}`));
alert.classList.add("alert");
alert.classList.add(`alert-${type}`);
document.querySelector("body").appendChild(alert);
var steps = 20;
var width = parseInt(getComputedStyle(alert).getPropertyValue('width'));
var slide = width + Math.round(width / 4);
var step = Math.round(slide / steps);
alert.onclick = () => {
alert.parentNode.removeChild(alert);
};
(function next(cnt, max) {
if (cnt++ > max) {
return;
}
alert.style.right = `${(-width) + (step * cnt)}px`;
setTimeout(() => {
next(cnt, max);
}, 10);
})(0, steps);
console.log(text);
setTimeout(() => {
if (alert.parentNode) {
alert.parentNode.removeChild(alert);
}
}, 10000);
}
Thank you.
P.S. No jQuery please
window.setTimeout() returns an integer timerID which you can use with window.clearTimeout():
var notificationTimer;
function createTimer() {
notificationTimer = setTimeout(function(){ alert('hi'); }, 10000);
}
function clearTimer() {
clearTimeout(notificationTimer);
}
See also: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout
Related
I want to achieve the following scenario:
Set a timer of 60 seconds and start the countdown displaying the
timer. After the countdown is finished, refresh (not reload) the page
and restart the countdown timer and continue the process.
If the browser's tab is changed, after finishing the timer, refresh the
page and pause the timer, and only when the tab is active again refresh
the page and start the countdown timer again.
I have managed to achieve the first requirement like:
Result will Refresh in <span id="countdown"></span>
<script>
if (!document.hidden) {
function timedRefresh(e) {
var n = setInterval((function () {
e > 0 ? (e -= 1, document.getElementById("countdown").innerHTML = e) : (clearInterval(n), window.location.reload())
}), 1e3)
}
timedRefresh(59)
}
</script>
And is unable to achieve the second requirement. I have tried to implement the solution mentioned here: Is there a way to detect if a browser window is not currently active?
But it didn't work.
How do I achieve the requirements in pure JavaScript code?
The following code has solved this scenario. It's a little messy, but I think is understandable. We use both window.document.hasFocus() and the focus event to create this solution. I have changed the window.location.reload() methods to just consoles simulating a function that refresh the data inside the application, since is asked to us refresh (not reload).
function timedRefresh(intervalTime) {
let interval = null;
let currentTime = intervalTime;
const updateTimer = () => {
const countdownSpan = document.getElementById("countdown");
if (currentTime <= 0) {
console.log(`print refresh at ${new Date()}`); // refresh page
if (window.document.hasFocus()) {
currentTime = intervalTime;
} else {
clearInterval(interval);
interval = null;
currentTime = intervalTime;
}
}
if (!interval) {
countdownSpan.innerHTML = "#";
} else {
countdownSpan.innerHTML = currentTime;
currentTime -= 1;
}
};
interval = setInterval(updateTimer, 1000);
window.addEventListener("focus", () => {
if (!interval) {
interval = setInterval(updateTimer, 1000);
}
});
}
const TIMER_SECONDS = 5;
timedRefresh(TIMER_SECONDS);
Edit:
The answer above does not work with reloads using window.location.realod(). A code solving the issue may look like this:
const TIMER_SECONDS = 60;
/*
* Update span with current time
* `currentTime` is an integer bigger than zero or a string '#' meaning 'timer stopped'
*/
function updateDisplayTimer(currentTime){
const countdownSpan = document.getElementById("countdown");
countdownSpan.innerHTML = currentTime;
}
/*
* A timer with `loopDuration` seconds. After finished, the timer is cleared.
* `loopDuration` is an integer bigger than zero, representing the time duration in seconds.
*/
function timedRefresh(loopDuration) {
let currentTime = loopDuration;
let interval = setInterval(() => {
if (currentTime > 0) {
updateDisplayTimer(currentTime);
currentTime -= 1;
} else {
window.location.reload(); // refresh page
}
}, 1000);
window.addEventListener('load', () => {
if(window.document.hasFocus()){
timedRefresh(TIMER_SECONDS);
} else {
updateDisplayTimer("#");
clearInterval(interval);
interval = null;
}
});
window.addEventListener('focus', () => {
if(interval == null){
window.location.reload(); // refresh page
}
});
}
// exeute main fucntion
timedRefresh(TIMER_SECONDS);
Use window.document.hasFocus() to determine if the user is focused on your webpage or not.
I got function within JS which is supposed to show random order divs on btn click.
However once the btn is clicked user got to wait for initial 10 seconds ( which is set by: setInterval(showQuotes, 10000) ) for divs to start showing in random order which is not ideal for me.
JS:
var todo = null;
var div_number;
var used_numbers;
function showrandomdivsevery10seconds() {
div_number = 1;
used_numbers = new Array();
if (todo == null) {
todo = setInterval(showQuotes, 10000);
$('#stop-showing-divs').css("display", "block");
}
}
function showQuotes() {
used_numbers.splice(0, used_numbers.length);
$('.container').hide();
for (var inc = 0; inc < div_number; inc++) {
var random = get_random_number();
$('.container:eq(' + random + ')').show();
}
$('.container').delay(9500).fadeOut(2000);
}
function get_random_number() {
var number = randomFromTo(0, 100);
if ($.inArray(number, used_numbers) != -1) {
return get_random_number();
} else {
used_numbers.push(number);
return number;
}
}
function randomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
Question: How to alter the code so upon the btn click divs will start showing right away without initial waiting for 10 seconds? (take in mind I want to keep any further delay of 10 seconds in between of each div being shown)
Thank you.
Call it when you begin the interval
todo = setInterval((showQuotes(),showQuotes), 10000);
I found a custom html5 audio player and successfully redesigned it, now I want to add a "loading/buffering" text while player is loading audio (otherwise users may freak out because nothing happening after they hit play).
Here is the code to explain:
function calculateTotalValue(length) {
var minutes = Math.floor(length / 60),
seconds_int = length - minutes * 60,
seconds_str = seconds_int.toString(),
seconds = seconds_str.substr(0, 2),
time = minutes + ':' + seconds
return time;
}
function calculateCurrentValue(currentTime) {
var current_hour = parseInt(currentTime / 3600) % 24,
current_minute = parseInt(currentTime / 60) % 60,
current_seconds_long = currentTime % 60,
current_seconds = current_seconds_long.toFixed(),
current_time = (current_minute < 10 ? "0" + current_minute : current_minute) + ":" + (current_seconds < 10 ? "0" + current_seconds : current_seconds);
return current_time;
}
function initProgressBar() {
var player = document.getElementById('player');
var length = player.duration
var current_time = player.currentTime;
// calculate total length of value
var totalLength = calculateTotalValue(length)
jQuery(".end-time").html(totalLength);
// calculate current value time
var currentTime = calculateCurrentValue(current_time);
jQuery(".start-time").html(currentTime);
var progressbar = document.getElementById('seekObj');
progressbar.value = (player.currentTime / player.duration);
progressbar.addEventListener("click", seek);
if (player.currentTime == player.duration) {
$('#play-btn').removeClass('pause');
}
function seek(evt) {
var percent = evt.offsetX / this.offsetWidth;
player.currentTime = percent * player.duration;
progressbar.value = percent / 100;
}
};
function initPlayers(num) {
// pass num in if there are multiple audio players e.g 'player' + i
for (var i = 0; i < num; i++) {
(function() {
// Variables
// ----------------------------------------------------------
// audio embed object
var playerContainer = document.getElementById('player-container'),
player = document.getElementById('player'),
isPlaying = false,
playBtn = document.getElementById('play-btn');
// Controls Listeners
// ----------------------------------------------------------
if (playBtn != null) {
playBtn.addEventListener('click', function() {
togglePlay()
});
}
// Controls & Sounds Methods
// ----------------------------------------------------------
function togglePlay() {
if (player.paused === false) {
player.pause();
isPlaying = false;
$('#play-btn').removeClass('pause');
} else {
player.play();
$('#play-btn').addClass('pause');
isPlaying = true;
}
}
}());
}
}
initPlayers(jQuery('#player-container').length);
Player code (source) on CodePen
I want some text will be shown in the same "span" that shows
"start time" (please see CodePen) while media is loading;
The text " 'loading.' 'loading..' 'loading...' " must changing on
loop while media is loading;
When it is loaded the "loading" text must be changing on "start
time" as it is now.
So basically I wat to put some text in start time while it is not shows anything but zeroes
I'm new to JS
Thats why I need some help or point to right direction
You can use the "readyState" event of the audio player to show hide loading.
There is already a "SetInterval" even which is getting fired so in that we can add this code to show/hide the "Loading"
1st add the loading element(You can put it where ever you want"
<h3 id="loading" style="display:none;">Loading</h3>
Now let's add the code to check "readystate" inside "SetInterval"
if(player.readyState>0&&player.readyState<4){
$("#loading").show();
}
else{
$("#loading").hide();
}
You can read more about "readystate" here
/As per the request I have changed the code to use the start time as loading, to make it work we don't have to add anything inside html but need to do some changes in JS
First, add this inside "togglePlay" functions pay condition in the "else" block.
$(".start-time").html("Loading...");
After this inside "initProgressBar()" function replace the "jQuery(".start-time").html(currentTime);" with the below code
if (player.readyState === 4) {
jQuery(".start-time").html(currentTime);
}
so how it will work, When you click play button the start time text will show as "Loading" but once the file is loaded and the player is ready to play the text will be changed to "start time", Hope it works. Also updated the CodePen for better understanding
You can find the full code in the CodePen
You could use setInterval to cycle through the different 'loading' text and clearInterval when the player's play promise is done.
Here's a basic example:
var dots = 1;
var loading = setInterval(function(){
dots = (dots % 3) + 1;
$(".start-time").text("Loading" + Array(dots + 1).join("."));
console.log($(".start-time").text());
}, 250);
player.play().then(function() {
clearInterval(loading);
}).catch((error) => {
$(".start-time").text("Error loading");
});
Halcyon helped with the loop here - but is there any way to stop the subsequent code from running, until after the loop has finished:
When I run the code below, I get the prompt for entering my name, before the scrollDown function runs - but the input prompt as AFTER the scrollDown code:
function scrollDown(num_times) {
num_times -= 1;
if (num_times === 0) {
return;
}
window.scrollBy(0, 500); // horizontal and vertical scroll increments
setTimeout(function() {
scrollDown(num_times);
}, 500);
}
//This should run first and scroll the screen before prompting
scrollDown(30); // scroll down 30 times
//However this prompt comes up before the above code has ran
var kw = prompt("Please enter your name");
Any advice would be appreciated.
Thanks, Mark
Put the code in a callback that you run after the last scroll iteration.
function scrollDown(num_times, callback) {
if (num_times === 0) {
callback();
}
window.scrollBy(0, 500); // horizontal and vertical scroll increments
setTimeout(function() {
scrollDown(num_times - 1, callback);
}, 500);
}
//This should run first and scroll the screen before prompting
scrollDown(30, function() {
kw = prompt("Please enter your name");
document.getElementById("result").textContent = kw;
}
); // scroll down 30 times
Your name is: <span id="result"></span>
var kw;
function scrollDown(num_times) {
if (num_times === 0) {
/* you can define your prompt after scrollDown has ended */
kw = prompt("Please enter your name");
return;
}
window.scrollBy(0, 500);
setTimeout(function() {
scrollDown(num_times - 1);
}, 500);
}
scrollDown(30);
I'd like to know how to take this code I found here
http://jsfiddle.net/T42jj/
var imageGallery = [
"http://placehold.it/350x150",
"http://placehold.it/350x250",
"http://placehold.it/350x350",
"http://placehold.it/350x450"
];
var imgCount = 0; var totalImgs = imageGallery.length - 1; var timer;
function next() {
timer = setInterval(function fn() {
imgCount++;
if (imgCount > totalImgs) imgCount = 0
document.getElementById("gallery").src = imageGallery[imgCount];
return fn;
}(), 500)
}
function previous() {
timer = setInterval(function fn() {
console.log('prev')
imgCount--;
if (imgCount < 0) imgCount = totalImgs;
document.getElementById("gallery").src = imageGallery[imgCount];
return fn;
}(), 100)
}
function stopInterval() {
clearInterval(timer)
}
window.onmouseup = stopInterval;
and changing the "onMousedown" to onmouseOver so it continuously loops as you mouse over, which I've managed to do.
Then adding a stop function button that works
onmouseClick
Back
Stop
with a Stop function breaking the loop. e.g break;
sorry i cant figure out how to format any of this. this is the worst system ever.
does this [code] work? [/code]
or something like it?
basically look at the jsfiddle code and help me if you could make a function that stops the loop from infinitely repeating images when a mouse click event occurs.