Resize to elements and not browser window

Asked

Viewed 129 times

1

Help me with a quick question.

jquery resize identifies when the browser window is changed and fires an Event. So far so good.

But is there any way I can tell when an element is changed? When I change his size?

In this case, resize doesn’t help me. Some help?

javascript jquery html5 resize

  • It depends on how this resize is done. Have some example?

  • Yes of course. for window is done this way $(window).resize.... but I wanted to identify a change in an element.. type $("#div-tal").resize... But it doesn’t work because the resize is only for the window and not elements.

  • do not say to fire the event... how is resized the element?

  • It’s a textarea type field.. and I’d like to know when it increases height. Whenever I change the size I wanted to identify that changed so I can trigger actions in the layout. The more the user types and increases.. I trigger changes.

  • the textarea does not increase alone... has some plugin or programming that does this?

  • It increases. Just go into css and put auto resize and it will increasing alone understands. And when that happens, I want to identify just like in a window.

  • You want to know when it changes width or height height? or any of the two?

Show 2 more comments

1 answer

3


You can use the code below that will listen to any changes in textarea and run the code you want where I commented // faz alguma coisa aqui:

Included the window resize case to textarea be responsive. If it is fixed width, no need. Just change this line $(window, "textarea").on("input resize", function(){ for ta_el.on("input", function(){.

var ta_el = $("textarea");
var ta_width = ta_el.width();
var ta_height = ta_el.height();
$(window, "textarea").on("input resize", function(){
   if(ta_el.height() != ta_height || ta_el.width() != ta_width){
      ta_width = ta_el.width();
      ta_height = ta_el.height();
      console.log("tamanho do textarea alterado"); // apenas para visualizar, pode apagar esta linha
      // faz alguma coisa aqui
   }
});

An example:

// função apenas para exemplificar. NÃO COPIE
function auto_grow(element) {
    element.style.height = "5px";
    element.style.height = (element.scrollHeight)+"px";
}

var ta_el = $("textarea");
    var ta_width = ta_el.width();
    var ta_height = ta_el.height();
    $(window, "textarea").on("input resize", function(){
       if(ta_el.height() != ta_height || ta_el.width() != ta_width){
          ta_width = ta_el.width();
          ta_height = ta_el.height();
          console.log("tamanho do textarea alterado"); // apenas para visualizar, pode apagar esta linha
          // faz alguma coisa aqui
       }
    });
textarea {
    resize: none;
    width: 100%;
    min-height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea oninput="auto_grow(this)"></textarea>

  • Thank you very much. That’s what I was looking for. Your code helped me so much. Vlw. I didn’t know the window worked this way. I’m grateful.

  • @Dávilandré I’m glad. If you can mark in the answer, this is important for us. Valew!

Browser other questions tagged javascript jquery html5 resize

You are not signed in. Login or sign up in order to post.