CODEWITHSUNDEEP
jqueryjquery-ui
Muhammad Usman
Muhammad Usman

Reputation: 10936

JQuery resizable move in one direction, and remove scroll bars

I am using jquery resizable to resize a div 

$( "div" ).resizable();

I have one section and a div inside it with scrollable content. I am facing couple of problems.

  1. I want to resize in one direction y-axis only
  2. When I scroll the inner div, the resize handler icon (on the right below corner) should not scroll with the content
  3. While scrolling the inner div, if all content is visible, scrollbars should be disappear,

How it is possible with jquery ui resizable, or there any plugin other than this that can do this job.

Fiddle: http://jsfiddle.net/k6r5P/

Upvotes: 2

Views: 843

Answers (1)

Nouphal.M
Nouphal.M

Reputation: 6344

For resizing the div in the y axis only. You could also remove the if condition if you like

Try

$( ".contenteditable" ).resizable({
    create:function(event,ui){//for setting overflow

        if($(this)[0].scrollHeight > parseInt($(this).css('height'),10)){

            $('.contenteditable').css('overflow','auto');
        }
    },
    resize: function(event,ui){ //for restricting x-axis resize
        if(ui.size.width>250){
            ui.size.width = ui.originalSize.width;
        }
    }
});

And for moving the resize icon try 

$( ".contenteditable" ).scroll(function(e){

    var newH = $(this).scrollTop() + parseInt($(this).css('height'),10);
    if(newH > $(this)[0].scrollHeight){
        newH = $(this)[0].scrollHeight;
    }
    $(this).css('height',newH+'px');
});

Demo here

Upvotes: 1

Related Questions