I am experiencing difficulty figuring out how to break out of this progress bar after the final download completes. I have tried break and return false and neither seems to work. The page is supposed to load and then the progress bar begins the first download then goes through the second and third downloads and should stop after the 3rd download and present an alert or dialog box stating "Complete" - with a button that redirects the user to another URL when clicked. I know it is something simple that I am missing but can't figure out how to accomplish this. If any guru's out there can lend a hand I would appreciate it.
<head>
<title>Download Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
var i=0;
var u=0;
function fnc(){
setInterval(function(){
document.getElementById("bar").style.width=i+"%";
document.getElementById("bar").innerHTML=i+"%";
document.getElementById("u1").innerHTML=i+"%";
i++;
if(u===0){document.getElementById("u1").innerHTML="Download 1";}
if(u===1){document.getElementById("u1").innerHTML="Download 2";}
if(u===2){document.getElementById("u1").innerHTML="Download 3";}
if(i===100){
u++;
i=0;}
}, 150);
}
</script>
</head>
<body onload="fnc()">
<div class="container">
<h3 id="u1">Starting downloads</h3>
<div class="progress">
<div id="bar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
</body>
You've used setInterval which means "keep doing this".
You could use setTimeout and keep adding a new timeout or you could store the result of setInterval and then use clearInterval when finished:
// create update as a separate function instead of inline
function update() {
...
// update finished, just return
if (u===4) return;
// not finished, start again
setTimeout(update, 150);
}
// start update checks
setInterval(update, 150);
or
var timer = null;
timer = setInterval(function() {
// update finished, cancel timeout
if (u===4) { clearInterval(timer); }
}, 150);
Personal preference is the first one as you have more control over restarting the loop and don't run the risk of starting a second loop before the first has finished.
Related
Hello i am setting up a selfie "photobooth". Everything works like fine but i found a bug and dont't find a solution.
I'll explain the function: I have a webcam that shows live-video. If i push the "s"-key it takes a picture and freezes it to the screen for 15 seconds. Wile it is showing the frozen image i can push "s"-key again for stopping the freez and start again with the live-video. Otherwise it jumps back to live-video after 15 seconds. Till here everything works perfect.
Now my problem: If i push the "s"-key more often while the freezed image is showing. It clears the frozen image and shows my background-image giving my a error-box with this message: "Webcam.js Error: Webcam is not loaded yet"
How can this be solved?
Thanks for any help!
Here is my code:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emotionen Fotobooth</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img src="bg.jpg" id="bg" alt="">
<div id="foto">
<div id="my_camera"></div>
<!-- <input type=button class=anybutton value="Take Snapshot" onClick="take_snapshot()"> -->
<!-- Webcam.min.js -->
<script type="text/javascript" src="webcamjs/webcam.min.js"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
let seconds = 15 // time to show image
// Configure a few settings and attach camera
let propwidth = 1600 // width of webcam window
Webcam.set({
width: propwidth,
height: (propwidth/16)*9,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
// preload shutter audio clip
//var shutter = new Audio();
//shutter.autoplay = true;
//shutter.src = 'shutter.mp3';
//document.addEventListener('DOMContentLoaded', (event) => {
document.addEventListener('keydown', function(event) {
if (event.code == 'KeyS' ) {
take_snapshot()
}
});
function take_snapshot() {
// play sound effect
// shutter.play();
// take snapshot and get image data
Webcam.snap( function(data_uri) {
document.getElementById('my_camera').innerHTML = '<img src="'+data_uri+'"/>';
show_snapshot();
});
}
function show_snapshot(){
// display results in page
document.addEventListener('keydown', function(event) {
if (event.code == 'KeyS' ) {
window.location.href = window.location.href;
}
});
var showTimer = setInterval(function(){
clearInterval(showTimer);
window.location.href = window.location.href;
}, seconds*1000);
}
//})
Webcam.attach( '#my_camera' );
</script>
</div>
</body>
</html>
So I am embedding a video into a custom iframe, and I'm not using youtube, vimeo or any of those so I can't use their APIs. I am making an idle-timer for it, so when the user hasnt acted in X amount of time, it will bring up a confirm window asking if they want to keep watching or restart. However, while this window is up, I want the video to pause, which is proving surprisingly difficult. It also pretty much needs to be cross-domain as I will be serving the videos with an s3 bucket.
I have seen many threads saying this is basically not possible, but I find that hard to believe. Is it true?
Here's my code (the main part I need help with is pauseVideo() near the bottom):
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>HRMSC</title>
</head>
<body>
<iframe class="iframe" id="primaryVideo" src="amazon-s3-video-link.mp4"
width="1000"
height="562.5">
<p> Your browser does not support iframes. </p>
</iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type="text/javascript" src="./IdleScript.js">
</script>
</body>
</html>
IdleScript.js :
var idleTime = 0;
var clickIframe = window.setInterval(checkFocus, 100);
var idleInterval = setInterval(timerIncrement, 600); // 1 second
var i = 0;
function checkFocus() {
if(document.activeElement == document.getElementById("primaryVideo")) {
idleTime = 0;
console.log("clicked "+(i++));
$('#primaryVideo').blur();
}
}
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime > 5) { // seconds
console.log("restart?");
if (this.resetInterstitial()){
idleTime = 0;
window.location.reload();
}
else{
idleTime = 0;
console.log("keep watching");
}
}
}
var pauseVideo = function ( element ) {
// WHAT CAN I DO HERE?
console.log("pause!");
// WHAT CAN I DO HERE?
};
function resetInterstitial(){
pauseVideo(primaryVideo);
return confirm("You haven't tapped anything in a while. Do you want to keep watching or start from the beginning?");
}
Use a <video>-tag: https://www.w3schools.com/tags/tag_video.asp
and use the build-in javascript functions https://www.w3schools.com/tags/av_met_pause.asp
I am using jQuery Countdown Timer & Digital Clock Plugin to create a countdown timer as follows:
<html>
<head>
<link rel="stylesheet" type="text/css" href="timeTo.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
< script src = "jquery.timeTo.js" >
</script>
<script src="jquery.timeTo.min.js"></script>
<script>
var timeval = 60;
var timeval = 60;
$(document).ready(function() {
$('#countdown').timeTo({
seconds: timeval,
displayHours: false
});
});
</script>
</head>
<body>
<div id="countdown"></div>
</body>
</html>
I need to change the color of the timer to red if the time <5sec mean approaches to zero. In order to notify the user that time is going to end.
Also want to redirect to another page once it reached zero.
Please check the Link for API
Please guide me how can make it?
you can use countdownAlertLimit: 5 for your requirement as follow :
var timeval = 60;
$('#countdown').timeTo({ seconds: timeval, displayHours: false, countdownAlertLimit: 5 });
also note if you want to redirect to another page you can use this line of code :
var timeval = 60;
$('#countdown').timeTo({ seconds: timeval, displayHours: false, countdownAlertLimit: 5,callback:function(){
window.location="your location"
} });
When the timer reach 5 the timer will become red.
hope that will help
Perhaps this is what you are looking for. It's already the way you want it if I understood right!
http://lexxus.github.io/jq-timeTo/
I'm trying to stagger for loops over time to draw a grid and keep system load down. For example: for a 100x100 grid that would be 10,000 iterations, instead of doing them all instantly, I want to do 1,000 then wait 250ms and carry on the next 1,000 until it's complete.
I can't seem to figure out why it isn't working.
In this example i am trying to do just that, but it only draws the first 1,000 squares, but console.log('iterate'); still runs and the iteration values follow on!
http://jsfiddle.net/FMJXB/2/
In this example, i have removed the setTimeout and instead calling the function twice, to simulate 2 loops with instant effect, and that draws 2,000 squares!
http://jsfiddle.net/FMJXB/3/
Why does having the function in a setTimeout stop the code from working?
Here’s a coding pattern to stagger drawing iterations using setTimeout
The logic goes like this:
Use variable ”j” to track horizontally draws across your grid.
Use variable “i” to track vertical draws down your grid.
Use variable “iterations” to cut the drawing into blocks of 1000 draws at a time
When iterations has finished it’s 1000 draws, call setTimeout.
This code is for illustration—you will need to adapt it for your easelJS specific needs.
function draw(){
// reset iterations for this block of 1000 draws
var iterations = 0;
// loop through 1000 iterations
while(iterations++<1000){
// put drawing code here
graphics.drawRect(pixl.pixelSize*j, pixl.pixelSize*i, pixl.pixelSize, pixl.pixelSize);
// increment i and j
if(++j>canvas.width-1){ i++; j=0; }
// if done, break
if(i*j>pixelCount) { break; }
}
// schedule another loop unless we've drawn all pixels
if(i*j<=pixelCount) {
setTimeout(function(){ draw(); }, 1000);
}
}
Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/Z3fYG/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:20px; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var i=0;
var j=0;
var pixelCount=canvas.width*canvas.height;
draw();
function draw(){
ctx.beginPath();
var iterations = 0;
while(iterations++<1000){
// put drawing code here
ctx.rect(j,i,1,1);
// increment i and j
if(++j>canvas.width-1){ i++; j=0; }
// if done, break
if(i*j>pixelCount) { break; }
}
ctx.fill();
// schedule another loop unless we've drawn all pixels
if(i*j<=pixelCount) {
setTimeout(function(){ draw(); }, 1000);
}
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas width="100" height="100" id="canvas"></canvas>
</body>
</html>
I have little knowledge of JavaScript and need some help. I have this code (below) which when the countdown finishes, it replaces the image with a new one.
I wanted to modify this so that instead of a countdown - a button (img) is pressed instead. Here's my design to get an idea: Design.
I'm guessing I'll need 4 imageloaders instead of just one this time (one for each box) and some code to make it so that when the "older ->" button is clicked it triggers the loading of images?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/jquery.countdown.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
<!-- The ready() function will force the browser to run wait running the javascript until the entire page has loaded -->
$(document).ready(function() {
// The jquery code for constructing and starting the counter
// has been wrapped inside a function so we can call it whenever we want to
function startCounter(imageLoader){
$('#counter_2').countdown({
image: 'img/digits.png',
startTime: '00:03',
timerEnd: function(){ callback(imageLoader) },
format: 'mm:ss'
})
}
// Takes care of whatever need to be done every time
function callback(imageLoader){
// Replace image
$('#image').attr('src', imageLoader.nextImage());
// Clear the finished counter, so a new can be constructed in its place
$('#counter_2').empty();
// Construct a new counter and starts it
startCounter(imageLoader);
}
function ImageLoader(images){
this.images = images;
this.current = 0;
this.nextImage = function(){
this.current = (this.current+1) % this.images.length;
return this.images[this.current];;
}
}
// Fill in images in this array
imageLoader = new ImageLoader(['img/turd.png', 'img/guitar.gif', 'img/carrot.jpg', 'img/puppy.jpg']);
// Set everything off! (Construct a new counter and starts it)
startCounter(imageLoader);
});
</script>
<style type="text/css">
div.counter{
font-size: 36px;
font-weight: bold;
line-height: 77px;
}
</style>
</head>
<body>
<div id="counter_2" class="counter"></div>
<img id="image" src="img/turd.png" alt="Hot steaming turd">
</body>
</html>
Thanks everyone, I'm really stuck and really appreciate your help.