JQuery Draggable not working the way i want to

Question

I have two horizontal divisions and i want to insert a slider in between then so that the height can be dynamically adjusted. The code am using is

<script type="text/javascript">
$(function() {
var stopFromTop = 58;
var stopToTop = 158;
var i = 0;
$("#handle").draggable({ axis: 'y', 
        start: function(event, ui) {
            TopStart = $('#top').height();
            BottomStart = $('#bottom').height();
        },
        drag: function(event, ui) {
            $('#top').height( TopStart + (ui.position.top-ui.originalPosition.top) );
            $('#bottom').height( BottomStart - (ui.position.top-ui.originalPosition.top) );
            //$("#handle").css({"top":108 + "px" }).show();
            //alert(ui.position.top);
        },
        containment: [0,stopFromTop ,0,stopToTop ]

});

});
</script>

But this is not working the way it should. The slider is not following the mouse when it is dragged. There must be something which I am doing wrong. Unable to get it!! :( Here is the link to the page .

Answer 1

You could use jQuery UI's draggable element . Then simply calculate it offset from the top and set that as the top div's height. Then do some math to find the bottom div's height.

Edit

You have the slider's position set to relative , so basically it will appear right below the top div. Additionally you change its top value (which also moves it. So basically it is moving TWICE as much as it needs to). Either:

1. Set the sliders position to absolute (and play with top to position it right); <-- ALOT OF WORK, DO NOT ATTEMPT

2. Simply stop changing slider's top value

Answer 2

Seems to be a css problem with jquery. Changing the css property of separater to position:absolute fixed the problem.