Comment redimensionner automatiquement un div à la taille de son contenu lorsque le contenu de la div a changé?

Question

En ce moment, j'ai ce DIV avec un formulaire d'inscription centré sur la page. Le contenu de la DIV provient d'une page ascx. C'est bien fait. Maintenant, si l'utilisateur essaie de renseigner un nom qui n'est pas unique, un message d'erreur est ajouté par un certain jQuery à côté du champ du nom d'utilisateur. Cela brise la disposition de la DIV, puisque le contenu est maintenant plus large qu'avant. J'ai donc fait des recherches sur Google, mais je ne trouve pas de solution pour cela.

Quelqu'un peut-il me aider à trouver une belle façon de faire (pseudo HTML/js):

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

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

Je cherche la méthode "onChangeContents" (et/ou de l'événement) et le « div. Propriété "contentWidth".

Merci beaucoup de m'avoir aidé!

mise à jour: en essayant d'expliquer le problème plus clairement

Disons que je 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> 

Et disons que j'ai cet extrait 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."); 
    } 
    }); 
}); 

... où validateInput(value) renvoie true pour une valeur valide.

Eh bien maintenant. Le plugin SimpleModal prend le div et le place au centre de la page, avec une certaine largeur et hauteur il lit en quelque sorte le contenu de la div. Donc, la div n'est pas plus large que la case d'entrée, puisque l'intervalle est vide pour le moment. Lorsque la boîte de saisie perd le focus, un message d'erreur est placé dans la plage. Cela casse alors la disposition de la div.

Je pourrais mettre du code dans entry 1 qui redimensionne la div avec une animation à une certaine taille lorsque le message d'erreur a été effacé, et code dans entry 2 qui redimensionne la div à une plus grande taille de sorte que le message d'erreur s'adaptera.

Mais ce que je préfèrerais, c'est de savoir si le contenu de la div a changé, et d'ajuster le div en conséquence, animé et automatiquement.

Des idées? Merci encore.

Answer 1

Je n'ai jamais utilisé SimpleModal, mais à partir des exemples sur leur site, il semble que vous pouvez définir le conteneur CSS. Si vous voulez la hauteur pour régler, essayez de régler la hauteur de auto

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

Bien que l'exemple ne l'a pas, je pense que vous devez ajouter px après la hauteur et la largeur entre guillemets (par exemple "450px") .

---

Ok, voici une autre idée. Peut-être cela est trop, mais ajouter un champ caché:

<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> 

alors attach un événement de changement qui est déclenché en même temps que vous mettez à jour le message d'erreur.

$(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 
    }) 
}); 

Ceci est non testé et il peut aller par-dessus bord, mais je ne vois pas une fonction de mise à jour SimpleModal.

---

Mise à jour: Désolé je me suis dit que le flou est pas pris en charge avec l'événement en direct. J'ai donc fait d'autres tests et j'ai réalisé une démo de travail. Je l'ai posté dans this pastebin (ignorer le code simpleModal inclus en bas). Voici le code essentiel

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> 

Script

$(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> 

Aperçu http://jbdes.net/dev/js/fontsize.html

Answer 3

tables démodées sont (encore) grand choses de centrage, rapide, fluide et code 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%}