We Keep Coding

Mouse not dragging to its current position on progress bar

I am unable to figure out why the mouse is not dragging the progress bar, I don't receive any errors when I check the console. I think the mouse is being detected that it is dragging but the progress width is not updating.
//php file
$(document).ready(function() {
$(".playingBar .progressBar").mousedown(function() {
mouseClicked = true;
});
$(".playingBar .progressBar").mousemove(function(event) {
if(mouseClicked = true) {
timeFromOffset(event, this);
}
});
$(".playingBar .progressBar").mouseup(function(event) {
timeFromOffset(event, this);
});
$(document).mouseup(function(event) {
mouseClicked = false;
});
});
function timeFromOffset(mouse, progressBar) {
var percentage = mouse.offsetX / $(progressBar).width() * 100;
var seconds = audioElement.audio.duration = (percentage / 100);
audioElement.setTime(seconds);
}
//script.js file
var audioElement;
var mouseClicked = false;
function timeProgressBarUpdate(audio) {
$(".progressTimer.current").text(timeFormat(audioElement.audio.currentTime));
$(".progressTimer.remaining").text(timeFormat(audioElement.audio.durati
on - audioElement.audio.currentTime));
var barProgressed = (audioElement.audio.currentTime /
audioElement.audio.duration * 100)
$(".playingBar .progress").css("width", barProgressed + "%");
}
function Audio() {
this.currentPlaying;
this.audio = document.createElement('audio');
this.audio.addEventListener("canplay", function() {
var timeLeft = timeFormat(this.duration);
$(".progressTimer.remaining").text(timeLeft);
//this refers to object which event is called on.
});
this.audio.addEventListener("timeupdate", function() {
if(this.duration) {
timeProgressBarUpdate()
}
});
this.setTime = function(seconds) {
this.audio.currentTime - seconds;
}
}
The mouse should be able to drag the progress bar to the width based on the start of the progress bar to the horizontal position of the mouse. This will then update the css width so that it shows the progress on screen.

I found the issue, accidentally used = instead of * at var seconds in the calculation.
This made the seconds equal to 0 which is why it was not dragging at all because it was reset to 0 on click so looked as if it was not dragging.
Thanks to those who commented to help.

How to make function work when the mouse not moving?

$(document).ready(function() {
var score = 0;
$("body").mousemove(function() {
score++;
$("#result").val(score);
console.log(score);
});
});
The score will increase every time when I move the mouse, but how should I add a function to decrease the score until 0 when the mouse is not moving?

You could set an interval that decreases the value if the mouse does not move, and clear it when it moves, and reset it, something like this:
$(document).ready(function() {
var score = 0, decreaseInterval, intervalTime = 1000;
function decrease() {
if (score > 0) score--;
$("#result").val(score);
};
decreaseInterval = setInterval(decrease, intervalTime);
$("body").mousemove(function(){
clearInterval(decreaseInterval);
score ++;
$("#result").val(score);
decreaseInterval = setInterval(decrease, intervalTime);
console.log(score);
});
});
Here is a fiddle to demonstrate it working: https://jsfiddle.net/0swrae76/1/

Option: Use elapsed time. When the mouse is moved, check now() vs last time mouse was moved. Use elapsed time to decrease the score in a chunk.

Javascript element fade in interval not working correctly

The code I wrote, I made it in order for a certain div to fade in when my window.pageYOffset is more than 400 and it works weird. To begin with, it fades in but it flashes until the opacity is set to 1.0 and I don't know how to fix it. Please help me I don't know which is my mistake. Here is the code:
var navBarVisibility = function () {
if (window.pageYOffset > 400) {
var movies = document.getElementById("movies");
var opacity = 0.1;
var apparence = function () {
if (opacity <= 1.0) {
movies.style.opacity = opacity;
} else {
clearInterval(timer2);
clearInterval(timer);
}
opacity += 0.1;
}
var timer = window.setInterval(apparence, 70);
}
}
var timer2 = window.setInterval(navBarVisibility, 1);
Thank you very much.

It acts that way because you do not check if the code has already run, so it keeps firing the same event over and over when you are past 400.
You need to cancel timer2 when the offset is past 400.

jQuery spin function - specify 20% spin upon image click?

I'm a jQuery newbie - but have managed to modify a roulette wheel script to spin a "pie" image for a homepage I'm working on.
It works great - but the client also want to add an arrow on either side that will advance the pie one section upon click - so clockwise for one arrow, counter-clockwise for another.
Is there a way to specify a partial spin?
Any guidance is much appreciated! I'm trying to meet a ridiculous deadline and am struggling with this.
Here's the page:
http://bluetabby.com/rr/index13.html
Here's the jQuery code so far - the functions I need to figure out are leftArrow and rightArrow:
$( document ).ready(function() {
window.WHEELOFFORTUNE = {
cache: {},
init: function () {
console.log('controller init...');
var _this = this;
this.cache.wheel = $('.wheel');
this.cache.wheelSpinBtn = $('.wheel');
this.cache.leftArrow = $('.leftarrow');
this.cache.rightArrow = $('.rightarrow');
//mapping is backwards as wheel spins clockwise //1=win
this.cache.wheelMapping = ['Mitzvahs','Galas','Florals','Props','Weddings'].reverse();
this.cache.wheelSpinBtn.on('load', function (e) {
e.preventDefault();
if (!$(this).hasClass('disabled')) _this.spin();
});
this.cache.rightArrow.on('click', function (e) {
e.preventDefault();
if (!$(this).hasClass('disabled')) _this.spin();
});
},
spin: function () {
console.log('spinning wheel');
var _this = this;
//disable spin button while in progress
this.cache.wheelSpinBtn.addClass('disabled');
/*
Wheel has 10 sections.
Each section is 360/10 = 36deg.
*/
var deg = 1000 + Math.round(Math.random() * 1000),
duration = 6000; //optimal 6 secs
_this.cache.wheelPos = deg;
//transition queuing
//ff bug with easeOutBack
this.cache.wheel.transition({
rotate: '0deg'
}, 0).delay(1000)
.transition({
rotate: deg + 'deg'
}, duration, 'easeOutCubic');
//move marker
_this.cache.wheelMarker.transition({
rotate: '-20deg'
}, 0, 'snap');
//just before wheel finish
setTimeout(function () {
//reset marker
_this.cache.wheelMarker.transition({
rotate: '0deg'
}, 300, 'easeOutQuad');
}, duration - 500);
//wheel finish
setTimeout(function () {
// did it win??!?!?!
var spin = _this.cache.wheelPos,
degrees = spin % 360,
percent = (degrees / 360) * 100,
segment = Math.ceil((percent / 5)), //divided by number of segments
win = _this.cache.wheelMapping[segment - 1]; //zero based array
console.log('spin = ' + spin);
console.log('degrees = ' + degrees);
console.log('percent = ' + percent);
console.log('segment = ' + segment);
console.log('win = ' + win);
//re-enable wheel spin
_this.cache.wheelSpinBtn.removeClass('disabled');
}, duration);
},
resetSpin: function () {
this.cache.wheel.transition({
rotate: '0deg'
}, 0);
this.cache.wheelPos = 0;
}
}
window.WHEELOFFORTUNE.init();
});//]]>
Thanks for any pointers!

I looked through your code and figured out you are using transit.js to do the spinning animations. Essentially, the object's css (transform "rotate") is being updated over a certain amount of time (like jQuery's animate).
You can extend your wheel of fortune object with spinright and spinleft functions (or whatever name you prefer), which you can bind to the keys/buttons that you'll create. Your code would look something like this:
WHEELOFFORTUNE.spinright = function() {
// get current degree of wheel and convert to integer
var degree = parseInt( this.cache.wheel.css('rotate'), 10 );
this.cache.wheel.transition( { "rotate": (degree + 73) + "deg" },1000 );
}
WHEELOFFORTUNE.spinleft = function() {
var degree = parseInt( this.cache.wheel.css('rotate'), 10 );
this.cache.wheel.transition( { "rotate": (degree - 73) + "deg" },1000 );
}
Then you can bind these functions to buttons or call the functions directly in console:
WHEELOFFORTUNE.spinright()
WHEELOFFORTUNE.spinleft()
Note: 73deg looks to be about the amount that 1 section is, but you'll probably have to play around with the numbers. You may also want to cache the degrees in your object as well. You probably will also need to figure out a way to center on each section per button press.
Cheers!

html5 animate canvas with elements already drawn

Can I get some help with animating elements on a canvas? I would like to get the elements already drawn on the canvas and "move" them off the canvas and display the new elements. My functions are in javascript and work nicely. I would just like to add animation. TIA.

just have an event handler control the left of the style for that canvas's id and then specify a loop to have it change or move to the left/right based on time.
(function() {
var speed = 10,
movePic = function(moveBy) {
var el = document.getElementById("animationStyle"),
left = el.offsetLeft
if ((moveBy > 0 && left > 399) || (moveBy < 0 && left < 51)) {
clearTimeout(timer);
timer = setInterval(function () {
movePic(moveBy * -1);
}, speed);
}
el.style.left = left + moveBy + "px";
};
var timer = setInterval(function () {
movePic(3)
}, speed);
}());
This would move it back and forth, this is an example that should help you get started.