Étiquette : colonnes

[Foundation 6] Une grille flexbox aux largeurs de colonnes custom avec les mixin flex-grid-size

30/10/2017 / admin

Doc Foundation 6 – Flex Grid – @mixin flex-grid-size

  .footer {
    padding: $global-padding 0;
    @include flex-grid-row(
      $gutters: 0);

    &-column {
      @include flex-grid-size(
        $columns:  22.22222%);
      &:last-child {
        @include flex-grid-size(
          $columns: 33.33333%);
      }    
    }
  }

.footer {

padding: $global-padding 0;

@include flex-grid-row(

$gutters: 0);

&-column {

@include flex-grid-size(

$columns: 22.22222%);

&:last-child {

@include flex-grid-size(

$columns: 33.33333%);

}

Une rangée basée sur 8 colonnes

.row-8 {
  @include flex-grid-row($columns: 8);
  .column {
    @include flex-grid-column($columns: 1/8);
    &.large-6 {
      @include flex-grid-column($columns: 6/8);
    }
  }
  .columns {
    @extend .column;
  }
}

.row-8 {

@include flex-grid-row($columns: 8);

.column {

@include flex-grid-column($columns: 1/8);

&.large-6 {

@include flex-grid-column($columns: 6/8);

}

.columns {

@extend .column;

}

[Bootstrap 3][SASS] Changer la valeur de la variable $grid-columns

06/01/2016 / admin

Retenir : lorsqu’on redéfinit ponctuellement la valeur de la variable $grid-columns pour créer une batterie de styles spécifique à un affichage en x (autre que la valeur par défaut qui est 12) colonnes, il faut penser à redéclarer systématiquement la valeur par défaut juste après. Cf. l’exemple ci-dessous.

Source : Bootstrap: Advanced Grid Tricks (sous-partie Redefining grid-columns).

Le truc ici est de réaliser qu’SCSS parse de haut en bas et qu’à partir du moment où il atteint la partie de notre code où nous cherchons à redéfinir la variable $grid-columns les propriétés précédentes ont déjà été générées.

Si nous changeons la valeur de $grid-columns à 5 pour générer une batterie de styles spécifiques pour une grille 5 colonnes et que nous remettons cette valeur à la valeur par défaut (12) ensuite, nous n’obtiendrons pas d’effets de bord.

$grid-columns: 5;

@include make-grid(xs);

$grid-columns: 12;

$grid-columns: 5;

@include make-grid(xs);

$grid-columns: 12;

Dans l’exemple ci-dessus, des classes .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4 et .col-xs-5 seront générées pour créer une mise en page sur 5 colonnes (réparties sur 100% de largeur) par rangée.

Créer une batterie de classes pour une grille 5 colonnes

$grid-columns: 5; // on définit la valeur de $grid-columns à 5 pour 5 colonnes par rangées

[class*="col-five-"],[class^="col-five-"]{
    position: relative;
    min-height: 1px;
    padding-left: $grid-gutter-width / 2;
    padding-right: $grid-gutter-width / 2;
    float: left;
}

@include make-grid(five-xs);

// Small grid
@media (min-width: $screen-sm-min) {
  @include make-grid(five-sm);
}

// Medium grid
@media (min-width: $screen-md-min) {
  @include make-grid(five-md);
}

// Large grid
@media (min-width: $screen-lg-min) {
  @include make-grid(five-lg);
}

$grid-columns: 12; // suite à la génération de nos nouvelles classes, on réinitialise immédiatement la valeur de $grid-columns à 12 (ou 12 est la valeur par défaut dans _variables.scss de bootstrap)

$grid-columns: 5; // on définit la valeur de $grid-columns à 5 pour 5 colonnes par rangées

[class*="col-five-"],[class^="col-five-"]{

position: relative;

min-height: 1px;

padding-left: $grid-gutter-width / 2;

padding-right: $grid-gutter-width / 2;

float: left;

}

@include make-grid(five-xs);

// Small grid

@media (min-width: $screen-sm-min) {

@include make-grid(five-sm);

}

// Medium grid

@media (min-width: $screen-md-min) {

@include make-grid(five-md);

}

// Large grid

@media (min-width: $screen-lg-min) {

@include make-grid(five-lg);

}

$grid-columns: 12; // suite à la génération de nos nouvelles classes, on réinitialise immédiatement la valeur de $grid-columns à 12 (ou 12 est la valeur par défaut dans _variables.scss de bootstrap)

[Bootstrap 3] Un layout 5 colonnes responsive avec Twitter Bootstrap 3

14/01/2015 / admin

Ressources en ligne :

Méthode SASS pour 5 colonnes (concept Bootstrap)

Fonctionne et génère la batterie complète de styles nécessaires :

$grid-columns: 5; // Changer la valeur par défaut pour 5 colonnes

[class*="col-five-"],[class^="col-five-"]{
    position: relative;
    min-height: 1px;
    padding-left: $grid-gutter-width / 2;
    padding-right: $grid-gutter-width / 2;
    float: left;
}

@include make-grid(xs);

// Small grid
@media (min-width: $screen-sm-min) {
  @include make-grid(five-sm);
}

// Medium grid
@media (min-width: $screen-md-min) {
  @include make-grid(five-md);
}

// Large grid
@media (min-width: $screen-lg-min) {
  @include make-grid(five-lg);
}

$grid-columns: 12; // Toujours remettre la valeur par défaut qui se trouve dans _variables.scss

$grid-columns: 5; // Changer la valeur par défaut pour 5 colonnes

[class*="col-five-"],[class^="col-five-"]{

position: relative;

min-height: 1px;

padding-left: $grid-gutter-width / 2;

padding-right: $grid-gutter-width / 2;

float: left;

}

@include make-grid(xs);

// Small grid

@media (min-width: $screen-sm-min) {

@include make-grid(five-sm);

}

// Medium grid

@media (min-width: $screen-md-min) {

@include make-grid(five-md);

}

// Large grid

@media (min-width: $screen-lg-min) {

@include make-grid(five-lg);

}

$grid-columns: 12; // Toujours remettre la valeur par défaut qui se trouve dans _variables.scss

Ne fonctionne pas (génère des classes pour 12 colonnes) :

.columns-5{
  $grid-columns: 5;
  @include make-grid(toto);
}

.columns-5{

$grid-columns: 5;

@include make-grid(toto);

}

.columns-5{
  $grid-columns: 5;
  @include make-grid(xs);
  @media (min-width: $screen-sm-min) {
    @include make-grid(sm);
  }
  @media (min-width: $screen-md-min) {
    @include make-grid(md);
  }
  @media (min-width: $screen-lg-min) {
    @include make-grid(lg);
  }
}

.columns-5{

$grid-columns: 5;

@include make-grid(xs);

@media (min-width: $screen-sm-min) {

@include make-grid(sm);

}

@media (min-width: $screen-md-min) {

@include make-grid(md);

}

@media (min-width: $screen-lg-min) {

@include make-grid(lg);

}

Méthode pré-processeur pour 5 colonnes de largeurs égales

Source : Five equal columns in twitter bootstrap.
Méthode qui génère moins de code, mais uniquement des briques de largeur égale (20%).

SASS

.col-lg-2-4{
  @include make-lg-column(2.4)
}
.col-md-2-4{
  @include make-md-column(2.4)
}
.col-sm-2-4{
  @include make-sm-column(2.4)
}

.col-md-push-2-4{
  @include make-md-column-push(2.4)
}
.col-md-pull-2-4{
  @include make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  @include make-md-column-offset(2.4)
}

.col-lg-2-4{

@include make-lg-column(2.4)

}

.col-md-2-4{

@include make-md-column(2.4)

}

.col-sm-2-4{

@include make-sm-column(2.4)

}

.col-md-push-2-4{

@include make-md-column-push(2.4)

}

.col-md-pull-2-4{

@include make-md-column-pull(2.4)

}

.col-md-offset-2-4{

@include make-md-column-offset(2.4)

}

LESS

.col-lg-2-4{
  .make-lg-column(2.4)
}
.col-md-2-4{
  .make-md-column(2.4)
}
.col-sm-2-4{
  .make-sm-column(2.4)
}

.col-lg-2-4{
  .make-lg-column(2.4)
}
.col-md-2-4{
  .make-md-column(2.4)
}
.col-sm-2-4{
  .make-sm-column(2.4)
}

.col-lg-2-4{

.make-lg-column(2.4)

}

.col-md-2-4{

.make-md-column(2.4)

}

.col-sm-2-4{

.make-sm-column(2.4)

}

.col-lg-2-4{

.make-lg-column(2.4)

}

.col-md-2-4{

.make-md-column(2.4)

}

.col-sm-2-4{

.make-sm-column(2.4)

}

Méthode alternative pour une palette complète sur 5 colonnes (CSS)

Source : Quick tips: 5 columns layout with Twitter Bootstrap, 5 equal columns Bootstrap grid layout with 1, 2, 3, 4 of five.

/* 5 columns layout with Twitter Bootstrap 3 */
.col-xs-15, .col-xs-25, .col-xs-35, .col-xs-45,
.col-sm-15, .col-sm-25, .col-sm-35, .col-sm-45,
.col-md-15, .col-md-25, .col-md-35, .col-md-45,
.col-lg-15, .col-lg-25, .col-lg-35, .col-lg-45 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}

.col-xs-25 {
    width: 40%;
    float: left;
}

.col-xs-35 {
    width: 60%;
    float: left;
}

.col-xs-45 {
    width: 80%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
    
    .col-sm-25 {
        width: 40%;
        float: left;
    }

    .col-sm-35 {
        width: 60%;
        float: left;
    }

    .col-sm-45 {
        width: 80%;
        float: left;
    }    
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
    
    .col-md-25 {
        width: 40%;
        float: left;
    }

    .col-md-35 {
        width: 60%;
        float: left;
    }

    .col-md-45 {
        width: 80%;
        float: left;
    }    
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
    
    .col-lg-25 {
        width: 40%;
        float: left;
    }

    .col-lg-35 {
        width: 60%;
        float: left;
    }

    .col-lg-45 {
        width: 80%;
        float: left;
    }    
}

/* 5 columns layout with Twitter Bootstrap 3 */

.col-xs-15, .col-xs-25, .col-xs-35, .col-xs-45,

.col-sm-15, .col-sm-25, .col-sm-35, .col-sm-45,

.col-md-15, .col-md-25, .col-md-35, .col-md-45,

.col-lg-15, .col-lg-25, .col-lg-35, .col-lg-45 {

position: relative;

min-height: 1px;

padding-right: 10px;

padding-left: 10px;

}

.col-xs-15 {

width: 20%;

float: left;

}

.col-xs-25 {

width: 40%;

float: left;

}

.col-xs-35 {

width: 60%;

float: left;

}

.col-xs-45 {

width: 80%;

float: left;

}

@media (min-width: 768px) {

.col-sm-15 {

width: 20%;

float: left;

}

.col-sm-25 {

width: 40%;

float: left;

}

.col-sm-35 {

width: 60%;

float: left;

}

.col-sm-45 {

width: 80%;

float: left;

}

@media (min-width: 992px) {

.col-md-15 {

width: 20%;

float: left;

}

.col-md-25 {

width: 40%;

float: left;

}

.col-md-35 {

width: 60%;

float: left;

}

.col-md-45 {

width: 80%;

float: left;

}

@media (min-width: 1200px) {

.col-lg-15 {

width: 20%;

float: left;

}

.col-lg-25 {

width: 40%;

float: left;

}

.col-lg-35 {

width: 60%;

float: left;

}

.col-lg-45 {

width: 80%;

float: left;

}

<div class="container">
    <div class="row">
      <div class="col-md-15">.col-md-15</div>
      <div class="col-md-15">.col-md-15</div>
      <div class="col-md-15">.col-md-15</div>
      <div class="col-md-15">.col-md-15</div>
      <div class="col-md-15">.col-md-15</div>      
    </div>
</div>

</div>

[Magento 1.9] Afficher un nombre de produits par rangée différent en fonction du viewport dans la liste de catégories/produits du thème RWD

11/12/2014 / admin

Méthode #1 : vous avez une contrainte responsive

Une solution full CSS qui gère le nombre de produits par rangée en fonction du viewport.
Cette solution repose sur l’exploitation du mixin SASS product-grid natif au thème Rwd et sur la modification de 2 fichiers :

app/design/frontend/rwd/yourpackage/template/catalog/product/list.phtml pour l’ajout de classes supplémentaires nécessaires à l’activation des media-queries
skin/frontend/rwd/yourpackage/scss/module/_product-list.scss pour l’ajout des mediaqueries

list.phtml

Trouver la ligne suivante sous la section <?php // Grid Mode ?> :

<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">

1	<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">

…et ajouter les classes suivantes :

<ul class="products-grid products-grid--max-1-col products-grid--max-2-col products-grid--max-3-col products-grid--max-<?php echo $_columnCount; ?>-col">

1	<ul class="products-grid products-grid--max-1-col products-grid--max-2-col products-grid--max-3-col products-grid--max-<?php echo $_columnCount; ?>-col">

Remarque : la logique est la même que celle du système de grid responsive proposé par Bootstrap pour ceux qui connaissent.

_product-list.scss

Pour info : les variables prédéfinies à exploiter

$product-column-spacing : espace entre les colonnes (valeur en px).
$productsGridActionHeight : hauteur d’un item produit (valeur en px – si la hauteur de l’élément .product-info change, cette valeur devrait être ajustée).

Repérer le mixin suivant :

@include bp(min-width, 960px) {
    @include product-grid(4, 960);
    @include product-grid(5, 960);
    @include product-grid(6, 960);
}

@include bp(min-width, 960px) {

@include product-grid(4, 960);

@include product-grid(5, 960);

@include product-grid(6, 960);

}

…et ajouter juste en dessous :

@include bp(min-width, 993px) {
    @include product-grid(3, 993);
}

@include bp(max-width, 992px) {
    @include product-grid(2, 992);
}

@include bp(max-width, 360px) {
    @include product-grid(1, 360);
}

@include bp(min-width, 993px) {

@include product-grid(3, 993);

}

@include bp(max-width, 992px) {

@include product-grid(2, 992);

}

@include bp(max-width, 360px) {

@include product-grid(1, 360);

}

Méthode #2 : vous n’avez pas de contrainte responsive

Prendre la main sur le nombre de produits par rangée en modifiant un paramètre de layout.

catalog.xml :

Trouver la section Category layered navigation layout ou la section Category default layout et localiser la ligne suivante :

<!-- Since the addColumnCountLayoutDepend does not work, we are manually setting the max columns -->
<action method="setColumnCount"><count>3</count></action>

1 2	<!-- Since the addColumnCountLayoutDepend does not work, we are manually setting the max columns --> <action method="setColumnCount"><count>3</count></action>

Modifier la valeur de <count /> selon le nombre de colonnes souhaité.

Méthode #3 (bidouille – ne pas utiliser)

Source : How to change product column quantity in Magento

Il faut modifier 2 fichiers :

app/design/frontend/default/yourtheme/layout/catalog.xml
app/design/frontend/default/yourtheme/template/catalog/product/list.phtml

catalog.xml :

Trouver la section Category layered navigation layout ou la section Category default layout et ajouter les lignes suivantes (ou modifiez les si elles existent déjà) :

<reference name="root">
<action method="setTemplate"><template>page/1column.phtml</template></action>
</reference>

<action method="setTemplate"><template>page/1column.phtml</template></action>

</reference>

Remarque : vous pouvez cibler le template de votre choix en modifiant la valeur entre la balise <template />.

list.phtml :

Trouver la ligne suivante sous la section <?php // Grid Mode ?> :

<?php $_columnCount = $this->getColumnCount(); ?>

1	<?php $_columnCount = $this->getColumnCount(); ?>

…et la remplacer par :

<?php $_columnCount = 3  ?>

1	<?php $_columnCount = 3 ?>

Remarque : vous pouvez choisir le nombre de colonnes par rangée à affocher en modifiant la valeur de $_columnCount.

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

19/11/2012 / admin

Plug-in jQuery
Utiliser ce plug-in dans le cadre d’un site responsive
Si erreur « TypeError: $(…).css(…).setEqualHeight is not a function »
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

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

Plug-in jQuery

(function($){
    "use strict";
    $(document).ready(function(){
        $.fn.extend({
            setEqualHeight: function(chunkSize){
                var length = this.length;
                if(typeof(chunkSize) == 'undefined'){chunkSize = length;}
                for (var i=0; i<length; i+=chunkSize){
                    var columns = this.slice(i, i+chunkSize);
                    var max = 0;
                    columns.each(function(){
                        var current = $(this).height();
                        if(current > max) {max = current;}
                    });
                    columns.height(max);
                }
            }
        });
    });
})(jQuery);

(function($){

"use strict";

$(document).ready(function(){

$.fn.extend({

setEqualHeight: function(chunkSize){

var length = this.length;

if(typeof(chunkSize) == 'undefined'){chunkSize = length;}

for (var i=0; i<length; i+=chunkSize){

var columns = this.slice(i, i+chunkSize);

var max = 0;

columns.each(function(){

var current = $(this).height();

if(current > max) {max = current;}

});

columns.height(max);

}

});

})(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).

<script type="text/javascript">
    (function($){
        "use strict";
        $(document).ready(function(){
            $('#shelfList .shelf-line').setEqualHeight(3);
        });
    })(jQuery);
</script>

(function($){

"use strict";

$(document).ready(function(){

$('#shelfList .shelf-line').setEqualHeight(3);

});

})(jQuery);

</script>

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

min-height

1	min-height

max-height

1	max-height

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é.

(function($){
    "use strict";
    $('.abo-offre').css({height: 'auto'}).setEqualHeight(2);
    $(window).on('resize', function(){
        $('.abo-offre').css({height: 'auto'}).setEqualHeight(2);
    });
})(jQuery);

(function($){

"use strict";

$('.abo-offre').css({height: 'auto'}).setEqualHeight(2);

$(window).on('resize', function(){

$('.abo-offre').css({height: 'auto'}).setEqualHeight(2);

});

})(jQuery);

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

Remplacer le code du plug-in comme suit :

(function($){
  "use strict";
    $.fn.extend({
        setEqualHeight: function(chunkSize){
            var length = this.length;
            if(typeof(chunkSize) == 'undefined'){chunkSize = length;}
            for (var i=0; i<length; i+=chunkSize){
                var columns = this.slice(i, i+chunkSize);
                var max = 0;
                columns.each(function(){
                    var current = $(this).height();
                    if(current > max) {max = current;}
                });
                columns.height(max);
            }
        }
    });
})(jQuery);

(function($){

"use strict";

$.fn.extend({

setEqualHeight: function(chunkSize){

var length = this.length;

if(typeof(chunkSize) == 'undefined'){chunkSize = length;}

for (var i=0; i<length; i+=chunkSize){

var columns = this.slice(i, i+chunkSize);

var max = 0;

columns.each(function(){

var current = $(this).height();

if(current > max) {max = current;}

});

columns.height(max);

}

});

})(jQuery);

…et utiliser la fonction comme suit :

<script type="text/javascript">
	(function($){
	    "use strict";
			$(document).ready(function(){
				$('.shelf-line .shelf-label').css({height: 'auto'}).setEqualHeight(2);
				$('.shelf-line .shelf-description').css({height: 'auto'}).setEqualHeight(2);			
			});
	    $(window).on('resize', function(){
	        $('.shelf-line .shelf-label').css({height: 'auto'}).setEqualHeight(2);
					$('.shelf-line .shelf-description').css({height: 'auto'}).setEqualHeight(2);
	    });
	})(jQuery);
</script>

(function($){

"use strict";

$(document).ready(function(){

$('.shelf-line .shelf-label').css({height: 'auto'}).setEqualHeight(2);

$('.shelf-line .shelf-description').css({height: 'auto'}).setEqualHeight(2);

});

$(window).on('resize', function(){

$('.shelf-line .shelf-label').css({height: 'auto'}).setEqualHeight(2);

$('.shelf-line .shelf-description').css({height: 'auto'}).setEqualHeight(2);

});

})(jQuery);

</script>

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 :

(function($){
    "use strict";
      $(window).on('load', function(){ // http://stackoverflow.com/questions/9134918/document-ready-fires-too-early
        $('.shipping-mode-list .tab-wrapper').css({height: 'auto'}).setEqualHeight();
      });

      $(window).on('resize', function(){
        $('.shipping-mode-list .tab-wrapper').css({height: 'auto'}).setEqualHeight();
      });
})(jQuery);

(function($){

"use strict";

$(window).on('load', function(){ // http://stackoverflow.com/questions/9134918/document-ready-fires-too-early

$('.shipping-mode-list .tab-wrapper').css({height: 'auto'}).setEqualHeight();

});

$(window).on('resize', function(){

$('.shipping-mode-list .tab-wrapper').css({height: 'auto'}).setEqualHeight();

});

})(jQuery);

Ancien article…

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

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

// http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
function setEqualHeight(columns) {  
    var tallestcolumn = 0;  
    columns.each(function() { 
        currentHeight = jQuery(this).height();  
        if(currentHeight > tallestcolumn) { tallestcolumn  = currentHeight; }  
    });  

    columns.height(tallestcolumn);  
}  

jQuery(document).ready(function() {  
    setEqualHeight(jQuery("ol.my-list li"));
});

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

function setEqualHeight(columns) {

var tallestcolumn = 0;

columns.each(function() {

currentHeight = jQuery(this).height();

if(currentHeight > tallestcolumn) { tallestcolumn = currentHeight; }

});

columns.height(tallestcolumn);

}

jQuery(document).ready(function() {

setEqualHeight(jQuery("ol.my-list li"));

});

Articles récents

Catégories

Archives

Méta

Étiquette : colonnes

[Foundation 6] Une grille flexbox aux largeurs de colonnes custom avec les mixin flex-grid-size

Une rangée basée sur 8 colonnes

[Bootstrap 3][SASS] Changer la valeur de la variable $grid-columns

Créer une batterie de classes pour une grille 5 colonnes

[Bootstrap 3] Un layout 5 colonnes responsive avec Twitter Bootstrap 3

Ressources en ligne :

Méthode SASS pour 5 colonnes (concept Bootstrap)

Méthode pré-processeur pour 5 colonnes de largeurs égales

SASS

LESS

Méthode alternative pour une palette complète sur 5 colonnes (CSS)

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

Plug-in jQuery

Dans le template HTML

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

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

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

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

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