les modules en position "top" de même hauteur

**webcrea** · 16/08/2016, 14h39

Re : les modules en position "top" de même hauteur

Qu'entends tu par "façon pro", là ça marche et le code est correct.

Maintenant, si tu veux utiliser jQuery, tu as 2 méthodes

Tu peux copier ce code dans un fichier html et l'adapter après à ton environnement (entre autre jQuery à la place de $)

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.moduletable_tm{
border: 1px #000 solid;
width: 200px;
display: inline-block;
margin:10px;
} 
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){

	myBox = document.getElementsByClassName("moduletable_tm");
	maxHeight = 0;
	hauteurs = [];
	$(myBox).each(function () {
		// Extraction de la hauteur de la div
		var hauteur = parseFloat($(this).css('height'));
		// A voir dans F12
		console.log(hauteur);
		// Méthode 1 : Verif avec la hauteur max
		if(hauteur > maxHeight) maxHeight = hauteur;
		// Méthode 2 : On stocke la hauteur dans le tableau
		hauteurs.push(hauteur);
	});
	
	// Méthode 1 : On recherche le max dans le tableau
	maxHeight1 = Math.max.apply(null, hauteurs);
	// On affiche les résultats des 2 méthodes
	$("#info").html("maxHeight selon les 2 methodes : " + maxHeight1 + " = " + maxHeight);
	// On applique à toutes les div
	$(".moduletable_tm").css("height", maxHeight + "px");
});
</script>
</head>
<body>
<div style="height:200px" class="moduletable_tm">block 1</div>
<div style="height:210px" class="moduletable_tm">block 2</div>
<div style="height:180px" class="moduletable_tm">block 3</div>

<div id="info"></div>
</body>
</html>

**webours** · 17/08/2016, 06h58

Re : les modules en position "top" de même hauteur

Merci pour la réponse,

J'entendais "façon pro" le fait que je développe en js depuis deux mois et mon script a une écriture très procédurale.
Je voulais savoir si il y avait une autre façon de traiter ce cas dans un esprit plus js.

Je n'ai pas encore abordé jquery mais cet exemple est très bien pour commencer puisque c'est la transposition du script js.

les modules en position "top" de même hauteur

[Suggestion] les modules en position "top" de même hauteur

Commentaire

Commentaire

Annonce

Partenaire de l'association