0

Stating with a well know vertical slitter based on query resizable widget, I have tried to make it into a horizontal Splitter. However Something is wrong and I really can´t see what it is. It´s probably just something I overlooked, but help is needed.

I would think the orientation of the Splitter were given by the resizable function, but the handle is still vertical. Here´s the function:

$(function () 
{
    $(".resizable1").resizable(
    {
        autoHide: true,
        handles: 'e',
        resize: function(e, ui) 
        {
            var parent = ui.element.parent();
            var remainingSpace = parent.height() - ui.element.outerHeight(),
                divTwo = ui.element.next(),
                divTwoHeight = (remainingSpace - (divTwo.outerHeight() - divTwo.height()))/parent.height()*100+"%";
                divTwo.height(divTwoHeight);
        },
        stop: function(e, ui) 
        {
            var parent = ui.element.parent();
            ui.element.css(
            {
                height: ui.element.height()/parent.height()*100+"%",
            });
        }
    });
});

Here´s the fiddle: http://jsfiddle.net/nsjYs/

Andreas
  • 5,305
  • 4
  • 41
  • 60
Asle G
  • 568
  • 7
  • 27
  • I found the main bug. I was using the e (east) handle. Setting handle to 's' (south) made the handle function more like I wanted. However the second text should still remain inside it parents
    when resized small, thus I still appreciate your input on this one. :)
     – Asle G May 01 '14 at 07:12
  • Found this example useful: http://www.pureexample.com/jquery-ui/resize-handles.html – Asle G May 01 '14 at 07:13
  • What is the question here? – caramba May 01 '14 at 07:20
  • 1
    Check this [updated fiddle](http://jsfiddle.net/nsjYs/1/). I believe doing this way will be more efficient – Batu.Khan May 01 '14 at 07:25
  • I like this, Batu Zet, very effective. Thanx! Is there a way to make the handle icon bigger? Also would prefer to have it centered on the horizontal line. – Asle G May 01 '14 at 09:37

0 Answers0