Using your own jQuery plugin "resizable" and the class of the element with this name you need to put down this element Selector . The content of this element should also be inside when resizing.

A small example and what is wrong with it:

  1. The content remains with the element, not inside when the height of the element decreases.

  2. Not the selector reduces the element, but the element itself works as a selector.

Sandbox

  • 1. css - overflow: hidden; - user27286

1 answer 1

Figured out

$(document).ready(function() { $(".resizable").resizable(); }); (function($) { var defaults = { color: 'red' }; var f = { init: function(options) { var options = $.extend({}, defaults, options); var c = this; var qe = $("<div class='res'><div class='resizers'></div><div class='resizers'></div></div>"); $(c).append(qe); $(".res").css({ "height": '7px', // "background": options.color, "cursor": 's-resize' }); return this.each(function() { var me = $(this); qe.bind('mousedown', function(e) { var h = me.height(); var y = e.clientY; var moveHandler = function(e) { var s = Math.max(20, e.clientY + h - y); me.height(s); return false; }; var upHandler = function(e) { $('html').unbind('mousemove', moveHandler).unbind('mouseup', upHandler); }; $('html').bind('mousemove', moveHandler).bind('mouseup', upHandler); }); }); }, }; $.fn.resizable = function(method) { if(f[method]) { return f[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if(typeof method === 'object' || ! method) { return f.init.apply(this, arguments); } else { $.error("ћетод с именем " + method + " не существует"); } }; }) (jQuery); 
 #a { background: #CD0000; width: 256px; height: 512px; padding: 4px 5px 4px 5px; overflow: hidden; } .wrapper { width: 100%; height: 100%; } .b { background: #CDCD00; width: 100%; height: 128px; margin-bottom: 5px; } .res { background: #CD00CD; top: 0; } .resizers { margin: 0 auto; margin-bottom: 2px; width: 26px; height: 1px; background: #DCDCDC; } 
 <div id="a" class="resizable"> <div class="wrapper"> <div class="b"></div> <div class="b"></div> <div class="b"></div> </div> </div>