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;
});
});
});
Related
I want to call a function only once every time the div #blinds reach their max-height at 430px, how can I do this?
My Codepen: https://codepen.io/cocotx/pen/YzGBpVJ
window.addEventListener('mousemove', function(event) {
var blinds = document.getElementById("blinds");
blinds.style.height = event.clientY + 'px';
});
One polling way is adding the code below in your js if there are other behaviours changing the size of the element. Simply change 400 to the value you want.
var blinds = document.getElementById("blinds");
setInterval(() => {
let rect = blinds.getBoundingClientRect();
if (rect.height > 400)
console.log(" reach 400");
}, 100);
window.addEventListener('mousemove', function(event) {
var blinds = document.getElementById("blinds");
blinds.style.height = event.clientY + 'px';
// i added here the condition
if(blinds.offsetHeight > 430 /*the value you want*/){
//call your function
}
});
Notice that this doesn't work if you use blinds.style.height instead of blinds.offsetHeight, there's a difference between using these but i im still trying to figure it out.
I would suggest to clean your code:
window.addEventListener('mousemove',handler);
function handler(event){
...
if(blinds.offsetHeight >430){
//call your function
...
//and maybe remove the listener
window.removeEventListener('mousemove',handler);
}
};
EDIT: try this code
function hasReachedMax(){
var styles = getComputedStyle(blinds);
var borderBottom = styles.borderBottom.split("px")[0]; //this is to get the number of pixels
var borderTop = styles.borderTop.split("px")[0];
var maxH = styles.maxHeight.split("px")[0];
var currentDivSize = blinds.offsetHeight-borderBottom-borderTop;
return maxH == currentDivSize;
};
function resetTrigger(){
//the condition to reset your trigger, for example making the div element at least 5 px smaller than maxHeight
var styles = getComputedStyle(blinds);
var borderBottom = styles.borderBottom.split("px")[0];
var borderTop = styles.borderTop.split("px")[0];
var maxH = styles.maxHeight.split("px")[0];
var currentDivSize = blinds.offsetHeight-borderBottom-borderTop;
return maxH-currentDivSize>5;
};
//this should be part of your main code
var trigger = true;
window.addEventListener('mousemove', function(event) {
var blinds = document.getElementById("blinds");
blinds.style.height = event.clientY + 'px';
if(hasReachedMax()&&trigger){
//call your function
console.log("Im called now");
trigger=false;
}
if(resetTrigger()) trigger=true;
});
I have the href attribute(another page) on my home page. another page's on-load function works fine if I click on it. in case if I do with (control + left click on the link), or (right-click -> open in new tab), on-load function not fired if it was not my active or current tab. if I switch into that particular tab immediately, it works fine as usual. my question is, will it not work if it is not our current tab. any alternative solution for it. thanks
window.onload = swipe();
function swipe() {
if (window.outerWidth > 1024) {
var slider = document.getElementsByClassName("cards")[0];
var isDown = false;
var startX;
var scrollLeft;
slider.addEventListener('mousedown', function (e) {
isDown = true;
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
e.preventDefault();
});
slider.addEventListener('mouseleave', function () {
isDown = false;
});
slider.addEventListener('mouseup', function () {
isDown = false;
});
slider.addEventListener('mousemove', function (e) {
if (!isDown) return;
e.preventDefault();
var x = e.pageX - slider.offsetLeft;
var walk = (x - startX) * 3;
slider.scrollLeft = scrollLeft - walk;
});
}
var swipe_sec = document.getElementsByClassName("cards")[0];
function calc_prog(winScroll, width) {
var scrolled = ((winScroll) / width) * 100;
document.getElementById("t_art_prog").style.width = scrolled + "%";
}
var winScroll = swipe_sec.clientWidth;
var width = swipe_sec.scrollWidth - swipe_sec.clientWidth;
calc_prog(winScroll, width);
swipe_sec.addEventListener("scroll", function () {
var winScroll = swipe_sec.scrollLeft + swipe_sec.clientWidth;
var width = swipe_sec.scrollWidth;
calc_prog(winScroll, width);
});
}
The problem is not with window.onload, it is with if (window.outerWidth > 1024), window.outerWidth will be 0 when you open in a new tab.
Two solutions I can think of -
Use window.visualViewport.width instead of window.outerWidth
Try using focus event like this -
window.addEventListener('focus', function(){
...
});
Note - Focus event will be triggered every time when you switch to the tab, you have to control it to execute only once.
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.
I am trying to change the length of two bars (div) by mouse dragging (extending one example in eloquetjavascript book chapter 14, which involves changing the length of one bar by dragging the mouse.) The intended behavior is clicking on any bar, moving the mouse when holding the left mouse key would change the length of that bar.
Here is my implementation (also available on JSfiddle)
<script>
var lastX; // Tracks the last observed mouse X position
var rect1 = document.getElementById("bar1");
var rect2 = document.getElementById("bar2");
rect1.addEventListener("mousedown", function(){watchmousedown(rect1)});
rect2.addEventListener("mousedown", function(){watchmousedown(rect2)});
function watchmousedown(rec) {
if (event.which == 1) {
lastX = event.pageX;
addEventListener("mousemove",function(){moved(rec)});
event.preventDefault(); // Prevent selection
} else {
removeEventListener("mousedown", watchmousedown)}
}
function moved(rec) {
if (event.which != 1) {
removeEventListener("mousemove", moved);
} else {
var dist = event.pageX - lastX;
var newWidth = Math.max(10, rec.offsetWidth + dist);
rec.style.width = newWidth + "px";
lastX = event.pageX;
}
}
</script>
The problem is I can only change the length of the bar where the first mouse click event happened. I assume I didn't handle the mousedown event correctly (probably need a reset some how).
I am new to javascript, help on programming style is also appreciated.
Thanks!
Add rec. to addEventListener("mousemove", function () { so that the event listener is bound to the rec you clicked on instead of to the window.
function watchmousedown(rec) {
if (event.which == 1) {
lastX = event.pageX;
rec.addEventListener("mousemove", function () {
moved(rec)
});
event.preventDefault(); // Prevent selection
} else {
rec.removeEventListener("mousedown", watchmousedown)
}
}
Edit: I there are some event handlers not being cleaned up properly. I don't know if this would be my final code, but this is closer to how I would do it:
var lastX; // Tracks the last observed mouse X position
var rect1 = document.getElementById("bar1");
var rect2 = document.getElementById("bar2");
var moveRect1 = function () {
console.log(arguments);
moved(rect1)
};
var moveRect2 = function() {
console.log(arguments);
moved(rect2);
}
var watchRect1 = function () {
console.log(arguments);
watchmousedown(moveRect1)
};
var watchRect2 = function () {
console.log(arguments);
watchmousedown(moveRect2)
};
rect1.addEventListener("mousedown", watchRect1);
rect2.addEventListener("mousedown", watchRect2);
window.addEventListener("mouseup", function() {
removeEventListener("mousemove", moveRect1);
removeEventListener("mousemove", moveRect2);
});
function watchmousedown(moverec) {
if (event.which == 1) {
lastX = event.pageX;
addEventListener("mousemove", moverec);
event.preventDefault(); // Prevent selection
}
}
function moved(rec) {
if (event.which == 1) {
var dist = event.pageX - lastX;
var newWidth = Math.max(10, rec.offsetWidth + dist);
rec.style.width = newWidth + "px";
lastX = event.pageX;
}
}
Edit: removed a line that didn't do anything
I am curious if binding an event to an object multiple times cause problems by stacking multiple event listeners on top of each other or do they override each other? For example if I have an attachHandlers function
function _attachHandlers() {
// Slider hover
var isDown = false;
$('.ui-slider-handle').mousedown(function () {
// Create tool tip
isDown = true;
var tt = $(document.createElement('span')).addClass('sk-tooltip');
var handle = $(this);
var left = parseInt(handle.css('left'));
var val = _convertSliderValue(Math.round(left / 5 / 14.2857));
tt.text(val);
handle.append(tt);
var newLeft = (handle.outerWidth() - tt.outerWidth()) / 2;
tt.css({
'left': newLeft
});
$(document).mousemove(function (event) {
var left = parseInt(handle.css('left'));
var val = _convertSliderValue(Math.round(left / 5 / 14.2857));
tt.text(val);
var newLeft = (handle.outerWidth() - tt.outerWidth()) / 2;
tt.css({
'left': newLeft
});
});
});
$(document).mouseup(function () {
if (isDown) {
$(document).unbind('mousemove');
$(this).find('.sk-tooltip').remove()
isDown = false;
}
});
}
I need to re-attach these handlers at some point in my code and therefore I was just going to call _attachHandlers() to re-bind them, however, I will also be re-binding the document listener for the mouseup event every time this happens. Therefore, is it alright to do this and will the event handler just get overwritten everytime or do I have to unbind the handler first before it can be re-bound?