0

I want to make a slider with jquery. but when I pulled it out the frame "silderContainer", "sliders" will stop moving and when it returned through the "sliderContainer", "slider" will move again. What I want is how "slider" still moving when I pulled the mouse out of the frame.

Here the code:

<style>

    body{
        padding:60px;
        height:800px;
    }

    .sliderContainer{
        //position:relative;
        width:200px;
        background-color:#CCC;
        height:30px;
        margin-top:16px;
        cursor:pointer;
    }

    .slider{
        position:absolute;
        width:50px;
        height:30px;
        background:#fa565a;
        float:right;
    }

</style>


</head>
<body>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $(document).on('ready', function(){

        function moveSlider(e){
            e.preventDefault();

            var pos = $(e.currentTarget).offset()
            ,   posX    = e.pageX - pos.left;

            if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){

                $('.slider').css('width', posX+'px');


            }
        }

        $('.sliderContainer').on('mousedown', function(e){

            moveSlider(e);

            $(this).on('mousemove', function(e){
                moveSlider(e);
            });

        }).on('mouseup', function(){
        $(this).off('mousemove');
        });

    });

    </script>

    <div class='sliderContainer'>
        <div class='slider'></div>
    </div>

</body>

Any help would be greatly appreciated. Thank you.

user3513473
  • 1
  • 2
  • possibly attach the mousemove to $(window) or possibly $(screen). Not sure about the latter. – Joseph Dailey Apr 09 '14 at 04:27
  • How about $('body'). But "sliders" out of the frame. – user3513473 Apr 09 '14 at 05:29
  • what I mean is to attach the click to the slider, set a state for dragging it, then tracking the mouse on $(window).mousemove() when mouse move is true. Use the pointe's X position (or Y for vertical) to set the draggers position. – Joseph Dailey Apr 09 '14 at 18:03

1 Answers1

0

It's because the target element is .sliderContainer. So think about it like this - when you're on a web page and you hold down your mouse over any normal form button and then move your mouse in and out of it, the focus is lost on the object.

http://www.w3schools.com/html/html_forms.asp

Look for the 'Submit Button' section and test it out.

What your logic says is that while the focus is on the container element and a mouse move event is registered, then the javascript can respond to it. But as soon as focus is lost (eg. moving outside of the region of the element) then it can't respond anymore.

Instead of attaching events to the container element itself, you could register them with the document or window, or another object that has a larger space behind it, so that focus is maintained.

Here's an example: Losing MouseUp event if releasing not over the same element

Community
  • 1
  • 1
Justin Mitchell
  • 339
  • 1
  • 5
  • Can you give an example? I'm sorry for this request – user3513473 Apr 09 '14 at 04:40
  • Instead of `$(this).on('mousemove', function(e){` you could try `$(document).on('mousemove', function(e) {` and see if that changes things. Your click will still have focus so you should be able to move the slider if you bind the mouse to the document or something else. – Justin Mitchell Apr 09 '14 at 04:42
  • Have you tried just using `$(document).mousemove(function(e) {console.log('moving...');});` on this page for example? – Justin Mitchell Apr 09 '14 at 04:50
  • In chrome you can inspect an element or in firefox using firebug you can access the console through firebug, paste it in and then just mouse your mouse around on the screen. you should see some text appear in the console. – Justin Mitchell Apr 09 '14 at 06:13
  • I see it when i clicked sliderContainer and then move the mouse around on the screen. But when I changed $(document).on('mousemove', function(e) {console.log('moving...'); moveSlider(e);}); it says ""Uncaught TypeError: Cannot read property 'left' of undefined index.html:43 moveSlider index.html:43 (anonymous function) index.html:59 x.event.dispatch jquery-latest.js:5095 v.handle jquery-latest.js:4766 moving... "" I'm sorry to keep asking – user3513473 Apr 09 '14 at 07:06
  • `var pos = $(e.currentTarget).offset(), posX = e.pageX - pos.left;` that's because the way you've tried to define it is incorrect. It needs to be `var pos = $(e.currentTarget).offset(); var posX = e.pageX - pos.left;` Try that instead. Also, you should get the mouse co-ordinates rather than rely on the object co-ordinates because you're attaching the mousemove to the document instead of to the relative object. Make sense? – Justin Mitchell Apr 09 '14 at 07:11