RSS

Tag Archives: resizable

$(..).selectable_and_resizable()

The .selectable() and .resizable() jQueryUI plugins can’t live together. They’re not enemies, but everyone want the events monopoly and they go in conflict.
Here’s the trick to make them work happily together.
I build a resizable wrapper for the selectable “ul” then, on resize, I’ll resize the “ul” to fit the container.
Note: I know there’s an issue also with the .draggable() plugin but I haven’t tested it yet.

The code:

<style>
.ui-selecting { background: #FECA40; }
.ui-selected { background: #F39814; color: white; }
</style>

$(function(){
  // let's get the list and build a wrapper on it
  var ul = $("#thelist");
  var ulwrap = ul.wrap($("
")).parent(); // .wrap(..) uses a copy // some style ul.css({"border": "4px solid blue", "overflow":"hidden", "list-style-type":"none", "margin": 0, "padding": 7}); ul.find("li").css({"text-overflow":"ellipsis", "overflow":"hidden", "white-space":"nowrap"}); ulwrap.css({"border": "4px solid black"}); // attach the plugin ul.selectable(); ulwrap.resizable().on("resize", function(event, ui) { var w = ui.element.width() - (ul.outerWidth(true) - ul.width()); var h = ui.element.height() - (ul.outerHeight(true) - ul.height()); ul.width(w).height(h); }); });

The result:
jquery_resizable_n_selectable
See the black/blue borders as reference of what’s happening. The inner white border is the “padding: 7px” style (seek the “ul.css(..)” in the code).

Advertisements
 
Leave a comment

Posted by on 2014/03/18 in dev

 

Tags: , , ,