two event handlers (click and mousemove) at the same time on one element

Question

I'm creating a sort of slider which when a certain point on the window is clicked the element will stretch its width to that point. I would also like to add a drag event handler and I have read about mousedown and mousemove and mouseup being the three handlers that need to be combined. This code works quite well but I'm wondering is there a better way to combine these handlers because at the moment I am repeating code whihc Im not sure is necessary. I'm quite new to javascript and jquery. Thanks for the help

function reposition_bar(mouse_touch_position){
    document.onclick = function(mouse_touch_position){
        var timer_bar_position = $(timer_bar);
        timer_bar_offset = timer_bar_position.offset();
        var total_width_timer = $("#timer_bar_outer0").width();
        var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/
        player.currentTime = (window.duration)*(new_width_timer/100);
    }
    document.onmousemove = function(mouse_touch_position){
        var timer_bar_position = $(timer_bar);
        timer_bar_offset = timer_bar_position.offset();
        var total_width_timer = $("#timer_bar_outer0").width();
        var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/
        player.currentTime = (window.duration)*(new_width_timer/100);

    }
    this.onmouseup = function() {
    document.onmousemove = null;
    }

}

and here is where i create the event listener.

 $(timer_area).on("mousedown", reposition_bar);

my html:

<div id="timer_area0" class="timer_area">
    <div id="timer_bar_outer0" class="timer_bar_outer"></div>
    <div id="timer_bar0" class="timer_bar"></div>
</div>

and my css:

.timer_area{
position: relative;


width: 100%;
margin: 20px auto 10px auto;
height: 20px;
backgroud: #fff;
}

.timer_bar{  
z-index: -1;
display: block;  
width: 3%;  
height: 8px;  
border-radius: 4px;  
clear: both;  
position: absolute; 
margin-top: 6px;
box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  
                0px 0px 3px 2px rgba(250,250,250,1);  
background-color: #fff; 
}  

.timer_bar_outer{
padding: 0px 3% 0px 3%; 
    width: 100%;  /*this should be same number as 100/windowduration*/
    height: 20px;  
    display: block;  
    z-index: -2;  
    position: absolute;  
    background-color: rgb(0,0,0); 
margin-left: -3%;
border-radius: 10px;  
box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),   
                inset 0px 1px 2px rgba(0, 0, 0, 0.5); 
box-sizing: content-box;
}

.timer_bar.on{  
   background-color: blue;  
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  
                0px 0px 3px 2px rgba(5,242,255,1); 
}

Edit after @tlindell comment:

thank you for your comment. I have tried out the range sliders but could not style them with css the way i wanted after doing much research. (ie my vertical slider worked perfect until I put a box shadow on it and it did not work vertically anymore)... I am happy with my slider. its just i was wondering if i could have written the reposition_bar method better because the way ive done it above, this code:

document.onclick = function(mouse_touch_position){
            var timer_bar_position = $(timer_bar);
            timer_bar_offset = timer_bar_position.offset();
            var total_width_timer = $("#timer_bar_outer0").width();
            var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/
            player.currentTime = (window.duration)*(new_width_timer/100);
        }

is exaclty the same as this accept they are different event handlers e.g onmousemove and onclick:

document.onmousemove = function(mouse_touch_position){
            var timer_bar_position = $(timer_bar);
            timer_bar_offset = timer_bar_position.offset();
            var total_width_timer = $("#timer_bar_outer0").width();
            var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/
            player.currentTime = (window.duration)*(new_width_timer/100);

        }

so can i combine them in a way for example

document.onmousemove || document.onclick = function(mouse_touch_position){
                var timer_bar_position = $(timer_bar);
                timer_bar_offset = timer_bar_position.offset();
                var total_width_timer = $("#timer_bar_outer0").width();
                var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/
                player.currentTime = (window.duration)*(new_width_timer/100);

            }

Thanks for your edit @tlindell. It is something like what I would like but I tried the following which doesnt really have the desired effect. It is not registering the mouseup event.

function reposition_bar(mouse_touch_position){
    document.onmousemove = function(mouse_touch_position){
        var timer_bar_position = $(timer_bar);
        timer_bar_offset = timer_bar_position.offset();
        var total_width_timer = $("#timer_bar_outer0").width();
        var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/
        player.currentTime = (window.duration)*(new_width_timer/100);

    }
    this.onmouseup = function() {
    document.onmousemove = null;
    }

}

$(timer_area).on("mousedown click", reposition_bar);

I would like the function to be called with onmousedown and then within the function I would like it to handle the events of onmousemove and onclick. can I do something like this within the function reposition_bar:

function reposition_bar(mouse_touch_position){
    document.on("mousemove click") = function(mouse_touch_position){
        var timer_bar_position = $(timer_bar);
        timer_bar_offset = timer_bar_position.offset();
        var total_width_timer = $("#timer_bar_outer0").width();
        var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/
        player.currentTime = (window.duration)*(new_width_timer/100);

    }
    this.onmouseup = function() {
    document.onmousemove = null;
    }

}

$(timer_area).on("mousedown", reposition_bar);

That does not work at all though so I guess the syntax is wrong in this line within the function:

document.on("mousemove click") = function(mouse_touch_position){

}

Thanks again. I am quite new to this :)

Thanks @tlindell for the answer. This is what i did in the end. (see the window.onload section for the edits)

<script>
    var player;
    var intv;
    var duration;
    var song_id;
    var button;

    //init
window.onload = function(){
        player = document.getElementById('audio_player');


            $('#volume_control_area').on('mousedown mouseup mouseleave click', function(e){
                if(e.type === 'mousedown'){
                        $(this).bind('mousemove', reposition);
                }
                else if((e.type === 'mouseup') || (e.type === 'mouseleave')) {
                        $(this).unbind('mousemove', reposition);
                }else if(e.type === 'click'){
                        $(this).bind('click', reposition);
                }
            });
}

function reposition(mouse_volume_position){

        var volume_knob_position = $(".volume_control_knob");   
        volume_area_offset = $('#volume_control_area').offset();
        var total_height_volume = $('#volume_control_area').height();
        console.log(total_height_volume);
        var new_height_volume = ((volume_area_offset.top + total_height_volume)- mouse_volume_position.pageY); /*converting to percantages because the width of the timer is in percentages in css*/

        if(new_height_volume > 8 && new_height_volume <= 100){
        console.log(new_height_volume);
        player.volume = new_height_volume/100;
        $(".volume_control_knob").css({

        'height' : new_height_volume + '%' 

        });
        }

}




</script>

tylerlindell · Accepted Answer · 2018-10-03T14:40:03.333

2

Welcome Jquery ui!

you can resize divs here:

jquery ui resizable

and get range sliders here:

Jquery ui silders

EDIT

absolutely! here is the way to do that.

$('#element').on('keyup keypress blur change', function() {
    ...
});

Or just pass the function as the parameter to normal event functions:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

jQuery multiple events to trigger the same function

UPDATE:

<script>
    let player;
    let intv;
    let duration;
    let song_id;
    let button;

    //init
    window.onload = function(){
        player = document.getElementById('audio_player');

        $('#volume_control_area').on('mousedown mouseup', function(e){
            if(e.type === 'mousedown'){
                $(this).bind('mousemove', reposition);
            }
            else if(e.type === 'mouseup'){
                $(this).unbind('mousemove', reposition);
            }
        })
    }

    function reposition(mouse_volume_position){
        let volume_knob_position = $(".volume_control_knob");   
        let volume_area_offset = $('#volume_control_area').offset();
        let total_height_volume = $(volume_control_area).height();
        let new_height_volume = ((volume_area_offset.top + total_height_volume)- mouse_volume_position.pageY); /*converting to percantages because the width of the timer is in percentages in css*/

        if(new_height_volume > 8 && new_height_volume <= 100){
            console.log(new_height_volume);
            player.volume = new_height_volume/100;
                $(".volume_control_knob").css({

                    'height' : new_height_volume + '%' 

                });
        }
    }   
</script>

edited Oct 03 '18 at 14:40

answered Apr 28 '14 at 22:32

tylerlindell

1,545
2
17
20

thank you for your comment. I am aware of the sliders in jquery.. I have tried the range sliders but i could not style them the way i wanted. eg when i put a box shadow on my vertical slider it did not work as a vertical slider anymore. I have re-edited my question to explain better what i would like... thanks – Sarah Apr 29 '14 at 01:45
I updated my answer, is that more of what you were looking for? – tylerlindell Apr 30 '14 at 02:12
Thanks for your edit @tlindell. Yes It is very close to what i would like but I have edited my question to show you exaclty how I would like it :) thanks. – Sarah Apr 30 '14 at 15:59
Something miraculous happened and It turns out I don't need the click event handler at all. I guess because mouseup and mousedown is the same as a click. haha. Ok thank you :) – Sarah Apr 30 '14 at 16:12
Can I just ask one last thing. What is the equivalent of document.onmousemove = null; in jquery? I have tried this: $(document).on("mousemove", function(){}); and this: $(document).on("mousemove", null); They do not work though. Thanks :) – Sarah Apr 30 '14 at 18:08
what are you looking to accomplish with 'null'? to me it looks like you are trying to allow for one thing to happen on mousemove but do not want it to affect something else in the document... a jsfiddle might help me understand better – tylerlindell Apr 30 '14 at 21:00
I'm looking to complete the reposition() method, so that when the mouseup event occurs after the reposition method was called then mousemove event no longer has effect. here's a jsfiddle http://jsfiddle.net/Jv6tC/ but for some reason it does not work here so i have uploaded it to the web. Not sure if this is allowed but here is a link to it. as you can see when the slider is clicked it moves into place but then keeps moving on mousemove, I would like it to stop moving until the next time there is a mousedown event. http://www.funkdafone.com/demo_volume_control/demo_volume_control.htm – Sarah May 01 '14 at 01:06
1

That is perfect thanks a million. I added in a few more events like click and mouseleave and it works great! :) just updated your answer (with the new edits) in my question :) – Sarah May 04 '14 at 18:11

two event handlers (click and mousemove) at the same time on one element

1 Answers1