Uniformiser via Javascript la hauteur d'un groupe d'élements
Par Olivier Gendrin le mardi, janvier 17 2006, 17:02 - Développement web - Lien permanent
Vous avez peut-être lu le code javascript qui permettait d'égaliser la hauteur de deux div contigües et que j'avais publié dans ces pages ? J'ai eu besoin d'un code du même type pour égaliser la hauteur de titres, groupés par trois, sauf la première ligne qui n'a que deux éléments (oui, je parle de ce qui m'a posé problème la semaine dernière). J'ai donc généralisé la fonction.
Voilà la fonction :
function adjustheight(my_array, limit, offset) {
if (offset < 1) offset = 0;
if (limit < 1) limit = my_array.length;
if (!my_array[0] || offset > (limit-1))
return;
var rows = Math.ceil(my_array.length/limit);
for (var i=0; i < rows; i++)
{
var index = (limit * i);
var rowmaxheight=0;
if (index+limit-offset < my_array.length) var portee = index+limit-offset;
else var portee = my_array.length;
if (i==0) var depart = 0;
else var depart = index-offset;
for (var j=depart; j < portee; j++)
{
if (my_array[j].offsetHeight > rowmaxheight) rowmaxheight = my_array[j].offsetHeight;
}
for (var j=depart; j < portee; j++)
{
my_array[j].style.height = rowmaxheight+"px";
}
}
}
Cette fonction prend en paramètre d'abord un tableau, puis éventuellement le nombre d'élément par ligne, et le décalage de la première ligne (c'est le cas où toutes les lignes ont x éléments sauf la première qui en a moins). On pourrait l'améliorer en fixant le my_array[j].style.height en em, ce qui éviterait certains effets de bords lors de changement de taille des caractères, mais je ne sais pas comment obtenir la valeur en pixel de em. Si quelqu'un à un idée, ou un lien…
Pour obtenir le tableau, j'ai aussi étendu la fonction getElementsByClassName qu'on peut trouver sur le Glazblog. En gros, je me laisse la possibilité de limiter la recherche à un tag (la fonctions pourrait être améliorée pour accepter un tableau de tags), et de la limiter aux descendants d'un id (même remarque).
function getElementsByClassName(needle, tag, idlimit) {
if (!tag || !document.getElementsByTagName(tag))
tag == '*';
if (!idlimit || !document.getElementById(idlimit))
var my_array = document.getElementsByTagName(tag);
else {
var my_array = document.getElementById(idlimit).getElementsByTagName(tag);
}
var retvalue = new Array();
var i, j;
for (i = 0, j = 0; i < my_array.length; i++)
{
var c = " " + my_array[i].className + " ";
if (c.indexOf(" " + needle + " ") != -1)
retvalue[j++] = my_array[i];
}
return retvalue;
}
J'avoue ne pas avoir totalement testé cette fonction, mais elle fonctionne quand on lui envoie un tag et un id.