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

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