Nous sommes tous un peu crispés quand nous remarquons sur notre site internet que 2 colonnes côte à côte ne sont pas de la même hauteur ! Certes la disposition en « masonery » est très tendance ces dernières années grâce à Pinterest mais rien à faire, quand on a juste 2 colonnes côte à côte on aimerait qu’elles soient de la même hauteur parce que…. ben parce que ça fait mieux, ça fait plus propre, c’est plus net… bref petit tutoriel pour mieux dormir avec des colonnes de la même hauteur !
Menu de navigation rapide
Repérer les colonnes et récupérer leur classe CSS
Avant d’appliquer la formule magique il faut d’abord pouvoir expliquer à notre code quelles colonnes il faut qu’il compare pour leur attribuer la même hauteur.
Pour se faire soit on sait comment ajouter des classes CSS à nos colonnes en utilisant notre thème WordPress à travers le builder intégré (Visual composer, divi, etc.), soit en utilisant l’inspecteur de notre navigateur :
- Clic droit sur la page internet
- Inspecter (pour Chrome)
Prenons une page avec 2 colonnes qui ont un contenu différent :
Il suffit de faire un clic droit dessus et d’afficher l’inspecteur en cliquant sur « Inspecter »
Et de repérer les classes des colonnes que l’on veut de la même hauteur :
Comme on veut que les 2 textes soient de la même hauteur malgré leur différence on va sélectionner le bloc qui contient les 2 textes. Dans cet exemple on peut voir que les 2 contenants partagent la même classe : ‘et_pb_text’ et c’est cette classe que l’on va utiliser pour harmoniser la hauteur des colonnes qui contiennent le texte.
On pourrait sélectionner un autre niveau de chaque colonne comme « et_pb_column » ou « et_pb_text_inner » mais comme on modifie la propriété css « height » on risque de provoquer des conflits qui vont casser le design et faire dépasser des éléments !
Insérer le code jQuery et le modifier pour l’adapter à notre page
Harmoniser la hauteur des colonnes au chargement de la page
Il est temps maintenant d’utiliser un peu de jQuery pour mettre en place la magie ! Voici le code qui va être utilisé :
var memeHauteur = function () {
// Réinitialiser la hauteur des colonnes
$('.et_pb_text').css('height', 'auto');
var hauteurMax = 0;
// Récupérer la plus grande des hauteurs
$('.et_pb_text').each(function () {
if ($(this).height() > hauteurMax) {
hauteurMax = $(this).height();
}
});
// Paramétrer les colonnes pour qu'elle adopent la hauteur de la plus grande d'entre elles
$('.et_pb_text').css('height', hauteurMax);
};
La fonction va donc réinitialiser la hauteur des 2 colonnes, récupérer la hauteur de la plus grande des 2 colonnes et faire en sorte que toutes les colonnes aient cette hauteur ! Il ne reste plus qu’à mettre cette fonction en place dans son fichier de fonctions jQuery perso qui doit ressembler à ça :
jQuery(document).ready(function( $ ){
var memeHauteur = function () {
// Réinitialiser la hauteur des colonnes
$('.et_pb_text').css('height', 'auto');
var hauteurMax = 0;
// Récupérer la plus grande des hauteurs
$('.et_pb_text').each(function () {
if ($(this).height() > hauteurMax) {
hauteurMax = $(this).height();
}
});
// Paramétrer les colonnes pour qu'elle adopent la hauteur de la plus grande d'entre elles
$('.et_pb_text').css('height', hauteurMax);
};
});
En effet, il faut bien attendre que la page soit chargée avant de faire des modifications, d’où la ligne 1 ! Et on en profite pour lui passer jQuery et son « $ » pour pouvoir utiliser jQuery. Il existe une autre façon de passer jQuery directement en php dans la déclaration de son fichier jQuery perso du côté de function.php de son thème enfant mais cela fera l’objet d’un autre tutoriel !
Enfin il ne reste plus qu’à appeler notre fonction « memeHauteur » pour qu’elle s’exécute. Mais pour éviter d’avoir des textes coupés et des contenus tronqués, on va dire à notre code de prendre son temps, tranquilou, et d’attendre que la page ai fini de charger avant de s’exécuter ! On va utiliser :
jQuery(document).ready(function( $ ){
var memeHauteur = function () {
// Réinitialiser la hauteur des colonnes
$('.et_pb_text').css('height', 'auto');
var hauteurMax = 0;
// Récupérer la plus grande des hauteurs
$('.et_pb_text').each(function () {
if ($(this).height() > hauteurMax) {
hauteurMax = $(this).height();
}
});
// Paramétrer les colonnes pour qu'elle adopent la hauteur de la plus grande d'entre elles
$('.et_pb_text').css('height', hauteurMax);
};
});
$(window).load(function(){
memeHauteur();
});
Voici le résultat final de cette fonction perso :
Harmoniser la hauteur des colonnes lors du redimensionnement de la fenêtre
La hauteur de la colonne pour un élément d’un site web dépend de la largeur dont il dispose pour schématiser. Si on redimensionne la fenêtre de son navigateur avec sa souris on se rend compte que la hauteur va changer et notre code ne sera plus valable puisque on lui a dit de s’appliquer uniquement au chargement et non pas au redimensionnement ! Ce sera l’objet du code ci-dessous :
jQuery(document).ready(function( $ ){
var memeHauteur = function () {
// Réinitialiser la hauteur des colonnes
$('.et_pb_column').css('height', 'auto');
var hauteurMax = 0;
// Récupérer la plus grande des hauteurs
$('.et_pb_column').each(function () {
if ($(this).height() > hauteurMax) {
hauteurMax = $(this).height();
}
});
// Paramétrer les colonnes pour qu'elle adopent la hauteur de la plus grande d'entre elles
$('.et_pb_column').css('height', hauteurMax);
};
});
$(window).load(function(){
memeHauteur();
});
$(window).resize(function () {
memeHauteur();
});
Ainsi, on va avoir notre fonction qui sera activée lors du redimensionnement de la fenêtre !