Tagheight

[jQuery][Responsive Design] Centrer verticalement un élément en jQuery

…et conserver le centrage au redimensionnement de la fenêtre.

[jQuery] Des colonnes de même hauteur avec height

equal-height

Update : code désormais disponible sous forme de plug-in !

Plug-in jQuery

Dans le template HTML

Le paramètre setEqualHeight() sert à déterminer le nombre d’éléments par ligne (3 éléments par ligne dans le code d’exemple ci-dessous).

Remarque #1: Il reste la possibilité de définir depuis vos feuilles de styles des propriétés

et

pour gérer des hauteurs minimum et maximum pour vos blocs.

Utiliser ce plug-in dans le cadre d’un site responsive

Faire fonctionner jQuery $(window).width() et CSS3 Media Queries de concert

Source : Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width

Mettre en place le redimentionnement et le re-calcul des hauteurs côté jQuery

Il est indispensable de réinitialiser la hauteur du bloc ou de la colonne ciblée par le redimensionnement, sinon le plug-in ne sera pas capable d’écraser la valeur qu’il a précédemment affecté.

Si erreur « TypeError: $(…).css(…).setEqualHeight is not a function »

Remplacer le code du plug-in comme suit :

…et utiliser la fonction comme suit :

Si les éléments ciblés ne prennent pas la même hauteur au chargement de la page…

…mais seulement une fois que la fenêtre est redimensionnée, utiliser le plug-in dans la forme donnée plus haut dans le paragraphe Si erreur « TypeError: $(…).css(…).setEqualHeight is not a function » et déclenchez le de façon suivante :


Ancien article…

Source : http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

Simulation : http://jsfiddle.net/frontenddeveloper/6GPKn/

© 2020 devfrontend.info

Theme by Anders NorénUp ↑