CODEWITHSUNDEEP
javascriptjqueryhtml
vicente.fava
vicente.fava

Reputation: 370

Resize event on multiple select control

I have a multiple select html element. I want to catch the resize event, so I can store the latest value. 

<select multiple="multiple" class="ra-multiselect-collection" style="resize: vertical; margin-top: 0px; margin-bottom: 5px; height: 527px;"></select>

The following code doesnt work:

$('.ra-multiselect-collection').on( 'resize', function(){
    alert('resized');
});

Any ideas?

Upvotes: 0

Views: 1029

Answers (3)

vicente.fava
vicente.fava

Reputation: 370

Finally I used resizable function from jQuery UI

http://jqueryui.com/resizable/

This is my code:

  $('.ra-multiselect-collection').first().resizable({
    resize: function() {
      alert('resized');
    }
  });

Maybe that .first() isn't necessary

Upvotes: 1

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

Well, I don't think that you can bind a resize event to a DOM element, but check this out:

$("select").on("mouseup", function()
{
    var el = $(this);

    if (el.data("old-height") == null || el.data("old-height") != el.height())
    {
        alert("resized!");
    }

    el.data("old-height", el.height());
}).data("old-height", $("select").height());

Fiddle

I have used mouseup event checking the old height stored in a data property with the current height on the moment of the event. If they are different, you get a resize event. Not a pretty beautiful workaround, but it seems to work.

I could not test on IE because it doesn't support that property and on Firefox, it works nice but it seems that you can double-click the resize corner and it returns to the initial size and this doesn't trigger the event actually.

In your case, as you're using a class to select those elements, you can do this:

$(".ra-multiselect-collection").each(function()
{
    $(this).on("mouseup", function()
    {
        var el = $(this);

        if (el.data("old-height") == null || el.data("old-height") != el.height())
        {
            alert("resized!");
        }

        el.data("old-height", el.height());
    }).data("old-height", $(this).height());
});

Didn't tested but it should work.

Upvotes: 2

Sergey Sob
Sergey Sob

Reputation: 813

You dont have resize event here, but u can store the size on mousedown event, and check if it changed on mouseup event

Upvotes: 0

Related Questions