0

$("#dialog").dialog();

$("#dialog").resize(function() {
    alert($('#dialog').height());
});

alert($('#dialog').height());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="dialog" title="Dialogo basico">
    <p>Hola k ase.</p>
</div>

Estoy intentando cambiar la altura de un div teniendo en cuenta el tamaño de un dialog de jqueryui.

En principio el tamaño del dialog lo saco sin problemas usando esto:

$('#ventanuca').height());

con lo cual podría sacar el tamaño que necesito del div interno sin problemas. El problema lo tengo en que ese dialog puede cambiar de altura una vez abierto y no consigo sacar una función que mire si ha cambiado el tamaño para avisarme.

estoy probando con esto a ver si consigo algo pero nada, no consigo que si cambio el tamaño del dialog me diga el nuevo tamaño que tiene :(.

 $('#ventanuca').resize(cambiartamano);

 function cambiartamano() {
    alert($('#ventanuca').height()); 
 }

¿Hay alguna forma de observar si cambia el tamaño de un div?

1 respuesta 1

1

El propio diálogo de jQuery UI ya tiene soporte para el evento resize.

Aquí tienes la documentación: jQuery UI Dialog evento resize

Simplemente hay que indicarle la función que debe gestionar el evento en la propiedad resize del objeto de opciones en el constructor.

La función recibe dos parámetros: uno con el objeto Event y otro con un objeto que incluye la información del redimensionamiento, incluido por supuesto el tamaño final:

$("#dialog").dialog({
  resize: function(event, ui){
    console.log(ui.size.height);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="dialog" title="Dialogo basico">
    <p>Hola k ase.</p>
</div>

1
  • ¡¡Genial!! es justo lo que necesitaba. Mil gracias
    – Killpe
    el 29 dic. 2017 a las 21:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.