Dynamically synchronize scolling between two divs using jQuery draggable

Question

I have been trying to create a synchronized scrolling between two divs using jQuery draggable but I am having trouble figuring out the correct "equation" to get it to work properly.

Basically, I have two sides – left and right. The left side is going to hold information (small scale...the orange rectangle in my example) as well as a "magnifier" (the purple and black box in my example) which the user will be able to drag up and down over the information using jQuery draggable. The right side is going to hold a copy of that same information, only at a much larger scale (the tall pink box in my example).

I am attempting to make it so that when dragging the "magnifier" over the information on the left hand side, the larger scale of the information on the right hand side scrolls up and down in sync with the "magnifier". My problem is getting the position of the large scale div (in relation to the main wrapper) to match up with the position of the center of the "magnifier" (in relation to the smaller div that hold the small scale information). This needs to work dynamically as in no matter what size either divs are, it is always the correct relation.

I would also like the center of the main wrapper to act as the "top" or focal point for the large scale information...so when the magnifier is at the top of the small scale information, the top of the large scale information is lined up with the vertical center of the main wrapper. Any help is appreciated and please let me know if there are any questions. Thanks!

Here is a link to a working example: http://people.rit.edu/bjc7188/

And here is some of the script I have been working on:

$(document).ready(function() {


        $("#dragMe").draggable({ 

            axis: "y",
            drag: function(event, ui)
            { 
                var $target = ($("#toZoom").height()/2) - ((($("#dragMe").position().top + $("#dragMe").height()/2)*($("#scroller").height()/$("#toZoom").height()))); 

                $("#scroller").css({ top: ($target + $("#dragMe").height()/2) + "px" });
            }, 
        });

    });

It is kind of sloppy, but it works for exactly what I am trying to do. It does not work, however, when the size of the left orange div is changed. I need an equation that will work dynamically no matter what the size of either the pink or orange divs are.

Answer 1

There we go.

$(document).ready(function() {

function adjustPositions(){
    var wrapperObj=$("#wrapper");
    var magnifierObj=$("#dragMe");
    var scrollerObj=$("#scroller");
    var zoomObj=$("#toZoom");


    var magCenterPosition=magnifierObj.offset().top+magnifierObj.height()/2-zoomObj.offset().top;        
    var magRelativePosition=magCenterPosition/zoomObj.height();

    var newScrollerPosition=wrapperObj.height()/2-magRelativePosition*scrollerObj.height();
    scrollerObj.css("top",newScrollerPosition+"px");
}


$("#dragMe").draggable({                 
    axis: "y",
    containment: $("#wrapper"),
    drag: function(event, ui)
    { 
        adjustPositions();
    } 
});

});

Here's a working jsFiddle example.

The example presents some sliders for playing with orange box\magnifier height.

Notice that I've changed some of your CSS to reflect the flexibility on box sizing. Mainly, the wrapper container now doesn't have a set height. Also the orange box is now relatively positioned, with margins the size of half the magnifier height, to correctly adjust the height of the wrapper container.