After clicking "Take a break" number of sets should decrement, and clock should start.
During clock working, clicking on any element of site should be cousing any effect.
Instead, the first click and it works properly, but after first clock pass, i can click decrement sets during the clock work and click another breaks.
I want to do this without asynchronous stuff (project's requirement ;/ )
I tried adding a freezing variable but i have problem how properly place the ifs.
Here is fragment which i struggle with:
var freeze = false
$(".start").click(function(){
if(!freeze){
freeze = true;
var num = $(this).attr("id");
var currExcercise = routineSample.excercises[num];
var res = this;
var timer = 0;
var setsTd = "#set"+num;
if(!currExcercise.allSetsDone)
{
timer = currExcercise.breakTime;
currExcercise.sets--;
if(currExcercise.sets <= 0 ){
currExcercise.sets = 0;
currExcercise.allSetsDone = true;
}
$(setsTd).text(currExcercise.sets);
if(!currExcercise.breakPassed){
setInterval(function(){
if(timer>0){
timer--;
$(res).text(timer);
}else{
if(!freeze)
$(res).text("MOVE ON!");
currExcercise.timeLeft = timer;
freeze = false;
//currExcercise.breakPassed = true;
}
}, 1000);
freeze = true;
}
}else{
$(res).text("EXCERCISE DONE");
}
} });
To "freeze" a page use the following CSS:
body { pointer-events: none };
Related
I am going crazy here.
I want to show an element on mouse move, and hide it 10 sec after last move of the mouse.
I wrote this:
document.addEventListener("DOMContentLoaded", function(event) {
var time = 0;
document.addEventListener("mousemove", function(event) {
console.log('$');
document.getElementsByClassName("mybar")[0].style.visibility = 'visible';
time = 0;
while (time < 11) {
setTimeout(function() {
time++
}, 1000);
console.log(time, time == 10);
if (time == 10) {
document.getElementsByClassName("mybar")[0].style.visibility = 'hidden';
}
}
});
});
<div class='mybar'>
<h1> TESTING </h1>
</div>
Why does it end up in an endless loop?
Why doesn't it exit on condition? why does the if never gets the 'true' parameter?
Notice : don't run it this way... it will kill your tab.
First, you don't need to wait for DOMContentLoaded to add an event listener to document, since if you did, you couldn't add DOMContentLoaded in the first place.
The infinite loop is because setTimeout doesn't pause the script. It schedules its callback for the time you provide, and irrespective of that time, the callbacks will not run until the current running code in the thread completes, which never happens because you don't increment the time variable.
So the loop never ends, and so the thread is never made available, so your callbacks never can run, so time can never be incremented.
Lastly, starting a setTimeout inside an event handler that shares a local variable and executes very rapidly on an event like mousemove is prone to give unexpected results. For example, in your code, every time the handler runs, it'll reset time to 0, which doesn't seem to be what you'd want.
A solution would be to ditch the loop, schedule the visibility for 10 seconds, and prevent the main part of the code in the handler from running in the meantime by using a boolean variable.
var timer = null;
document.addEventListener("mousemove", function(event) {
var myBar = document.querySelector(".mybar");
if (!myBar) {
return; // there's no mybar element
}
if (timer == null) {
myBar.style.visibility = 'visible';
} else {
clearTimeout(timer); // clear the currently running timer
}
// set to hidden in 10 seconds
timer = setTimeout(function() {
myBar.style.visibility = 'hidden';
timer = null; // clear the timer
}, 10000);
});
I also switched to querySelector instead of getElementsByClassName because it's shorter and cleaner. And I used a variable to make sure the element is found before setting the style.
You need a flag out of the mousemove scope that tells your listener that you've already ran.
if(running) return;
running = true;
In context:
document.addEventListener("DOMContentLoaded", function(event) {
var time = 0;
var running = false;
document.addEventListener("mousemove", function(event) {
console.log('$');
if(running) return;
running = true;
document.getElementsByClassName("mybar")[0].style.visibility = 'visible';
time = 0;
while (time < 11) {
setTimeout(function() {
time++
}, 1000);
console.log(time, time == 10);
if (time == 10) {
document.getElementsByClassName("mybar")[0].style.visibility = 'hidden';
}
}
});
});
Here's a way to do it with regular JavaScript. If your browser isnt ES6 compliant, you can replace the arrow functions with regular function expressions. The example hides the text after 2 seconds instead of 10, just so you can see it work without having to waste 8 extra seconds.
//hide by default
document.getElementById('myBar').style.display = 'none';
var timer = null;
var hideDivTimer = () => {
timer = setTimeout(() => {
document.getElementById('myBar').style.display = 'none';
}, 2000);
};
document.addEventListener('mousemove', () => {
clearTimeout(timer);
document.getElementById('myBar').style.display = 'inline';
hideDivTimer();
});
<body>
<div id='myBar'>
<h1> TESTING </h1>
</div>
</body>
I wrote a script in Javascript with 2 functions.
Die first shows random pictures in an random position
This works fine
The second script has to "clear up" everthing and put everything back to the Startposition.
My script at this time:
function clearPics(){
$("img[class^='mapic']").attr('src','empty100.jpg');
$("img[class^='mapic']").attr("title",'');
$("img[class^='mapic']").attr("alt",'');
}
function makePics(){
// 1 Step take 5 different Pics
var MAAuswahlArr = [];
var AnzahlAnzeige = 5;
var lauf = AnzahlAnzeige
while (lauf > 0){
var testvar = getRandomInt(0,MAArr.length-1);
if (contains.call(MAAuswahlArr, testvar)){
}else{
MAAuswahlArr.push(testvar);
lauf--;
}
}
// 2 Step get 5 of 10 different positions
var BildanzahlMax = 10
var BildanzahlArr = [];
var BildPositionenbesetzt = 5;
lauf = BildPositionenbesetzt;
while (lauf > 0){
var testvar = getRandomInt(0,BildanzahlMax);
if (contains.call(BildanzahlArr, testvar)){
}else{
BildanzahlArr.push(testvar);
lauf--;
}
}
// 3 step: take 5 Pics an put ist in the src the alt and title Tags
lauf = BildanzahlMax;
while (lauf > 0){
var className = "mapic"+lauf;
if (contains.call(BildanzahlArr, lauf)){
$('.'+className).attr('src',MAArr[lauf-1][2]);
$('.'+className).attr("title",MAArr[lauf-1][1]);
$('.'+className).attr("alt",MAArr[lauf-1][0]);
}
lauf--;
}
// 4. step: make the Pics Hover
$("img[class^='mapic']").hover(function() {
var maName = $(this).attr("title");
var mafunktion = $(this).attr("alt");
$('.matextblock').html("<h3> Unser Team</h3> <p class='maName'>"+mafunktion+"</p><p class='maFunktion'>"+maName+"</p>");
console.log('huhu rein');
}, function() {
$('.matextblock').html('');
});
return true;
}
$(document).ready(function() {
setInterval(function(){
var done = makePics();
console.log(done);
if (done){
clearPics();
//console.log('clear');
}else{
done = false;
}
},2000);
});
How can I run the script to
a) make the Picture
b) wait 5 or n seconds
c) clear up
and go back to a) ?
Your done variable should be declared outside of the anonymous function executed by setInterval. Right now it is redeclared every time the function fires, so the if/else branch is useless.
Exampel code:
$(function() {
var pictureShown = false;
var interval = 5000;
setInterval(function () {
if(pictureShown) {
clearPics();
} else {
makePics();
pictureShown = true;
//OR, if makePics returns true:
//pictureShown = makePics();
}
}, interval);
});
Edit: I adapted your setInterval code to make it work, but the whole setup could be much simplified - see Adder's response.
Thank Folks I got it
this is my Code witch workls fine for me.
Ich change the positio for the clearPics funtion.
So I do not have to wait 5 Seconds to the next Pictures :-?
var done = false;
var interval = 5000;
$(document).ready(function() {
setInterval(function(){
//done = makePics();
if (done){
done = false;
}else{
clearPics();
done = makePics();
}
console.log(done);
},interval);
});
I think the code can be simplified. As far as I can tell from the info on the functions you gave out.
$(document).ready(function() {
makePics();
setInterval(function(){
clearPics();
var done = makePics();
},2000);
}
This will clear the pics first, and then redisplay a new set of Pics with makePics, every 2000 ms.
hello i try to create the function to prevent the other function to run for 10 minutes IF user close the content and refresh the page.
the other function is to show the content when we scroll with 2 argument
first: it will run the function with first argument with no interval, if user click close and refresh. it will run the second argument that give interval
heres my code.
https://jsfiddle.net/8c1ng49a/1/
please look this code
var popUp= document.getElementById("popup");
var closePopUp= document.getElementsByClassName('popup-close');
var halfScreen= document.body.offsetHeight/2;
var showOnce = true;
var delay;
function slideUp(){
popUp.style.maxHeight="400px";
popUp.style.padding="10px 20px";
popUp.style.opacity="1";
if(popUp.className==="closed"){
popUp.className="";
}
}
function slideDown(){
popUp.style.maxHeight="0";
popUp.style.padding="0 20px";
popUp.style.opacity="0";
// add class closed for cache
if(popUp.className===""){
popUp.className="closed";
localStorage.setItem('closed', 'true'); //store state in localStorage
}
}
// start interval
function startDelay() {
delay = setInterval(slideUp, 1000);
}
// clear interval
function clearDelay() {
window.clearTimeout(delay);
}
// check if cache heve class close
window.onload = function() {
var closed = localStorage.getItem('closed');
if(closed === 'true'){
popUp.className="closed";
}
}
// show popup when scroll 50%
window.onscroll = function scroll(ev) {
// first time visited
if ((window.innerHeight+window.scrollY) >= halfScreen && showOnce) {
slideUp();
showOnce = false;
}
//same user mutilple time visited the site
else if((popUp.className==="closed" && window.innerHeight+window.scrollY) >= halfScreen && showOnce ){
startDelay();
showOnce = false;
}
};
// close button when click close
for(var i = 0; i<closePopUp.length; i++){
closePopUp[i].addEventListener('click', function(event) {
slideDown();
});
}
my interval didnt work onthe second argument its fire when i refresh, i dont know why.
but if add startDelay on my first arguments its work. but i need to place the interval on my second argu
When you want to make delay use setTimeout function.
Here is documentation of this function.
setInterval Repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
I have a click event that has a Jquery animation in it.
How can i guarantee that the animation has finished when multiple click events are being fired.
$(this._ScrollBarTrack).click(function(e) {
if(e.target === this && _self._horizontalClickScrollingFlag === false){
_self._horizontalClickScrollingFlag = true;
if(_self._isVertical){
} else{ //horizontal
if(e.offsetX > (this.firstChild.offsetWidth + this.firstChild.offsetLeft)){ // Moving Towards Right
var scrollableAmountToMove = _self._arrayOfCellSizes[_self._scrollBarCurrentStep + 1]; // additional amount to move
var scrollableCurrentPosition = -($(_self._bodyScrollable).position().left);
var scrollBarCurrentPosition = $(_self._ScrollBarTrackPiece).position().left;
var scrollBarAmountToMove = _self.getScrollBarTrackPiecePositionBasedOnScrollablePosition(scrollableAmountToMove);
$(".event-scroll-horizontally").animate({left:-(scrollableCurrentPosition+ scrollableAmountToMove)});
$(_self._ScrollBarTrackPiece).animate({left: (scrollBarCurrentPosition + scrollBarAmountToMove)});
_self._scrollBarCurrentStep += 1;
} else{
var scrollableAmountToMove = _self._arrayOfCellSizes[_self._scrollBarCurrentStep - 1]; // additional amount to move
var scrollableCurrentPosition = -($(_self._bodyScrollable).position().left);
var scrollBarCurrentPosition = $(_self._ScrollBarTrackPiece).position().left;
var scrollBarAmountToMove = _self.getScrollBarTrackPiecePositionBasedOnScrollablePosition(scrollableAmountToMove);
$(".event-scroll-horizontally").animate({left:-(scrollableCurrentPosition - scrollableAmountToMove)});
$(_self._ScrollBarTrackPiece).animate({left: (scrollBarCurrentPosition - scrollBarAmountToMove)});
_self._scrollBarCurrentStep -= 1;
}
}
_self._horizontalClickScrollingFlag = false;
}
});
jQuery has a hidden (I'm not sure why it's not in the docs someplace) variable $.timers that you can test against.
I made this function a long time ago to handle situations like this. Mind you, this will test to make sure there are NO animations currently being executed.
function animationsTest (callback) {
var testAnimationInterval = setInterval(function () {
if ($.timers.length === 0) { // any page animations finished
clearInterval(testAnimationInterval);
callback(); // callback function
}
}, 25);
};
Useage: jsFiddle DEMO
animationsTest(function () {
/* your code here will run when no animations are occuring */
});
If you want to test against one individually you could do a class/data route.
$('#thing').addClass('animating').animate({ left: '+=100px' }, function () {
// your callback when the animation is finished
$(this).removeClass('animating');
});
You could declare a global boolean called isAnimating and set it to true right when you begin the animation. Then add a done or complete function to the animation that sets it back to false. Then set your click event to only begin the animation if isAnimating is false.
hey, how can I have my download link hidden, and make a count down type thing. Maybe have it count down from 10 and once it's done that have the download link appear, it would be best to do it in js right?
does anyone know how to do this? :D
Thanks
Complete example:
<span id="countdown"></span>
<a id="download_link" href="download.zip" style="display:none;">Download</a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
var message = "%d seconds before download link appears";
// seconds before download link becomes visible
var count = 10;
var countdown_element = document.getElementById("countdown");
var download_link = document.getElementById("download_link");
var timer = setInterval(function(){
// if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
if (count) {
// display text
countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
// decrease counter
count--;
} else {
// stop timer
clearInterval(timer);
// hide countdown
countdown_element.style.display = "none";
// show download link
download_link.style.display = "";
}
}, 1000);
})();
</script>
You can use setInterval for this. setInterval behaves like a timer, where you can run a certain function periodically. Something like this should do the work(untested):
$(".link").hide();
var iteration = 0;
var timer = setInterval(function() {
if(iteration++ >= 10) {
clearTimeout(timer);
$(".link").show();
$(".counter").hide();
}
$(".counter").text(10 - iteration);
}, 1000);
This will initially hide the download link and run a function every second which counts down from 10. When we reaced ten, we hide the counter and show the link. ClearTimeout is used so that we don't count after we reached ten. Easy as dell.
Edit: As mentioned in the comments, this function is using jQuery to find the elements.
Take a look at the setTimeout function. You can do something like:
function displayLink() {
document.getElementById('link_id').style.display = 'block';
}
setTimeout(displayLink, 10000);
var WAIT_FOR_SECONDS = 10;
var DOWNLOAD_BUTTON_ID = "btnDownload";
if (document.body.addEventListener) {
document.body.addEventListener("load", displayDownloadButton, false);
} else {
document.body.onload = displayDownloadButton;
}
function displayDownloadButton(event) {
setTimeout(function() {
_e(DOWNLOAD_BUTTON_ID).style.display = "";
}, WAIT_FOR_SECONDS*1000);
}
function _e(id) {
return document.getElementById(id);
}