+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [jQuery] Adapter height d'un div a son contenu (/showthread.php?tid=3937)
Pages :
1
2
RE: [jQuery] Adapter height d'un div a son contenu - Allwise - 04-05-2009
En fait, il faut clear une seule fois, et pas dans les boîtes flottantes.
Je te renvoie un schéma + complet. Admettons que t'aies un conteneur et 3 boîtes, dont le contenu de la plus grande influe sur celui du conteneur :
![[Image: clipboard01vsi.jpg]](http://img513.imageshack.us/img513/7434/clipboard01vsi.jpg)
Après le clear, les boîtes se repositionnent normalement. Donc admettons que t'aies 3 "étages", avec plusieurs divs dans chaque étage : le header, le contenu, le footer.
T'aurais 3 clear:both; un pour chaque étage ( placé après le dernier élément de l'étage, et non pas un pour chaque élément de l'étage ).
Mais en fait, ça ne résoudra pas ton problème, parce qu'avec ça tu peux redimensionner le div parent, mais pas les autres divs de même niveau.
Avec le framework ExtJs, on peut lier deux éléments pour que lorsque l'un d'eux est redimensionné, l'autre le soit d'autant. Avec JQuery, je sais pas, y a peut-être l'équivalent
Donc finalement, le faire en restant propre, y a peut-être un truc mais je vois pas. Pour ma part, soit je choisirais la solution va-vite des tableaux, soit je continuerais dans la direction du calcul des dimensions. ( en fait je choisirai la solution offerte par ExtJs :p )
Bonne chance en tout cas.
RE: [jQuery] Adapter height d'un div a son contenu - jo_link_noir - 05-05-2009
Thedeejay si t'arrives à le faire avec le css je serais intéressé, y a pas mal de temps j'ai voulu le faire mais j'ai pas réussi :/ Sur firefox les div prennent la hauteur de la page et sur opera il en ce passe rien... pas regardé sur d'autre navigateur.
Phenix, pour être franc je suis un peu perdu avec le resultat que j'ai avec t'es page, alors je te passe le fichier que j'ai fait. Suffi de l'adapter.
A la place de livequery j'ai juste mi live, mais si tu met livequery ça fonctionne quand même.
<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript"><!--
(function($) {
size = function()
{
/* Modicateurs des hauteurs des Div principal*/
$div = $("div.Xgauche, div.table_gauche, div.gauche, div.table_center, div.Xdroite, div.table_droite, div.droite");
/* Réinitialise la hauteur des divs pour qu'ils prennent le minimum de place (équivaut à une hauteur non spécifier en css)*/
$div.height("");
/* Récupére la div la plus grande en hauteur*/
var h = Math.max(Math.max($("div.table_gauche").height(), $("div.table_center").height()), $("div.table_droite").height());
/*On applique la plus grande hauteur a toutes les div désign */
$div.height(h);
}
})(jQuery);
$(document).ready(function(){
$("a.Ajax").live('click', function(){
$.ajax({
url : this.href,
dataType : "html",
beforeSend : function(){
$("div.table_center").append("<p>Chargement...</p>");
},
success : function(reponse){
$("div.table_center").html(reponse);
size();
},
error : function(){
$("div.table_center").html("<p>Erreur.</p>");
}
});
return false;
});
$("a.empty").click(function(){
$("div.table_center").html("<p>contenu effacer</p>");
size();
});
//live pour que ça soit utiliser dans les paragraphe de la page charger en ajax
$("p").live("click", function(){$(this).css("color","yellow");});
});
--></script>
<style>
div{
margin-left:10px;
padding:2px;
background:#000;
}
#contener div, #contener{
float:left;
}
.table_droite{
background:#ccc;
margin-right:10px;
}
.table_center{
background:#ddd;
}
.table_gauche{
background:#eee;
}
.stopf{
clear:both;
}
</style>
</head>
<body>
<div id=contener>
<div class="table_gauche">
<p>Je suis un p<br /> qui s'étend sur<br />plusieus ligne</p>
<p>Je suis un p<br /> qui s'étend sur<br />plusieus ligne</p>
</div>
<div class="table_center">
<p>Je suis un p<br /> qui s'étend sur<br />plusieus ligne</p>
<p>Je suis un p<br /> qui s'étend sur<br />plusieus ligne</p>
<p>Je suis un p<br /> qui s'étend sur<br />plusieus ligne</p>
</div>
<div class="table_droite">
<p>Je suis un p<br /> qui s'étend sur<br />plusieus ligne</p>
</div>
</div>
<p class="stopf"><a class="Ajax" href="text.txt">clic</a> <a class="empty" href="#">effacer</a></p>
</body>
</html>Bonne nuit
RE: [jQuery] Adapter height d'un div a son contenu - phenix - 05-05-2009
j-12, ton script fonctionne à merveille. Merci beaucoup.
Cela me permet de mieux comprendre comment fonction Ajax et jQuery :p.
De même, je ne connaissant pas .live, pourtant sa a la même fonction que livequery. Du coup je peux virer un plugin :p
Merci beaucoup pour ton aide.
RE: [jQuery] Adapter height d'un div a son contenu - OncleJames - 10-05-2009
Il y a quelques temps j'ai eu affaire a ce problème, j'ai aussi opté pour la solution javascript/jquery .. malheureusement pas compatible avec tout les navigateurs.
Un grand esprit ma suite à cela parlé de la fonction overhide en CSS, et tout s'est arrangé
Je n'ai plus le fonctionnement exact, mais il utiliser une hauteur fixe couplé avec la propriété overhide.
RE: [jQuery] Adapter height d'un div a son contenu - jo_link_noir - 11-05-2009
Ça me rappelle qu'on peu aussi le le faire avec un display. Le jour où j'avais essayé, impossible de le faire marché autre part que sur safari, mais je vient de le refaire et maintenant ça marche sous ff, opera et ie8 avec une bonne doctype.
Mise en page Css avancée grâce à la propriété display (alsacreations)
valeur possible d'un display
OncleJames, t'es sûr pour overhide ? je ne le voit pas dans cette liste :/