15
JUIN

Smart Columns: Des colonnes intelligentes avec jQuery

Publié le 15/06/09 à 07h10 par DJo

Smart Columns est un plugin jQuery et CSS permettant de présenter des colonnes intelligemment en fonction de la résolution d'écran du visiteur.

Smart Columns

A la base il existe deux manières de présenter des colonnes:

  • Avec une largeur fixe
  • Avec une largeur relative (pourcentage)

Le problème est qu'en fonction de la résolution d'écran du visiteur, se dernier n'aura pas la même présentation des colonnes qu'un autre.

Si vous utilisez des largeurs fixes, vous pouvez avoir ce genre de problème de présentation:

Colonnes fixes

De l'espace est gâché sur la droite car une colonne n'a pas la place de tenir, ce qui est assez dommage !

Et si vous utilisez les largeurs relatives, il y'aura plus ce problème de marge de droite non utilisée, mais il y'aura un problème de nombre d'éléments maximum qur une ligne. Les colonnes pourront être diformes:

Colonnes avec largeur relative

Pour une présentation idéale, qui combinerait les deux avantages de ces deux types de largeurs, le plugin Smart Columns entre en jeu.

Il va en effet redimmensionner dynamiquement les colonnes de façon à ce qu'on puisse en faire tenir un maximum sur une ligne sans pour autant qu'il y'ai de marge gaspillée.

Colonnes dont la largeur est automatiquement gérée par le plugin

Ce qui vous permet d'avoir la présentation idéale quelque soit la résolution d'écran du visiteur, et même s'il redimensionne la fenêtre de son navigateur à la main.

Site Officiel

Baraguiné par HammHetfield le 15/06/09 à 21h33
HammHetfield sur La Ferme du Web
Cool ça, c'est vrai que les colonnes, quand c'est mal placé, ça casse tout, merci ;)
Baraguiné par le 26/04/12 à 14h30
Dommage le lien ne marche plus. je test columnizer mais il ne fonctionne pas comme je le souhaiterais. il semble créer automatiquement des largeurs en pourcentage, même lorsqu'on utilise la fonction
$('.columniz3').columnize({ width:262 });
du coup j'aurais bien testé ce plugin là mais impossible de le trouver...

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web