Mouse not dragging to its current position on progress bar - javascript

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.

Related

Scroll automatic javascript

I have this code:
function scroll() {
shouldScroll = chat.clientHeight === chat.scrollHeight;
if (!shouldScroll) {
scrollToBottom();
}
}
function scrollToBottom() {
chat.scrollTop = chat.scrollHeight;
}
scrollToBottom();
setInterval(scroll, 100);
In this code I have an automatically scroll but, When I want to see the whole conversation, he does not let me go up so I can read the conversations. It just keeps me down.
How can i fix this?
Thanks
Check if user has scrolled to another position using scrollTop or is near to the bottom by comparing to an offset:
var offset = 50; // if user is 50px far from bottom
var shouldScroll = false;
if (chat.scrollHeight - chat.scrollTop) < offset){
shouldScroll = true;
}

stop an event upon mouseup fired by mousedown in jquery

I have searched a lot but i could not find any solution for this or may be i was unable to find good keywords for the question.
I am working on an audio player and the problem is volume control.
Here is my code the dragging function should only occur when mousedown function is working otherwise it should not work , but it does not disable onmousemove event on leaving the mouse button so i need your help..
$(document).ready(function(){
$(".volume_wrapper_slider").on("mousedown", function(e) {
$(this).on("mousemove", function(e) {
isDragging = true;
var slider_width = $(this).width();
var slider_offset = $(this).offset().left;
var percentage1 = (100 / slider_width);
var current_percentage = percentage1 * (e.clientX-slider_offset);
// move the bar w.r.t click
$(".vol_slided").width(current_percentage+"%");
now_playing.volume = parseFloat(percentage1 * ($(".vol_slided").width()/100));
});
});
// mouse up
$(".volume_wrapper_slider").mouseup(function(e) {
e.stopPropagation();
});
});
Update -----------------------------
this solved my problem thanks to #jaromanda-x
// volume control
$(document).ready(function(){
$(".volume_wrapper_slider").on("mousedown", function(e) {
canDrag = true;
$(this).on("mousemove", function(e) {
if (canDrag == true) {
var slider_width = $(this).width();
var slider_offset = $(this).offset().left;
var percentage1 = (100 / slider_width);
var current_percentage = percentage1 * (e.clientX-slider_offset);
// move the bar w.r.t click
$(".vol_slided").width(current_percentage+"%");
now_playing.volume = parseFloat(percentage1 * ($(".vol_slided").width()/100));
}
});
// mouse up
$(".volume_wrapper_slider").mouseup(function(e) {
canDrag = false;
});
});
});
that worked for me..
// volume control
$(document).ready(function(){
$(".volume_wrapper_slider").on("mousedown", function(e) {
canDrag = true;
$(this).on("mousemove", function(e) {
if (canDrag == true) {
var slider_width = $(this).width();
var slider_offset = $(this).offset().left;
var percentage1 = (100 / slider_width);
var current_percentage = percentage1 * (e.clientX-slider_offset);
// move the bar w.r.t click
$(".vol_slided").width(current_percentage+"%");
now_playing.volume = parseFloat(percentage1 * ($(".vol_slided").width()/100));
}
});
// mouse up
$(".volume_wrapper_slider").mouseup(function(e) {
canDrag = false;
});
});
});

Animation continues after once trigged by scroll

I made a bar chart only with CSS and a animation from low to up that works well, however I want to run only when trigged by scroll.
Somehow the animation after trigged by the scroll does not stop, it keeps running.
look in the inspect element the latest bar.
jquery
// Bar Chart Animation
function barChart(){
$("#demographicsBars li .bar").each( function( key, bar ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000, function() {
$('.viewerDemographics #demographicsBars li .bar').css('overflow','inherit');
});
});
};
// Scroll Call Animation
$(window).scroll(function () {
$('.viewerDemographics').each(function () {
var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
barChart();
} else {
}
});
});
jsfiddle
It's because you're asking it to.
http://jsfiddle.net/g6r1vngh/1/
Tell JS it hasn't been drawn
// Bar Chart Animation
var barChartDrawn = false;
Set it to true when it runs
function barChart(){
barChartDrawn = true;
Don't do any of those calculations, or run the function, if it's true
$(window).scroll(function () {
if (barChartDrawn) return;

html element doesn't move correctly with jQuery

I have to repair bottom slider on http://rhemapress.pl/www_wopr/ . If you see when you click right arrow twice, then animation back to start and animate again. Here when i click one on right arrow time this should be blocked and not possible to click second time.
Numer of moves right is created dynamicly by checkWidth();
function checkWidth() {
var elements = $('.items').children().length;
var width = Math.ceil(elements / 5) * 820;
return width;
}
This return realWidth witch is something like limit of offset. Variable offset is setted to 0 at start. So, if i click right, then in method moveRight() is checked if element can be moved and it's move. At end offset is increment by 820px (one page of slider), so if we've got 2 pages, then next move can't be called. But it is and this is problem! :/
My code
<script type="text/javascript">
$(document).ready(function() {
$('a.prev').bind('click',moveLeft);
$('a.next').bind('click',moveRight);
var realWidth = checkWidth();
realWidth -= 820;
var offset = 0;
function moveLeft(e) {
var position = $('.items').position();
var elements = $('.items').children().length;
if ((elements > 5) && ((offset - 820) >= 0) ) {
$('.items').animate({
'left': (position.left + 820)
}, 300, function() {
offset -= 820;
});
}
}
function moveRight(e) {
var position = $('.items').position();
var elements = $('.items').children().length;
if ((elements > 5) && ((offset + 820) <= realWidth)) {
$('.items').animate({
'left': (position.left - 820)
}, 300, function() {
offset += 820;
});
}
}
function checkWidth() {
var elements = $('.items').children().length;
var width = Math.ceil(elements / 5) * 820;
return width;
}
});
</script>
How can i do this correctly?
It seems like you want to prevent the click event from firing before the current animation is complete. You can do this by preventing the rest of the function from executing if the element is currently being animated:
function moveLeft(e) {
if ($(this).is(":animated")) {
return false;
}

How can I make a div appear over specific area tags on an image on mouseover?

I have some javascript that moves an image continuously left. When you mouseover the image, I want the scrolling to stop, and I want a slightly transparent div with some custom text to appear over whatever area tag your mouse is over.
Here is the JS I'm using, and I commented out where things should happen. How would I do this?
$(document).ready(function() {
var date = new Date();
var style = "day"
if (date.getHours() >= 17 && date.getHours() <=5) {
style="night";
}
setInterval(wells_fancy_slider, 50);
$('area').hover(function() {
// here is where the code should go
paused = true;
}, function() {
// here is where you hide the div
paused = false;
})
})
function wells_fancy_slider() {
if (!paused) {
if (parseInt($('#pic1').css('left')) < -2770) {
$('#pic1').css('left', '5586');
}
if (parseInt($('#pic2').css('left')) < -2770) {
$('#pic2').css('left', '5586');
}
if (parseInt($('#pic3').css('left')) < -2770) {
$('#pic3').css('left', '5586');
}
$('#pic1, #pic2, #pic3').css('left', '-=5');
}
}
Not sure it will fit your needs:
CSS:
#mydiv{position:absolute;display:none}
$('area').hover(function() {
$('mydiv').offset({ top: $(this).offset().top, left: $(this).offset().left}).fadeIn();
paused = true;
}, function() {
$('#mydiv').hide();
paused = false;
})
Try this one..
t = setInterval(wells_fancy_slider, 50);
$('#area').hover(function(e) {
clearInterval(t);
var parentOffset = $(this).offset(); // or $(this).parent().offset();
var x = e.pageX - parentOffset.left;
var y = e.pageY - parentOffset.top;
paused = true;
}, function() {
clearInterval(t);
t = setInterval(wells_fancy_slider, 50);
paused = false;
});

Categories