¿Cómo cambio el tamaño de un div automáticamente al tamaño de su contenido cuando el contenido del div ha cambiado?

Question

Por el momento, tengo este DIV con un formulario de registro centrado en la página. Los contenidos del DIV provienen de una página ascx. Esto se hace muy bien. Ahora, si el usuario intenta completar un nombre que no es exclusivo, se agrega un mensaje de error junto con jQuery al campo de nombre de usuario. Esto rompe el diseño del DIV, ya que los contenidos ahora son más amplios de lo que solían ser. Así que he buscado mi camino en esto, pero no puedo encontrar una solución para esto.

¿Puede alguien ayudarme a encontrar una buena manera de hacer esto (seudo HTML/JS):

<div id="myCenteredDiv" onChangeContents="resizeToNewSize()"> 
    <!-- div contents --> 
</div> 

<script type="text/javascript"> 
    function resizeToNewSize() { 
    $("#myCenteredDiv").animateToSize($("#myCenteredDiv").contentWidth, 
     $("#myCenteredDiv").contentHeight); 
    } 
</script> 

Busco el método "onChangeContents" (y/o evento) y el "div. ContentWidth "propiedad.

¡Muchas gracias por ayudarme!

actualización: tratar de explicar el problema con mayor claridad

Digamos que tengo este DIV:

<div id="myDiv"> 
    <form ...> 
    Enter your name: <input id="txtYourName" type="text" name="YourName" value="" /> 
    <span id="errorYourName"></span> 
    <input type="submit" ... /> 
    </form> 
</div> 

Y digamos que tengo este fragmento de jQuery:

$(document).ready(function() { 
    $("#txtYourName").live("blur", function() { 
    if (validateInput($("#txtYourName").val())) { 
     $("#errorYourName").html(""); 
     // entry 1 
    } else { 
     // entry 2 
     $("#errorYourName").html("This name is not valid."); 
    } 
    }); 
}); 

... donde validateInput(value) devuelve true para un valor válido.

Bien ahora. El complemento SimpleModal toma el div y lo coloca centrado en la página, con un cierto ancho y alto que de alguna manera se lee fuera del contenido del div. Entonces el div no es más ancho que el cuadro de entrada, ya que el tramo está vacío en este momento.

Cuando el cuadro de entrada pierde el foco, se coloca un mensaje de error en el tramo. Esto luego rompe el diseño del div.

Podría poner el código en entry 1 que redimensiona la parte posterior del div con una animación de cierto tamaño cuando se borra el mensaje de error, y codifica en entry 2 que cambia el tamaño del div a un tamaño mayor para que el mensaje de error encaje.

Pero lo que más me gustaría es una forma de saber si los contenidos dentro del div han cambiado, y ajustar el div en consecuencia, animado y automáticamente.

¿Alguna idea? Gracias de nuevo.

Answer 1

Nunca he usado SimpleModal, pero de los ejemplos en su sitio parece que puede configurar el contenedor CSS. Si desea que la altura para ajustar, intente ajustar la altura a auto

$("#sample").modal({ 
containerCss:{ 
    backgroundColor:"#fff", 
    borderColor:"#0063dc", 
    height:450, 
    padding:0, 
    width:830 
} 
}); 

Aunque el ejemplo no lo tiene, yo creo que hay que añadir px después de la altura y la anchura entre comillas (por ejemplo "450px") .

---

Ok, aquí está otra idea. Tal vez esto es demasiado, pero añadir un campo de entrada oculto:

<div id="myDiv"> 
    <form ...> 
    Enter your name: <input id="txtYourName" type="text" name="YourName" value="" /> 
    <span id="errorYourName"></span> 
    <input type="submit" ... /> 
    <input id="updated" type="hidden" /> 
    </form> 
</div> 

continuación, adjuntar un evento de cambio que se activa al mismo tiempo, se actualiza el mensaje de error.

$(document).ready(function() { 
    $("#txtYourName").live("blur", function() { 
    if (validateInput($("#txtYourName").val())) { 
     $("#errorYourName").html(""); 
     // entry 1 
    } else { 
     // entry 2 
     $("#errorYourName").html("This name is not valid."); 
     $("#updated").trigger('change'); 
    } 
    }); 
    $("#updated").change(function(){ 
    // resize the modal window & reposition it 
    }) 
}); 

Esto no se ha probado y se puede pasar por la borda, pero no veo una función de actualización en SimpleModal.

---

actualización: Lo siento me di cuenta de que la falta de definición no es compatible con el evento en vivo. Así que hice algunas pruebas adicionales y se me ocurrió una demostración funcional. Lo publiqué en this pastebin (ignore el código simpleModal incluido en la parte inferior). Aquí está el código esencial

CSS

#myDiv { line-Height: 25px; } 
#simplemodal-container { background-color:#444; border:8px solid #777; padding: 12px; } 
.simplemodal-wrap { overflow: hidden !important; } 
.error { color: #f00; display: none; } 
input { float: right; } 

HTML

<div id="myDiv"> 
    <form> 
    What is your name: <input id="txtYourName" type="text" name="YourName" value="" /><br> 
    <div id="errorYourName" class="error">This name isn't Arthur.</div> 

    What is your quest: <input id="txtYourQuest" type="text" name="YourQuest" value="" /><br> 
    <div id="errorYourQuest" class="error">This quest must be for the Grail.</div> 

    What is your favorite color: <input id="txtYourColor" type="text" name="YourColor" value="" /><br> 
    <div id="errorYourColor" class="error">Sorry, you must like red or blue.</div> 

    What is the air speed velocity of an unladen swallow:<br> 
    Type: 
    <select> 
    <option>African</option> 
    <option>European</option> 
    </select> 
    <input id="txtYourGuess" type="text" name="YourGuess" value="" /><br> 
    <div id="errorYourGuess" class="error">This guess stinks.</div> 
    <hr> 
    <input id="submitMe" type="submit" /> 
    </form> 
</div> 

Guión

$(document).ready(function(){ 
    $("#myDiv").modal({ 
    containerCss:{ 
    height: '165px', 
    width: '350px' 
    } 
}) 
$("#txtYourName").focus(); 

addValidate('#txtYourName','Arthur','#errorYourName'); 
addValidate('#txtYourQuest','Grail|grail','#errorYourQuest'); 
addValidate('#txtYourColor','red|blue','#errorYourColor'); 
addValidate('#txtYourGuess','11|24','#errorYourGuess'); // See http://www.style.org/unladenswallow/ ;) 

    $("#myDiv form").change(function() { 
    // This is called if there are any changes to the form... added here for an example 
    // alert('Form change detected'); 
    }); 
}) 
function addValidate(el,valid,err){ 
$(el).blur(function() { 
    if ($(el).val().length > 0 && !$(el).val().match(valid)) { 
    if ($(err).is(':hidden')) { 
    $('#simplemodal-container').animate({'height': ($('#simplemodal-container').height() + 25) + 'px'},1000); 
    $(err).slideDown(1000); 
    } 
    } else { 
    // entry 2 
    if ($(err).is(':visible')) { 
    $('#simplemodal-container').animate({'height': ($('#simplemodal-container').height() - 25) + 'px'},1000); 
    $(err).slideUp(1000); 
    } 
    } 
}); 
} 

Answer 2

Jquery:

$(document).ready(function() { 

var originalFontSize = 12; 

var sectionWidth = $('#sidebar').width(); 



$('#sidebar span').each(function(){ 

    var spanWidth = $(this).width(); 

    var newFontSize = (sectionWidth/spanWidth) * originalFontSize; 

    $(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"}); 

}); 

}); 

</script> 

div:

<div id="sidebar"> 

<span>fits the width of the parent</span><br /> 

<span>Hello</span><br /> 

<span>my</span><br /> 

<span>name</span><br /> 

<span>is</span><br /> 

<span>john</span><br /> 

<span>1</span><br /> 

<span>23</span><br /> 

<span>456</span><br /> 

<span>12345678910</span><br /> 

<span>the font size in the span adjusts to the width</span><br /> 

</id> 

vista previa http://jbdes.net/dev/js/fontsize.html

Answer 3

tablas pasadas de moda son (todavía) muy bueno para centrar las cosas, rápido, fluido y código libre.

<table width=100% height=100%><tr><td align=center valign=center> 
    <table><tr><td style="yourStyle"> 
     your Content 
    </td></tr></table> 
</td></tr></tabĺe> 

CSS: HTML,BODY {height:100%; width:100%}