Develop Reference

if body has class Fade in mp3 sound else fade out

I am trying to fade the volume of an mp3 in to 1 if the body has the class fp-viewing-0
How ever this isn't working and the volume doesn't change how can I fix this?
Code:
var audio0 = document.getElementById('audio-0');
audio0.volume = 0;
setInterval( function(){
if ($("body").hasClass("fp-viewing-0")) {
audio0.animate({volume: 1}, 1000);
}
else {
audio0.animate({volume: 0}, 1000);
}
}, 100);
HTML
<audio id="audio-0" src="1.mp3" autoplay="autoplay"></audio>
I've also tried:
$("#audio-0").prop("volume", 0);
setInterval( function(){
if ($("body").hasClass("fp-viewing-0")) {
$("#audio-0").animate({volume: 1}, 3000);
}
else {
$("#audio-0").animate({volume: 0}, 3000);
}
}, 100);
Kind Regards!

I have changed the jquery animate part to a fade made by hand. For that i created a fade time and steps count to manipulate the fade effect.
var audio0 = document.getElementById('audio-0');
audio0.volume = 0;
if ($("body").hasClass("fp-viewing-0")) {
audio0.volume = 1; //max volume
var fadeTime = 1500; //in milliseconds
var steps = 150; //increasing makes the fade smoother
var stepTime = fadeTime/steps;
var audioDecrement = audio0.volume/steps;
var timer = setInterval(function(){
audio0.volume -= audioDecrement; //fading out
if (audio0.volume <= 0.03){ //if its already inaudible stop it
audio0.volume = 0;
clearInterval(timer); //clearing the timer so that it doesn't keep getting called
}
}, stepTime);
}
Better would be to place all of this in a function that receives these values a fades accordingly so that it gets organized:
function fadeAudio(audio, fadeTime, steps){
audio.volume = 1; //max
steps = steps || 150; //turning steps into an optional parameter that defaults to 150
var stepTime = fadeTime/steps;
var audioDecrement = audio.volume/steps;
var timer = setInterval(function(){
audio.volume -= audioDecrement;
if (audio.volume <= 0.03){ //if its already inaudible stop it
audio.volume = 0;
clearInterval(timer);
}
}, stepTime);
}
Which would make your code a lot more compact and readable:
var audio0 = document.getElementById('audio-0');
audio0.volume = 0;
if ($("body").hasClass("fp-viewing-0")) {
fadeAudio(audio0, 1500);
}

How to Stop Interval After on Full Run

Can you please take a look at this demo and let me know how I can stop the animation and interval after reaching 100% and filling the progress bar
I tried adding clearInterval(myVar); to the end of interval but this stops incrementting the percentage text
$(".progress-bar").animate({
width: "100%"
}, 3000);
var myVar=setInterval(function(){myTimer()},1);
var count = 0;
function myTimer() {
if(count < 100){
$('.progress').css('width', count + "%");
count += 0.05;
document.getElementById("demo").innerHTML = Math.round(count) +"%";
// code to do when loading
}
else if(count > 99){
// code to do after loading
count = 0;
}
}
clearInterval(myVar);

Don't use a timer for this. jQuery provides a way for you to listen to the progress of the animation:
$(".progress-bar").animate({
width: "100%"
},{
duration: 3000,
progress: function(_, progr) {
$('#demo').text( Math.round(100 * progr));
}
});
See your updated fiddle
NB: I changed your demo element to a span, as a p will break the % to the next line.

You need to put the code of clearing the interval in the block where you handle the finishing of loading.
var myVar = setInterval(function() {
myTimer()
}, 1);
var count = 0;
function myTimer() {
if (count < 100) {
$('.progress').css('width', count + "%");
count += 0.05;
document.getElementById("demo").innerHTML = Math.round(count) + "%";
// code to do when loading
} else if (count > 99) {
// code to do after loading
count = 0;
// loading is done, clear the interval
clearInterval(myVar);
}
}

Returning animated image to original position

I've been working on a very simple animation script. The images are to move when clicked, stop when clicked again, etc. I have this all working fine. The trouble is I have a stop everything button below the images which is suppose to not only stop the images but to return them to their original position. So far it stops, but it doesn't return.
I've searched and found a few different solutions, however this is a university assignment and I am NOT allowed to use Jquery.
This is my script:
var timer = null;
var cat = null;
var dog = null;
function moveOver1Pixel()
{
cat.style.left = parseInt(cat.style.left) + 1 + "px";
}
function moveOver10Pixels()
{
dog.style.left = parseInt(dog.style.left) + 10 + "px";
}
window.onload=function()
{
//MOVE CAT FUNCTION
cat = document.getElementById("cat");
cat.onclick=function(){
if(timer == null)
{
timer = setInterval("moveOver1Pixel();", 100);
}else{
clearInterval(timer);
timer = null;
}
}
// MOVE DOG FUNCTION
dog = document.getElementById("dog");
dog.onclick=function(){
if(timer == null)
{
timer = setInterval("moveOver10Pixels();", 30);
}else{
clearInterval(timer);
timer = null;
}
}
// STOP BUTTON FUNCTION
document.getElementById("stop").onclick=function()
{
window.clearInterval(timer);
timer = null;
reset = true;
}
}
and this is the html portion I am using:
<img src="cat.jpg" id="cat" style="height:100px;position:absolute;left:10px">
<img src="dog.jpg" id="dog" style="height:100px;position:absolute;left:10px;top:110px">
<input type="button" value="EVERYONE STOP" id="stop" style="position:absolute;left:10px;top:220px">
I feel like the solution to my problem should be simple... something I'm missing inside of the button's onclick function? Or am I going to have to create an entirely new function for the reset/return of the images to their original place?

I changed a lot:
var timer, cat, dog, ticksCat = 0, ticksDog = 0,
moveOver1Pixel = function(inc){
cat.style.left = parseInt(cat.style.left) + inc + "px";
// Don't change if inc is -1, ~-1 === 0 == false
if(~inc) ticksCat+=inc;
},
moveOver10Pixels = function(inc){
dog.style.left = parseInt(dog.style.left) + inc*10 + "px";
if(~inc) ticksDog+=inc;
};
window.onload=function(){
//MOVE CAT FUNCTION
cat = document.getElementById("cat");
cat.onclick=function(){
if(!timer){
timer = setInterval(function(){
moveOver1Pixel(+1);
}, 100);
}else{
clearInterval(timer);
timer = null;
}
};
// MOVE DOG FUNCTION
dog = document.getElementById("dog");
dog.onclick=function(){
if(!timer){
timer = setInterval(function(){
moveOver10Pixels(+1);
}, 30);
}else{
clearInterval(timer);
timer = null;
}
};
// STOP BUTTON FUNCTION
document.getElementById("stop").onclick=function(){
window.clearInterval(timer);
timer = null;
reset = true;
// to do immediately
while(ticksCat--){ moveOver1Pixel(-1); }
while(ticksDog--){ moveOver10Pixels(-1); }
/* animated
while(ticksCat--){ setTimeout(function(){moveOver1Pixel(-1)}, 100*ticksCat);}
while(ticksDog--){ setTimeout(function(){moveOver10Pixels(-1)}, 30*ticksDog);}
Multiplication on time is to synchronously set a queue of async moves
*/
};
};

How about this?
document.getElementById("stop").onclick=function()
{
window.clearInterval(timer);
timer = null;
reset = true;
document.getElementById("cat").style.left = "10px"
document.getElementById("dog").style.left = "10px"
}

var timer = null;
var cat = null;
var dog = null;
function moveOver1Pixel()
{
cat.style.left = parseInt(cat.style.left) + 1 + "px";
}
function moveOver10Pixels()
{
dog.style.left = parseInt(dog.style.left) + 10 + "px";
}
window.onload=function()
{
//MOVE CAT FUNCTION
cat = document.getElementById("cat");
cat.onclick=function(){
if(timer == null)
{
timer = setInterval("moveOver1Pixel();", 100);
cat.startLeft=cat.offsetLeft;
cat.startTop=cat.offsetTop;
}else{
clearInterval(timer);
timer = null;
}
}
// MOVE DOG FUNCTION
dog = document.getElementById("dog");
dog.onclick=function(){
if(timer == null)
{
timer = setInterval("moveOver10Pixels();", 30);
dog.startLeft=dog.offsetLeft;
dog.startTop=dog.offsetTop;
}else{
clearInterval(timer);
timer = null;
}
}
// STOP BUTTON FUNCTION
document.getElementById("stop").onclick=function()
{
window.clearInterval(timer);
timer = null;
reset = true;
if (typeOf cat.startLeft !=undefined)
{
cat.style.left=cat.startLeft+"px";
cat.style.top=cat.startTop+"px";
}
if (typeOf dog.startLeft !=undefined)
{
dog.style.left=dog.startLeft+"px";
dog.style.top=dog.startTop+"px";
}
}
}

A more modern and "proper" solution to would be to use css transitions to handle the animation while using JS to control the position:
var cat = document.getElementById("cat");
var dog = document.getElementById("dog");
cat.addEventListener('click', moveIt);
dog.addEventListener('click', moveIt);
function moveIt()
{
this.style.left = "400px";
}
// STOP BUTTON FUNCTION
document.getElementById("stop").addEventListener('click', function()
{
cat.style.removeProperty('left');
dog.style.removeProperty('left');
//Uncomment for instant-reset
/*
cat.style.transitionDuration = dog.style.transitionDuration = '0s';
window.setTimeout(function()
{
cat.style.removeProperty('transition-duration');
dog.style.removeProperty('transition-duration');
}, 250);
*/
});
With your css looking something like this:
#cat, #dog
{
position: absolute;
left: 10px;
transition: 10s left linear;
}
#cat
{
left: 25px
}
#dog
{
transition-duration: 1s;
}
See this JSFiddle for a demo: http://jsfiddle.net/SPHMM/3/. Of course, if the assignment is specifically to do all the animation in javascript, this probably doesn't count. But for real life applications, this should provide the best quality, lowest cpu usage animation.

jQuery progress timer bar

I have a progress timer bar in jQuery - here is an example http://jsfiddle.net/6h74c/
If I have time values in milliseconds, (600000 = 10 minutes, 300000 = 5 minutes, etc), how can I make the bar increment for that period of time?
In the jsfiddle link, I'm trying to set the progress bar to increase for 835000ms.
However, the setTimeout() determines how often the bar will increase and it is also basing it off of width percentage, which doesn't seem accurate - should I be doing this differently?
function updateProgress(percentage) {
$('#pbar_innerdiv').css("width", percentage + "%"); // probably not ideal
$('#pbar_innertext').text(percentage + "%");
}
function animateUpdate() {
perc++;
updateProgress(perc);
if(perc < 835000) {
timer = setTimeout(animateUpdate, 50); // probably not ideal either?
}
}

Fiddle Example
I would do something like:
var start = new Date();
var maxTime = 835000;
var timeoutVal = Math.floor(maxTime/100);
animateUpdate();
function updateProgress(percentage) {
$('#pbar_innerdiv').css("width", percentage + "%");
$('#pbar_innertext').text(percentage + "%");
}
function animateUpdate() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff/maxTime)*100);
if (perc <= 100) {
updateProgress(perc);
setTimeout(animateUpdate, timeoutVal);
}
}

Simply do some good old fashioned math. It doesnt seem right because you're giving width percentage as the value of the "tick" which will eventually be 835000! Meaning you eventually have a width of "835000%"!!!
Example
var timer = 0,
perc = 0,
timeTotal = 835000,
timeCount = 50;
function updateProgress(percentage) {
var x = (percentage/timeTotal)*100,
y = x.toFixed(3);
$('#pbar_innerdiv').css("width", x + "%");
$('#pbar_innertext').text(y + "%");
}
function animateUpdate() {
if(perc < timeTotal) {
perc++;
updateProgress(perc);
timer = setTimeout(animateUpdate, timeCount);
}
}
$(document).ready(function() {
$('#pbar_outerdiv').click(function() {
clearTimeout(timer);
perc = 0;
animateUpdate();
});
});

jsFiddle Demo
Description
This just simply increases the progress every 10ms...since you know the time it takes, take that time and divide by 100 then make that your timeinterval in var timer = setInterval(updateProgressbar, 10);
HTML
<div id="progressbar"></div>
JS
var progress = 0;
var timer = setInterval(updateProgressbar, 10);
function updateProgressbar(){
$("#progressbar").progressbar({
value: ++progress
});
if(progress == 100)
clearInterval(timer);
}
$(function () {
$("#progressbar").progressbar({
value: progress
});
});
JS Fiddle Just for you
JS
var progress = 0;
var timer = setInterval(updateProgressbar, 8350);
function updateProgressbar(){
$("#progressbar").progressbar({
value: ++progress
});
if(progress == 100)
clearInterval(timer);
}
$(function () {
$("#progressbar").progressbar({
value: progress
});
});

You probably want something like this:
var currentTime = new Date().getTime();
perc = (currentTime - StarTime)/duration;
If set StartTime like that too you can calculate the percentage on every update.

image animation issue when clicking a button

I have this code:
function CreateAndAnimateEnemyImg() {
var nh = Math.floor(Math.random() * w + 30);
var enemy = document.createElement('img');
enemy.src = 'enemy.jpg';
enemy.className = 'Enemy';
pane.append(enemy);
enemy.onload = function () {
enemy.style.top = nh + 'px';
}
}
$("#Start").click(function () {
var x = setInterval(function () {
CreateAndAnimateEnemyImg();
$('.Enemy').animate({ 'left': '-=20px' });
time--;
}, 20);
if (time == 0) {
timeElapsed = true;
clearInterval(x);
}
});
And this is the jsfiddle
I know my logic is wrong and I want u to help me to fix my problem on click an new image should be created and animated and a a counter should be initialize when the counter is set to 0 the creation of the new images should be stopped but the created images should still animate to left -20px

i have changed the position of the clear interval and adde some condition check
if (time > 0) {
$('.Enemy').animate({ 'left': '-=20px' });
time--;
console.log(time);
if(time == 0){
timeElapsed = true;
clearInterval(x);
}
}
check here Fiddle

Modified the Start click handler little bit. Enemy animate is moved to its own timer and inside the create new enemies interval added check to see if created time reached max.
Here is the new code, updated fiddle demo
$("#Start").click(function () {
intervalPoint = setInterval(function () {
CreateAndAnimateEnemyImg();
time--;
if (time == 0)
StopTimer();
}, 20);
setInterval(function () {
$('.Enemy').animate({ 'left': '-=20px' });
}, 20);
});
function StopTimer(){
timeElapsed = true;
clearInterval(intervalPoint);
time = 3;
}