jQuery：当子元素接近其父元素的右边缘时，将DIV移至左侧（自动滚动的类型）

Question

I'm currently building a somewhat basic video timeline. On this timeline are various media assets of variable duration and the width of the DIVs representing the assets reflect the duration, with 1 second being measured as 35px. So, for example, a 5 second asset would take up 175px in width on the timeline.

Because the timeline needs to be longer than the width of my usable space on the page, it needs to scroll horizontally. Instead of using an ugly standard scrollbar, I'm using a jQuery plugin scrollbar, which requires that the full-width DIV of the timeline sits inside another DIV that is the width of the usable area of the page and acts as a frame, with the inner DIV being absolutely positioned. When you move the scrollbar left or right it changes the "left" value of the inner DIV.

Having given that context, I now come to my problem. The assets on the timeline need be horizontally resizable to adjust their duration. I have that working using jQuery UI, but I need to make it so that when I drag the right edge of an asset near to the right edge of the outer DIV framing the timeline, the inner DIV of the timeline moves (basically scrolls) left and the width of the asset increases by 1 second (35px).

Even this last bit I have working to a certain degree, but not well enough. What I need is that when I drag far enough to the right, so that I'm within 35-70 pixels of the right edge of the framing DIV, the inner DIV timeline will move to the left, the width of the asset will increase, and this will keep happening until I move my mouse back towards the left.

The best example I can think of is like when you're selecting text in your browser and you drag past the bottom of the screen, the screen starts scrolling down and it keeps doing that till you move your mouse up.

Currently I'm trying to to this by drawing on the "resize" event of the jQuery UI resizable element, but the problem is that I can't get that continuous effect I was just talking about, I have to keep dragging my mouse further to the right rather than just keeping it still. And when I reach the right edge of the window I have to release the mouse button, move back over to the resizing handle and start dragging again.

Here's the function I was trying to write (FYI, a .mediaInstance is an asset on the timeline):

//Scroll Timeline when resized handle comes close to right edge
        function timelineScroll() {

            //console.log('running');
            var mediaElement = $('#mediaTrack .mediaInstance.resizing');
            var track = $('#horiz_container_inner');

            //Determine location of right edge of the timeline viewport
            var timeline = $('#horiz_container_outer');
            var timelineOffset = timeline.offset();
            var timelineLeft = timelineOffset.left;

            var timelineRight = timelineLeft + $('#horiz_container_outer').width();

            //Find right edge of current .mediaInstance
            var instanceOffset = mediaElement.offset();
            var instanceLeft = instanceOffset.left;

            var instanceRight = instanceLeft + mediaElement.width();

            if ( (timelineRight-instanceRight) < 35 ) {

                var timelineCurrentLeft = Number(track.css('left').replace('px',''));
                var timelineNewLeft = timelineCurrentLeft - 70;
                track.css('left',timelineNewLeft);

                mediaCurrentWidth = mediaElement.width();
                mediaElement.width(mediaCurrentWidth+35);


                if (currentMousePos.x > timelineRight) {

                    while (currentMousePos.x > timelineRight) {

                        var timelineCurrentLeft = Number(track.css('left').replace('px',''));
                        var timelineNewLeft = timelineCurrentLeft - 35;
                        track.css('left',timelineNewLeft);

                        mediaCurrentWidth = mediaElement.width();
                        mediaElement.width(mediaCurrentWidth+35);

                    }

                }

            }

        }

You'll notice I even tried a loop at the end there based on the mouse position being farther right than the right edge of the framing DIV, but I didn't think it would work, and it didn't ... just seemed to put me in an infinite loop.

In any case, I'd really appreciate any help anyone can offer on this. I'm working on a project with a really short turnaround time and I've never really done any of this particular stuff before.

Answer 1

It turns out I solved my own problem. I just needed to use a setTimeout within the 'resize' function checking if the mouse was beyond the right edge of the framing DIV every 250 milliseconds and, if so, move the inner DIV left and increase the width of the asset. Here's what I used...

EDIT : It turns out my solution didn't work as I'd hoped, so I could use some help after all.

Here's the HTML:

<div id="horiz_container_outer">
    <div id="horiz_container_inner" style="position: absolute; left: 0px; top: 0px; visibility: visible;">
        <div id="horiz_container" style="width: 10500px;">


            <div id="transitionTrack"></div>

            <div id="mediaTrack" class="ui-sortable ui-droppable">

                <div class="transitionBoxContainer first ui-droppable"></div>

                <div class="mediaInstance" assetid="001" assettype="video" thumb="video1_thumb.jpg" style="display: block; width: 419px;" type="asset" duration="12">
                    <div class="mediaThumbnail" style="background-image: url(./images/assets/thumbnails/video1_thumb.jpg);"></div>
                    <div class="mediaInfo">
                        <div class="mediaFilename">video1.avi</div>
                        <div class="mediaDuration">12s</div>
                        <div class="mediaHandle"></div>
                    </div>
                    <div class="transitionBoxContainer ui-droppable"></div>
                    <div class="deleteButton"></div>
                </div>

            </div><!-- End of #mediaTrack -->

        </div><!-- End of #horiz_container -->
    </div><!-- End of #horiz_container_inner -->
</div><!-- End of #horiz_container_outer -->

And here's my code to make the mediaInstance on the timeline resizable, snapping to 35px increments:

//Watch timeline assets for click on resize handle
$("#mediaTrack").on('mousedown','.mediaInstance .mediaHandle', function(e) {

    e.stopPropagation();
    e.preventDefault();


    //Find offset location of right edge of the timeline viewport
    var timelineViewport = $('#horiz_container_outer');
    var timelineViewportLeft = timelineViewport.offset().left;
    var timelineViewportRight = timelineViewportLeft + timelineViewport.width();

    //Assign track object to variable
    var track = $('#horiz_container_inner');

    var thisInstance = $(this).parents('.mediaInstance');

    //Store the mouse position before we start moving
    var startMousePos = e.pageX;


    $(document).mousemove(function(e){

        var currentInstanceWidth = thisInstance.width();

        //Find right edge offset of current .mediaInstance
        var instanceLeft = thisInstance.offset().left;
        var instanceRight = instanceLeft + currentInstanceWidth;


        if ( (e.pageX < (startMousePos-35)) || (e.pageX > (startMousePos+35)) ) {

            if ( e.pageX < (startMousePos-35) ) {

                thisInstance.width(currentInstanceWidth-35);

            } else { 

                                thisInstance.width(currentInstanceWidth+35);

            }

            startMousePos = e.pageX;
            recalcDuration(thisInstance);
            calcTotalDuration();

        }

    });

});
$(document).mouseup(function(e){
    $(document).unbind('mousemove');
});

That works great for the actual resizing, but the problem I'm having is that when I move the mouse past the right edge of #horiz_container_outer, which acts as a frame for the timeline, I want the #horiz_container_inner DIV to start moving its left position to the left by increments of 35px while also continuing to resize the .mediaInstance div to make it 35px wider ... and I want both those things to happen every 0.25 seconds ... HOWEVER, I don't want the "scrolling" of #horiz_container_inner to continuously fire with the mousemoves. Once the mouse passes the right edge of #horiz_container_outer, I want some function to take over and start scrolling and resizing the .mediaInstance DIV at a set interval until the mouse once again moves left, past the right edge of #horiz_container_outer, at which point the original resizing shown above takes over again.

The problem is that I have no idea how to achieve this. I tried using a flag variable and conditional to tell me when my mouse is "in the zone", with inTheZone = false to begin with, running a conditional to run my initial code only when inTheZone == false, then setting it to true once the mouse enters the right area and having a setTimeout takeover to loop the scrolling and resizing. This worked to a certain degree, but the mouse position suddenly became unavailable so I couldn't tell when I moved outside the zone and the div just kept scrolling indefinitely.

Any ideas?