Étiquette : bootstrap

[Bootstrap 3 et 4] Composant Collapse, la classe collapsed n’apparaît qu’après un premier affichage/masquage des éléments

24/04/2018 / admin

Si toi aussi tu travailles encore avec Bootstrap en 2018 (ou +), tu t’es forcément retrouvé face à ce problème qui existait dans la version 3 de Bootstrap et est toujours présent dans la version 4: la classe collapsed sur le lien ou le bouton qui va permettre d’afficher/masquer des éléments n’apparaît qu’après un premier affichage/masquage de ces dits éléments.

Fais le test sur les exemples qu’on retrouve dans les docs officielles : https://getbootstrap.com/docs/3.3/javascript/#collapse ou https://getbootstrap.com/docs/4.0/components/collapse/.

Il est d’ailleurs étonnant que personne ne leur ait jamais remonté ce bug… Peut-être parce que plus personne n’utilise Bootstrap en 2018 (ou +).

Solution #1

Pour solutionner notre problème, il suffit de mettre un setTimeout javaScript quelque part dans tes sources pour délayer l’ajout dans le DOM de la classe collapsed à l’affichage de la page. Oui: c’est sâle. Oui: c’est une vilaine câle en bois. Non: on n’aurait pas pu mettre la classe dans le code HTML car le code natif Bootstrap te la supprime illico. Oui: tu peux peut-être passer par les events proposés par l’api pour faire ça mieux, mais ça veut dire que tu ne peux pas utiliser les data-attributes pour initier ton collapse.

    <div class="form-group address-extra-info-trigger">
        <span class="control-label">
            <spring:theme code="address.line2"/>
        </span>
        <button id="triggerAddressExtraInfo" class="btn-naked" type="button" data-toggle="collapse" data-target="#collapseAddressExtraInfo" aria-expanded="false" aria-controls="collapseAddressExtraInfo">
            <span class="show-extra-fields">
                <i class="glyphicon glyphicon-chevron-down"></i> <spring:theme code="naos.show"/></span>
            <span class="hide-extra-fields">
                <i class="glyphicon glyphicon-chevron-up"></i> <spring:theme code="naos.hide"/></span>
        </button>
    </div>

    <div class="collapse address-extra-info-fields" id="collapseAddressExtraInfo">
        <p>bla bla bla toto...</p>
    </div>

<spring:theme code="address.line2"/>

</span>

</button>

</div>

</div>

.address-extra-info {
  &-trigger {
    .btn-naked {
      &.collapsed {
        .hide-extra-fields {
          display: none;
        }
      }
      &:not(.collapsed) {
        .show-extra-fields {
          display: none;
        }
      }
    }
  }
}

.address-extra-info {

&-trigger {

.btn-naked {

&.collapsed {

.hide-extra-fields {

display: none;

}

&:not(.collapsed) {

.show-extra-fields {

display: none;

}

  setTimeout(function(){
    $('#triggerAddressExtraInfo').addClass('collapsed');
  }, 500);

setTimeout(function(){

$('#triggerAddressExtraInfo').addClass('collapsed');

}, 500);

Solution #2 (la meilleure)

Il est temps d’abandonner Bootstrap pour Foundation.

[javascript] Construire une modale bootstrap 3 à la volée

09/03/2017 / admin

ACC.ninjaFacetNav = {

    _autoload: [
        ['enquireFacetNav', $('.js-product-facet').length != 0],
    ],

    facetsListElement : $('.js-refinement-facets-list'),
    modalHTML : $('<div class="modal-dialog js-facets" role="document"><div class="modal-content"><div class="modal-header"><h1><strong>Filtrez</strong> <br/>selon vos critères</h1><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body"></div></div></div>'),

    buildModalComponent: function (){
        ACC.ninjaFacetNav.facetsListElement
            .attr({
                tabindex: '-1',
                role: 'dialog',
                'aria-labelledby': 'refinementFacetsList'
            })
            .removeClass('collapse navbar-collapse')
            .addClass('modal fullscreen fade')
            .prepend(ACC.ninjaFacetNav.modalHTML)
            .find('.navbar-nav')
            .prependTo('.js-facets .modal-body');
    },

    destroyModalComponent: function (){
        $('button[data-dismiss="modal"]').click();
        $.each(['tabindex', 'role', 'aria-labelledby'], function(i,modalAttrName){
            ACC.ninjaFacetNav.facetsListElement.removeAttr(modalAttrName);
        });
        ACC.ninjaFacetNav.facetsListElement
            .removeClass('modal fullscreen fade')
            .addClass('collapse navbar-collapse')
            .find('.navbar-nav')
            .prependTo('.navbar-collapse');
        $('div').remove('.modal-dialog.js-facets');
    }

}

ACC.ninjaFacetNav = {

_autoload: [

['enquireFacetNav', $('.js-product-facet').length != 0],

facetsListElement : $('.js-refinement-facets-list'),

modalHTML : $('<div class="modal-dialog js-facets" role="document"><div class="modal-content"><div class="modal-header"><h1><strong>Filtrez</strong> <br/>selon vos critères</h1><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"></div></div></div>'),

buildModalComponent: function (){

ACC.ninjaFacetNav.facetsListElement

.attr({

tabindex: '-1',

role: 'dialog',

'aria-labelledby': 'refinementFacetsList'

})

.removeClass('collapse navbar-collapse')

.addClass('modal fullscreen fade')

.prepend(ACC.ninjaFacetNav.modalHTML)

.find('.navbar-nav')

.prependTo('.js-facets .modal-body');

destroyModalComponent: function (){

$('button[data-dismiss="modal"]').click();

$.each(['tabindex', 'role', 'aria-labelledby'], function(i,modalAttrName){

ACC.ninjaFacetNav.facetsListElement.removeAttr(modalAttrName);

});

ACC.ninjaFacetNav.facetsListElement

.removeClass('modal fullscreen fade')

.addClass('collapse navbar-collapse')

.find('.navbar-nav')

.prependTo('.navbar-collapse');

$('div').remove('.modal-dialog.js-facets');

}

[Magento 1.x] Starter themes

15/02/2017 / admin

Nom	Modules couverts	Technos	Activité sur Github
Webcomm – magento-boilerplate	Modules couverts …	Bootstrap 3.1 Less jQuery Composer Bower Gulp/Grunt	Latest commit 02e09af on 29 Feb 2016 Watch: 77 Star: 545 Fork: 211 Commits: 285 Branches: 2 Releases: 21 Contributors: 25
Maven E-Commerce – mbootstrap	Modules couverts …	Bootstrap 3.? Sass jQuery Composer Gulp	Latest commit 3c967c2 on 15 Jul 2015 Watch: 21 Star: 101 Fork: 43 Commits: 248 Branches: 2 Releases: 0 Contributors: 5
zeljkoprsa/waterlee-boilerplate	…	Foundation 5.5.2 by ZURB Sass jQuery Gulp Bower	Latest commit 0f71788 on 22 Sep 2016 Watch: 64 Star: 306 Fork: 121 Commits: 411 Branches: 3 Releases: 0 Contributors: 18

Optimiser et synchroniser l’exécution de media queries CSS et JS avec Sync MQ

15/09/2016 / admin

Alternative intéressante: @include-media – Simple, elegant and maintainable media queries in Sass. Couplé à include-media-export – An include-media plugin for exporting breakpoints from Sass to JavaScript.

Avant propos : certains des CMS les plus récents du marché proposent nativement des solutions équivalentes à Sync MQ pour gérer et/ou synchroniser l’exécution de media queries CSS et JS. Pour d’évidentes raisons de compréhension et de maintenabilité de votre code source, je vous conseille de vous tourner plutôt vers ces solutions lorsqu’elles existent.

Sync MQ: pour quoi faire?

Qu’on démarre un projet de site internet de zéro ou qu’un client nous demande une nouvelle mouture, à destination des supports mobiles, de son site existant (qui tourne sous une solution qui ne prend pas en charge les concepts de responsive design), la question de la gestion et de l’adaptation de l’affichage sur différents périphériques de navigation (ordinateurs, tablettes, smartphones) se pose rapidement. Si l’utilisation de media queries s’impose immédiatement comme une évidence dans nos feuilles de styles qu’en est-il en revanche de l’exécution, pour un support donné, de code JavaScript? Et existe-t’il un moyen simple de gérer, d’optimiser votre code CSS (ou LESS, ou SASS, ou autre préprocesseur…) et JS et de synchroniser leur exécution ?

C’est pour répondre à cette double problématique qu’intervient Sync MQ dont le concept est :

de simplifier l’écriture et la déclaration de media queries par rapport aux méthodes traditionnelles,
de faciliter la synchronisation de l’exécution de media queries tant au niveau de vos styles que du code JavaScript.

Demo sur JSFiddle.net.

Les sources de Sync MQ que vous trouverez sous GitHub à l’heure ou j’écris ces lignes exploitent des dépendances telles qu’Enquire JS et le composant Grid de Bootstrap 3 parce que c’est celles avec lesquelles j’aime travailler. Mais Sync MQ est avant tout un concept que rien ne vous empêche d’intégrer à vos propres habitudes de travail. Vous pouvez tout-à-fait remplacer Enquire JS par la brique mq de Modernizr ou le composant Grid de Bootstrap 3 par celui proposé par le framework Foundation 4.

De l’art de bien choisir ses points de rupture.

=> Web Stats

Et mon code JavaScript dans tout ça?

Quel intérêt de faire appel à une dépendance telle qu’Enquire JS alors qu’une ligne de code JavaScript suffirait à exécuter du code pour un support donné?

Pour un point de rupture donné (mettons, 800px) et suivant le navigateur utilisé, la méthode $(window).width() de jQuery et les Media Queries CSS3 ne sont pas exécutées systématiquement au même moment.

$(window).resize(function(){
	if ($(window).width() <= 800){	
		// faire quelque chose ici...
	}	
});

$(window).resize(function(){

if ($(window).width() <= 800){

// faire quelque chose ici...

}

});

A Code Example of the Difference Between jQuery Window Width and CSS Media Query width measurements.

Dans cet exemple, l’auteur démontre que […].

_sync-mq.scss

On commence par créer des variables aux libellés parlants pour remplacer le code (moins digeste) traditionnellement utilisé en CSS pour la déclaration de media queries.

$bpMobile: "(max-width: #{$screen-sm-max})";
$bpSmartphone: "(max-width: #{$screen-xs-max})";
$bpTablet: "(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})";
$bpTabletUp: "(min-width: #{$screen-sm-min})";
$bpDesktop: "(min-width: #{$screen-md-min})";
$bpSmallDesktop: "(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})";
$bpLargeDesktop: "(min-width: #{$screen-lg-min})";

$bpMobile: "(max-width: #{$screen-sm-max})";

$bpSmartphone: "(max-width: #{$screen-xs-max})";

$bpTablet: "(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})";

$bpTabletUp: "(min-width: #{$screen-sm-min})";

$bpDesktop: "(min-width: #{$screen-md-min})";

$bpSmallDesktop: "(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})";

$bpLargeDesktop: "(min-width: #{$screen-lg-min})";

Comme décrit plus haut, les points de rupture retenus ne ciblent pas uniquement un ou plusieurs supports donnés (iPhone, iPad, Amstrad CPC) en fonction de leurs résolutions mais :

des ensembles moyens de résolutions rencontrées par périphériques (Smartphone, Tablette, Desktop),
les résolutions que les clients nous demandent le plus souvent de cibler.

Les valeurs affectées à ces variables aux libellés allégés font directement référence à celles des points de rupture définis dans les variables du framework Bootstrap 3 (version SASS).

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;

//== Media queries breakpoints

//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone

//** Deprecated `$screen-xs` as of v3.0.1

$screen-xs: 480px !default;

//** Deprecated `$screen-xs-min` as of v3.2.0

$screen-xs-min: $screen-xs !default;

//** Deprecated `$screen-phone` as of v3.0.1

$screen-phone: $screen-xs-min !default;

// Small screen / tablet

//** Deprecated `$screen-sm` as of v3.0.1

$screen-sm: 768px !default;

$screen-sm-min: $screen-sm !default;

//** Deprecated `$screen-tablet` as of v3.0.1

$screen-tablet: $screen-sm-min !default;

// Medium screen / desktop

//** Deprecated `$screen-md` as of v3.0.1

$screen-md: 992px !default;

$screen-md-min: $screen-md !default;

//** Deprecated `$screen-desktop` as of v3.0.1

$screen-desktop: $screen-md-min !default;

// Large screen / wide desktop

//** Deprecated `$screen-lg` as of v3.0.1

$screen-lg: 1200px !default;

$screen-lg-min: $screen-lg !default;

//** Deprecated `$screen-lg-desktop` as of v3.0.1

$screen-lg-desktop: $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;

Ces mêmes valeurs sont immédiatement ré-exploitées dans Bootstrap pour construire les styles du composant Grid.

Aussi, on retrouvera dans Sync MQ parmi les habituelles Smartphone, Tablette et Desktop, des media queries englobant:

l’ensemble des Mobiles ($bpMobile pour Smartphone et Tablette),
les Tablettes et au-delà ($bpTabletUp),
les petits et larges Desktops séparément ($bpSmallDesktop et $bpLargeDesktop).

Pour cibler par exemple les résolutions à partir des tablettes et au-delà, au lieu d’écrire:

@media (min-width: #{$screen-sm-min}) { body{ border: 10px solid tomato; } }

1	@media (min-width: #{$screen-sm-min}) { body{ border: 10px solid tomato; } }

J’écris désormais:

@media #{$bpTabletUp} { body{ border: 10px solid tomato; } }

1	@media #{$bpTabletUp} { body{ border: 10px solid tomato; } }

Quelques astuces d’utilisation:

Lorsque vous choisissez un plug-in JS amené à être exécuté en fonction d’un point de rupture, veillez à ce qu’il possède une méthode .destroy() et/ou .reload(). C’est le cas, par exemple, du carousel BxSlider. La présence de ce type d’options vous dispensera de nettoyer vous-même un DOM modifié par l’exécution d’un plug-in lorsque vous souhaiterez en annuler les effets pour une vue donnée.
Trois résolutions sont en réalité disponibles pour Amstrad CPC: 160×200 pixels avec 16 couleurs, 320×200 pixels avec 4 couleurs, et 640×200 pixels avec 2 couleurs. De quoi rentabiliser immédiatement l’utilisation de Sync MQ.

Un peu de documentation:

enquire JS
Bootsrap 3 Grid component mediaqueries
Bootstrap SASS variables
Defining Breakpoints sur Open Web
Where And How To Set Breakpoints In Media Queries
Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width – jQuery $(window).width() and CSS3 Media Queries do not always match.
Abnormal media query handling in Fire Fox

HTML

<p><a href="http://getbootstrap.com/css/#grid">Bootstrap 3 grid component documentation</a></p>

<h2>CSS mediaqueries :</h2>
<div class="css-mediaqueries">
  <p class="bp bpMobile">bpMobile</p>
  <p class="bp bpSmartphone">bpSmartphone</p>
  <p class="bp bpTablet">bpTablet</p>
  <p class="bp bpTabletUp">bpTabletUp (Tablet + up)</p>
  <p class="bp bpDesktop">bpDesktop</p>
  <p class="bp bpSmallDesktop">bpSmallDesktop</p>
  <p class="bp bpLargeDesktop">bpLargeDesktop</p>
</div>

<h2>JS mediaqueries :</h2>
<div class="js-mediaqueries">
  <p class="bp js-bpMobile">bpMobile</p>
  <p class="bp js-bpSmartphone">bpSmartphone</p>
  <p class="bp js-bpTablet">bpTablet</p>
  <p class="bp js-bpTabletUp">bpTabletUp (Tablet + up)</p>
  <p class="bp js-bpDesktop">bpDesktop</p>
  <p class="bp js-bpSmallDesktop">bpSmallDesktop</p>
  <p class="bp js-bpLargeDesktop">bpLargeDesktop</p>
</div>

<p><a href="http://getbootstrap.com/css/#grid">Bootstrap 3 grid component documentation</a></p>

<h2>CSS mediaqueries :</h2>

<p class="bp bpMobile">bpMobile</p>

<p class="bp bpSmartphone">bpSmartphone</p>

<p class="bp bpTablet">bpTablet</p>

<p class="bp bpTabletUp">bpTabletUp (Tablet + up)</p>

<p class="bp bpDesktop">bpDesktop</p>

<p class="bp bpSmallDesktop">bpSmallDesktop</p>

<p class="bp bpLargeDesktop">bpLargeDesktop</p>

</div>

<h2>JS mediaqueries :</h2>

<p class="bp js-bpMobile">bpMobile</p>

<p class="bp js-bpSmartphone">bpSmartphone</p>

<p class="bp js-bpTablet">bpTablet</p>

<p class="bp js-bpTabletUp">bpTabletUp (Tablet + up)</p>

<p class="bp js-bpDesktop">bpDesktop</p>

<p class="bp js-bpSmallDesktop">bpSmallDesktop</p>

<p class="bp js-bpLargeDesktop">bpLargeDesktop</p>

</div>

CSS (SASS)

// from: https://github.com/twbs/bootstrap-sass/blob/3.3-stable/assets/stylesheets/bootstrap/_variables.scss#L286

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;

// Breakpoints aliases
$bpSmartphone: "(max-width: #{$screen-xs-max})";
$bpTablet: "(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})";
$bpSmallDesktop: "(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})";
$bpLargeDesktop: "(min-width: #{$screen-lg-min})";

$bpMobile: "(max-width: #{$screen-sm-max})";
$bpTabletUp: "(min-width: #{$screen-sm-min})";
$bpDesktop: "(min-width: #{$screen-md-min})";


// See it in action :
.css-mediaqueries .bp{
  display: none;
}

@media #{$bpMobile} {
  .bp.bpMobile{
    display: block;
  }
}

@media #{$bpSmartphone} {
  .bp.bpSmartphone{
    display: block;
  }
}

@media #{$bpTablet} {
  .bp.bpTablet{
    display: block;
  }
}

@media #{$bpTabletUp} {
  .bp.bpTabletUp{
    display: block;
  }
}

@media #{$bpDesktop} {
  .bp.bpDesktop{
    display: block;
  }
}

@media #{$bpSmallDesktop} {
  .bp.bpSmallDesktop{
    display: block;
  }
}

@media #{$bpLargeDesktop} {
  .bp.bpLargeDesktop{
    display: block;
  }
}

// from: https://github.com/twbs/bootstrap-sass/blob/3.3-stable/assets/stylesheets/bootstrap/_variables.scss#L286

//== Media queries breakpoints

//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone

//** Deprecated `$screen-xs` as of v3.0.1

$screen-xs: 480px !default;

//** Deprecated `$screen-xs-min` as of v3.2.0

$screen-xs-min: $screen-xs !default;

//** Deprecated `$screen-phone` as of v3.0.1

$screen-phone: $screen-xs-min !default;

// Small screen / tablet

//** Deprecated `$screen-sm` as of v3.0.1

$screen-sm: 768px !default;

$screen-sm-min: $screen-sm !default;

//** Deprecated `$screen-tablet` as of v3.0.1

$screen-tablet: $screen-sm-min !default;

// Medium screen / desktop

//** Deprecated `$screen-md` as of v3.0.1

$screen-md: 992px !default;

$screen-md-min: $screen-md !default;

//** Deprecated `$screen-desktop` as of v3.0.1

$screen-desktop: $screen-md-min !default;

// Large screen / wide desktop

//** Deprecated `$screen-lg` as of v3.0.1

$screen-lg: 1200px !default;

$screen-lg-min: $screen-lg !default;

//** Deprecated `$screen-lg-desktop` as of v3.0.1

$screen-lg-desktop: $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;

// Breakpoints aliases

$bpSmartphone: "(max-width: #{$screen-xs-max})";

$bpTablet: "(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})";

$bpSmallDesktop: "(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})";

$bpLargeDesktop: "(min-width: #{$screen-lg-min})";

$bpMobile: "(max-width: #{$screen-sm-max})";

$bpTabletUp: "(min-width: #{$screen-sm-min})";

$bpDesktop: "(min-width: #{$screen-md-min})";

// See it in action :

.css-mediaqueries .bp{

display: none;

}

@media #{$bpMobile} {

.bp.bpMobile{

display: block;

}

@media #{$bpSmartphone} {

.bp.bpSmartphone{

display: block;

}

@media #{$bpTablet} {

.bp.bpTablet{

display: block;

}

@media #{$bpTabletUp} {

.bp.bpTabletUp{

display: block;

}

@media #{$bpDesktop} {

.bp.bpDesktop{

display: block;

}

@media #{$bpSmallDesktop} {

.bp.bpSmallDesktop{

display: block;

}

@media #{$bpLargeDesktop} {

.bp.bpLargeDesktop{

display: block;

}

JS (enquire, jQuery)

// enquire JS documentation : http://wicky.nillia.ms/enquire.js/

// breakpoints global vars
	// bootstrap grid breakpoints values
  // from: https://github.com/twbs/bootstrap-sass/blob/3.3-stable/assets/stylesheets/bootstrap/_variables.scss#L286
	var bs_screen_xs_min = '480';
			bs_screen_sm_min = '768';
			bs_screen_md_min = '992';
			bs_screen_lg_min = '1200';
			bs_screen_xs_max = bs_screen_sm_min - 1;
			bs_screen_sm_max = bs_screen_md_min - 1;
			bs_screen_md_max = bs_screen_lg_min - 1;

  // enquire JS breakpoints aliases
  // (as seen on Bootstrap documentation: http://getbootstrap.com/css/#grid-media-queries)
			bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';
			bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';
			bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)';
			bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)';

			bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)';
			bpTabletUp = 'screen and (min-width: '+ bs_screen_sm_min +'px)';
			bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';


function resetJSDOM(){
	$('.js-mediaqueries p.bp').hide();
} 
resetJSDOM();

// enquire JS
enquire.register(bpMobile, {
  match : function() {
    // console.log('bpMobile');
		$('p.bp.js-bpMobile').show();
	},
  unmatch : function() {
  	$('p.bp.js-bpMobile').hide();
  }
});

enquire.register(bpSmartphone, {
  match : function() {
    // console.log('bpSmartphone');   
    $('p.bp.js-bpSmartphone').show();
  },
  unmatch : function() {
  	$('p.bp.js-bpSmartphone').hide();
  }
});

enquire.register(bpTablet, {
  match : function() {
    // console.log('bpTablet');    
    $('p.bp.js-bpTablet').show();
  },
  unmatch : function() {
  	$('p.bp.js-bpTablet').hide();
  }
});

enquire.register(bpTabletUp, {
  match : function() {
    // console.log('bpTabletUp');
    $('p.bp.js-bpTabletUp').show();    
  },
  unmatch : function() {
  	$('p.bp.js-bpTabletUp').hide();
  }
});

enquire.register(bpDesktop, {
  match : function() {  
    // console.log('bpDesktop');
    $('p.bp.js-bpDesktop').show();    
  },
  unmatch : function() {
  	$('p.bp.js-bpDesktop').hide();
  }
});

enquire.register(bpSmallDesktop, {
  match : function() { 
    // console.log('bpSmallDesktop');
    $('p.bp.js-bpSmallDesktop').show();    
  },
  unmatch : function() {
  	$('p.bp.js-bpSmallDesktop').hide();
  }
});

enquire.register(bpLargeDesktop, {
  match : function() {
    // console.log('bpLargeDesktop');
    $('p.bp.js-bpLargeDesktop').show();    
  },
  unmatch : function() {
  	$('p.bp.js-bpLargeDesktop').hide(); 
  }
});

100

// enquire JS documentation : http://wicky.nillia.ms/enquire.js/

// breakpoints global vars

// bootstrap grid breakpoints values

// from: https://github.com/twbs/bootstrap-sass/blob/3.3-stable/assets/stylesheets/bootstrap/_variables.scss#L286

var bs_screen_xs_min = '480';

bs_screen_sm_min = '768';

bs_screen_md_min = '992';

bs_screen_lg_min = '1200';

bs_screen_xs_max = bs_screen_sm_min - 1;

bs_screen_sm_max = bs_screen_md_min - 1;

bs_screen_md_max = bs_screen_lg_min - 1;

// enquire JS breakpoints aliases

// (as seen on Bootstrap documentation: http://getbootstrap.com/css/#grid-media-queries)

bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';

bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';

bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)';

bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)';

bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)';

bpTabletUp = 'screen and (min-width: '+ bs_screen_sm_min +'px)';

bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';

function resetJSDOM(){

$('.js-mediaqueries p.bp').hide();

}

resetJSDOM();

// enquire JS

enquire.register(bpMobile, {

match : function() {

// console.log('bpMobile');

$('p.bp.js-bpMobile').show();

unmatch : function() {

$('p.bp.js-bpMobile').hide();

}

});

enquire.register(bpSmartphone, {

match : function() {

// console.log('bpSmartphone');

$('p.bp.js-bpSmartphone').show();

unmatch : function() {

$('p.bp.js-bpSmartphone').hide();

}

});

enquire.register(bpTablet, {

match : function() {

// console.log('bpTablet');

$('p.bp.js-bpTablet').show();

unmatch : function() {

$('p.bp.js-bpTablet').hide();

}

});

enquire.register(bpTabletUp, {

match : function() {

// console.log('bpTabletUp');

$('p.bp.js-bpTabletUp').show();

unmatch : function() {

$('p.bp.js-bpTabletUp').hide();

}

});

enquire.register(bpDesktop, {

match : function() {

// console.log('bpDesktop');

$('p.bp.js-bpDesktop').show();

unmatch : function() {

$('p.bp.js-bpDesktop').hide();

}

});

enquire.register(bpSmallDesktop, {

match : function() {

// console.log('bpSmallDesktop');

$('p.bp.js-bpSmallDesktop').show();

unmatch : function() {

$('p.bp.js-bpSmallDesktop').hide();

}

});

enquire.register(bpLargeDesktop, {

match : function() {

// console.log('bpLargeDesktop');

$('p.bp.js-bpLargeDesktop').show();

unmatch : function() {

$('p.bp.js-bpLargeDesktop').hide();

}

});

[Bootstrap] Annuler les effets du composant Affix pour une vue donnée

01/09/2016 / admin

Source : How can I disable Bootstrap’s “affix” on smaller screens?.

Code HTML à mettre en place, toutes vues confondues :

<div class="js-facet-filter-bar" data-spy="affix" data-offset-top="60" data-offset-bottom="200">

1	<div class="js-facet-filter-bar" data-spy="affix" data-offset-top="60" data-offset-bottom="200">

…combiné aux déclarations CSS suivantes :

// Affix activé
@media (min-width: 768px) {
    .affix {
        position: fixed;
    }
}
// Affix désactivé
@media (max-width: 767px) {
    .affix {
        position: static;
    }
}

// Affix activé

@media (min-width: 768px) {

.affix {

position: fixed;

}

// Affix désactivé

@media (max-width: 767px) {

.affix {

position: static;

}

Utiliser les points de rupture du composant grille de Bootstrap 3 pour créer des media-queries JS avec Enquire.js

19/08/2016 / admin

Demo en live sur jsFiddle.net.

Fichier global-vars.js :

// Breakpoints
	// Usage: https://jsfiddle.net/frontenddeveloper/7k5hm834/4/
	// Relative to Bootstrap 3 grid component, see /bootstrap/_variables.scss
	// $screen-xs: 320px;
	// $screen-sm: 768px;
	// $screen-md: 1025px;
	// $screen-lg: 1225px;
	var bs_screen_sm_min = '768'; // tablet starts @768px
		bs_screen_md_min = '1025'; // desktop starts @1025px
		bs_screen_lg_min = '1225'; // large desktop starts @1225px
		bs_screen_xs_max = bs_screen_sm_min - 1; // 767px
		bs_screen_sm_max = bs_screen_md_min - 1; // 1024px
		bs_screen_md_max = bs_screen_lg_min - 1; // 1224px
  
	// enquire JS breakpoints
		bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';
		bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';
		bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)';
		bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)';
		bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)';
		bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';

// Breakpoints

// Usage: https://jsfiddle.net/frontenddeveloper/7k5hm834/4/

// Relative to Bootstrap 3 grid component, see /bootstrap/_variables.scss

// $screen-xs: 320px;

// $screen-sm: 768px;

// $screen-md: 1025px;

// $screen-lg: 1225px;

var bs_screen_sm_min = '768'; // tablet starts @768px

bs_screen_md_min = '1025'; // desktop starts @1025px

bs_screen_lg_min = '1225'; // large desktop starts @1225px

bs_screen_xs_max = bs_screen_sm_min - 1; // 767px

bs_screen_sm_max = bs_screen_md_min - 1; // 1024px

bs_screen_md_max = bs_screen_lg_min - 1; // 1224px

// enquire JS breakpoints

bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';

bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';

bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)';

bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)';

bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)';

bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';

Fichier global-mediaqueries.js :

+ function($){
  'use strict';

  $(document).ready(function(){
    // enquire JS
    enquire.register(bpMobile, {
      match : function() {
       // console.log('bpMobile');
      },
      unmatch : function() {}
    });

    enquire.register(bpSmartphone, {
      match : function() {
        // console.log('bpSmartphone');
      },
      unmatch : function() {}
    });

    enquire.register(bpTablet, {
      match : function() {
        // console.log('bpTablet');
      },
      unmatch : function() {}
    });

    enquire.register(bpDesktop, {
      match : function() {
        // console.log('bpDesktop');
      },
      unmatch : function() {}
    });

    enquire.register(bpSmallDesktop, {
      match : function() {
        // console.log('bpSmallDesktop');
      },
      unmatch : function() {}
    });

    enquire.register(bpLargeDesktop, {
      match : function() {
        // console.log('bpLargeDesktop');
      },
      unmatch : function() {}
    });
  });
  
}(jQuery);

+ function($){

'use strict';

$(document).ready(function(){

// enquire JS

enquire.register(bpMobile, {

match : function() {

// console.log('bpMobile');

unmatch : function() {}

});

enquire.register(bpSmartphone, {

match : function() {

// console.log('bpSmartphone');

unmatch : function() {}

});

enquire.register(bpTablet, {

match : function() {

// console.log('bpTablet');

unmatch : function() {}

});

enquire.register(bpDesktop, {

match : function() {

// console.log('bpDesktop');

unmatch : function() {}

});

enquire.register(bpSmallDesktop, {

match : function() {

// console.log('bpSmallDesktop');

unmatch : function() {}

});

enquire.register(bpLargeDesktop, {

match : function() {

// console.log('bpLargeDesktop');

unmatch : function() {}

});

}(jQuery);

[Bootstrap 3] Ajouter un point de rupture supplémentaire à la grille avec la version SASS de Bootstrap 3

13/07/2016 / admin

Dans notre exemple, nous allons chercher à ajouter un breakpoint col-xl-… pour des résolutions d’écran plus larges que col-lg.
Pour ce faire, il faudra éditer 4 fichiers :

bootstrap/mixins/grid-framework.scss
bootstrap/mixins/grid.scss
bootstrap/variables.scss
bootstrap/grid.scss

Une fois ces ajouts effectués, vous pourrez utiliser toute la batterie de mixins et de classes offerte par la grille Bootstrap pour les breakpoints XS, SM, MD, LG, mais également votre nouveau point de rupture XL !

mixins/grid-framework.scss

Rajouter en début de fichier la classe .col-xl-… dans le mixin make-grid-columns (arguments + boucle for) :

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}";
  }
  #{$list} {
    position: relative;
    // Prevent columns from collapsing when empty
    min-height: 1px;
    // Inner gutter via padding
    padding-left:  ceil(($grid-gutter-width / 2));
    padding-right: floor(($grid-gutter-width / 2));
  }
}


// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-#{$class}-#{$i}";
  }
  #{$list} {
    float: left;
  }
}

// [converter] This is defined recursively in LESS, but Sass supports real loops

@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}") {

@for $i from (1 + 1) through $grid-columns {

$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}";

}

#{$list} {

position: relative;

// Prevent columns from collapsing when empty

min-height: 1px;

// Inner gutter via padding

padding-left: ceil(($grid-gutter-width / 2));

padding-right: floor(($grid-gutter-width / 2));

}

// [converter] This is defined recursively in LESS, but Sass supports real loops

@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {

@for $i from (1 + 1) through $grid-columns {

$list: "#{$list}, .col-#{$class}-#{$i}";

}

#{$list} {

float: left;

}

mixins/grid.scss

Rajouter en fin de fichier les mixins make-xl-column, make-xl-column-offset, make-xl-column-push, make-xl-column-pull (vous pouvez vous inspirer de la batterie de mixins déjà présente pour make-lg-…) :

// Generate the extra large columns
@mixin make-xl-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);

  @media (min-width: $screen-xl-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
}
@mixin make-xl-column-offset($columns) {
  @media (min-width: $screen-xl-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
}
@mixin make-xl-column-push($columns) {
  @media (min-width: $screen-xl-min) {
    left: percentage(($columns / $grid-columns));
  }
}
@mixin make-xl-column-pull($columns) {
  @media (min-width: $screen-xl-min) {
    right: percentage(($columns / $grid-columns));
  }
}

// Generate the extra large columns

@mixin make-xl-column($columns, $gutter: $grid-gutter-width) {

position: relative;

min-height: 1px;

padding-left: ($gutter / 2);

padding-right: ($gutter / 2);

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

float: left;

width: percentage(($columns / $grid-columns));

}

@mixin make-xl-column-offset($columns) {

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

margin-left: percentage(($columns / $grid-columns));

}

@mixin make-xl-column-push($columns) {

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

left: percentage(($columns / $grid-columns));

}

@mixin make-xl-column-pull($columns) {

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

right: percentage(($columns / $grid-columns));

}

variables.scss

Rajouter les Media queries breakpoints pour Extra Large screen / wide desktop :

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra Large screen / wide desktop
//** Deprecated `$screen-xl` as of v3.0.1
$screen-xl:                  1600px !default;
$screen-xl-min:              $screen-xl !default;
//** Deprecated `$screen-xl-desktop` as of v3.0.1
$screen-xl-desktop:          $screen-xl-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-lg-max:              ($screen-xl-min - 1) !default;

//== Media queries breakpoints

//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra Large screen / wide desktop

//** Deprecated `$screen-xl` as of v3.0.1

$screen-xl: 1600px !default;

$screen-xl-min: $screen-xl !default;

//** Deprecated `$screen-xl-desktop` as of v3.0.1

$screen-xl-desktop: $screen-xl-min !default;

// So media queries don't overlap when required, provide a maximum

$screen-lg-max: ($screen-xl-min - 1) !default;

Rajouter les Container sizes :

//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

// Extra Large screen / wide desktop
$container-extralarge-desktop:      (1600px) !default;
//** For `$screen-lg-min` and up.
$container-xl:                 $container-extralarge-desktop !default;

//== Container sizes

//## Define the maximum width of `.container` for different screen sizes.

// Extra Large screen / wide desktop

$container-extralarge-desktop: (1600px) !default;

//** For `$screen-lg-min` and up.

$container-xl: $container-extralarge-desktop !default;

grid.scss

Rajouter un Container widths pour le breakpoint xl :

// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

.container {
  @media (min-width: $screen-xl-min) {
    width: $container-xl;
  }  
}

// Container widths

// Set the container width, and override it for fixed navbars in media queries.

.container {

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

width: $container-xl;

}

En toute fin de fichier, rajouter un Extra Large grid :

// Extra Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: $screen-xl-min) {
  @include make-grid(xl);
}

// Extra Large grid

// Columns, offsets, pushes, and pulls for the large desktop device range.

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

@include make-grid(xl);

}

[jQuery][Bootstrap 3][Collapse][enquire.js] En vue Mobile, dans un menu, désactiver la redirection vers la page cible au clic sur un lien de premier niveau avec les data-attributes et jQuery.

16/12/2015 / admin

Attention : dans le code donné en exemple, vous trouverez dans certains cas des mentions à des variables de type ${repeat/entry/index}. Ce type de variables est utilisé dans le CMS RBS Change (versions 3.x). A moins que vous ne souhaitiez mettre à profit ce code au sein d’un menu Change, il ne faudra pas tenir compte de ces variables et, le cas échéant, les supprimer ou les remplacer par des variables qui fonctionnent dans le CMS que vous utilisez.

Problème : une navigation en vue Desktop, même sous forme de menu déroulant ou géant, laisse parfois la possibilité d’accéder à des pages en cliquant sur les entrées de premier niveau. Typiquement, lorsque cette même navigation est affichée en vue Mobile, l’activation de ces mêmes entrées de premier niveau doit ouvrir un second niveau et pas rediriger vers des pages (sinon la navigation Mobile ne permettra jamais d’atteindre les sous-niveaux).

Solution (avec le composant Collapse de Bootstrap 3 et enquire.js) :

Nous allons tout d’abord nous assurer que les différents classes, IDs et data-attributs nécessaires au fonctionnement du composant Collapse sont en place sur les éléments impliqués.

Sur le lien qui active la partie masquée à afficher :

class= »link collapsed »
role= »button »
data-toggle= »collapse »
href= »${descendantUrl} »
aria-expanded= »false »
aria-controls= »collapseShelfSubMenuLevel2${repeat/entry/index} »

Attention : en plus des attributs requis nativement par le composant Collapse, nous allons rajouter deux attributs data-mobile-target et data-desktop-target dont les valeurs correspondent respectivement à l’ID de l’élément masqué à activer et à l’URL de la page sur laquelle l’utilisateur sera redirigé à l’activation du lien.

data-mobile-target= »collapseShelfSubMenuLevel2${repeat/entry/index} »
data-desktop-target= »${descendantUrl} »

Exemple finalisé :

<a tal:condition="descendantUrl"
  class="link collapsed"
  role="button"
  data-toggle="collapse"
  data-mobile-target="collapseShelfSubMenuLevel2${repeat/entry/index}"
  data-desktop-target="${descendantUrl}"
  href="${descendantUrl}"
  aria-expanded="false"
  aria-controls="collapseShelfSubMenuLevel2${repeat/entry/index}">${entry/getLabelAsHtml}</a>

<a tal:condition="descendantUrl"

class="link collapsed"

role="button"

data-toggle="collapse"

data-mobile-target="collapseShelfSubMenuLevel2${repeat/entry/index}"

data-desktop-target="${descendantUrl}"

href="${descendantUrl}"

aria-expanded="false"

aria-controls="collapseShelfSubMenuLevel2${repeat/entry/index}">${entry/getLabelAsHtml}</a>

Sur l’élément à afficher/masquer :

class= »level${parent/getChildrenLevel} collapse »
id= »collapseShelfSubMenuLevel2${repeat/entry/index} »

Exemple finalisé :

<ul class="level${parent/getChildrenLevel} collapse"
  tal:define="columns php:array_chunk(children, columnItemsLimit)"
  tal:repeat="column columns"
  id="collapseShelfSubMenuLevel2${repeat/entry/index}">

<ul class="level${parent/getChildrenLevel} collapse"

tal:define="columns php:array_chunk(children, columnItemsLimit)"

tal:repeat="column columns"

id="collapseShelfSubMenuLevel2${repeat/entry/index}">

La partie jQuery (en utilisant enquire.js pour simuler des media-queries en JS – très pratique) :

La méthode enquire.register définit que le code qui se trouvera dans match sera exécuté dans le cadre du breakpoint énoncé. Hors breakpoint, c’est le code qui se trouve dans unmatch qui est exécuté.

Les deux attributs data-mobile-target et data-desktop-target ajoutés plus haut dans notre template vont nous servir à switcher les valeurs des attributs href des liens des entrées de premier niveau.

Lorsque le viewport utilisé est dans le scope des 767px minimum (vue Mobile), au clic sur une entrée de premier niveau la redirection vers la page ne s’effectue pas. On affiche les entrées de second niveau à la place.

Lorsque le viewport utilisé est hors scope (768px ou plus, vue Desktop), au clic sur une entrée de premier niveau la redirection vers la page s’effectue. Les entrées de second niveau (sous-menu déroulant ou géant) doivent s’afficher au survol (à vous de gérer ça).

Exemple finalisé de notre code jQuery :

(function($){
  $(document).ready(function(){
    enquire.register("screen and (max-width: 767px)", {
      match : function() {
        $('.main-menu > .level1 > li > a').on('click', function(e){
          $(this).attr('href', '#' + $(this).attr('data-mobile-target'));
        });
      },
      unmatch : function() {
        $('.main-menu > .level1 > li > a').each(function(e){
          $(this).attr('href', $(this).attr('data-desktop-target'));
        });
      }
    });
  });
})(jQuery);

(function($){

$(document).ready(function(){

enquire.register("screen and (max-width: 767px)", {

match : function() {

$('.main-menu > .level1 > li > a').on('click', function(e){

$(this).attr('href', '#' + $(this).attr('data-mobile-target'));

});

unmatch : function() {

$('.main-menu > .level1 > li > a').each(function(e){

$(this).attr('href', $(this).attr('data-desktop-target'));

});

}

});

})(jQuery);

Pour finir – Markup purement HTML (rendu dans le navigateur) :

Vue Mobile, second niveau fermé :

<div class="main-menu">
  <ul class="level1">
    <li>
      <a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="#collapseShelfSubMenuLevel20" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a>
      <ul id="collapseShelfSubMenuLevel20" class="level2 collapse" aria-expanded="false" style="height: 0px;">

<li>

<a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="#collapseShelfSubMenuLevel20" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a>

Vue Desktop, second niveau fermé :

<div class="main-menu">
  <ul class="level1">
    <li class=" store-menu no-highlight">
      <a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="http://mon-site.fr/fr/bijoux/par-famille" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a>
      <ul id="collapseShelfSubMenuLevel20" class="level2 collapse">

<a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="http://mon-site.fr/fr/bijoux/par-famille" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a>

On note l’action de notre petit script jQuery par la différence de la valeur affichée par l’attribut href de notre élément <a class="link collapsed"></a>. En vue Mobile, c’est la valeur du data-attribut data-mobile-target="collapseShelfSubMenuLevel20" qui est active. En vue Desktop, celle de data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille".

[CSS] [jQuery] Une liste responsive d’éléments avec visuels de dimensions différentes alignés horizontalement et verticalement dans les cadres dans lesquels ils s’inscrivent

23/11/2015 / admin

Une version qui gère l’alignement vertical des images responsives (fluides) en pure CSS

Sources : Bootstrap vertical align responsive images example code, (mon jsFiddle) [Pure CSS attempt] Responsive product list (w/responsive images).

/* CSS used here will be applied after bootstrap.css */
.thumbnail_container {
     position: relative;
     width: 100%;
     padding-bottom: 100%;
  margin-bottom:20px;
}

.thumbnail {
    position:absolute;
    width:100%;
    height:100%;
}
.thumbnail img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

img{
    max-height:100%;
    max-width:100%;
}

/* CSS used here will be applied after bootstrap.css */

.thumbnail_container {

position: relative;

width: 100%;

padding-bottom: 100%;

margin-bottom:20px;

}

.thumbnail {

position:absolute;

width:100%;

height:100%;

}

.thumbnail img {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

}

img{

max-height:100%;

max-width:100%;

}

<div class="container-fluid">
<div class="row">
  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/400x600">
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="http://placehold.it/600x600">
      </div>
    </div>  
  </div>
  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/600x400">
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="no-photo">
      </div>
    </div>  
  </div>
  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/400x600">
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="http://placehold.it/600x600">
      </div>
    </div>  
  </div>
  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/600x400">
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="no-photo">
      </div>
    </div>  
  </div>
</div>
</div>
<div id="push"></div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Une version un peu moins légère qui gère l’alignement vertical des images responsives (fluides) avec jQuery

Un code source à peu près fonctionnel est disponible ici, mais ne se lancera pas au 1er chargement de la page. Il faudra relancer le code en cliquant sur Run.
Cependant, le bout de script suivant a été mis en place avec succès dans un projet Change (v3.6.8) :

L’ajout de $(window).on('load', function(){ ... }); permet aux visuels de s’afficher dans la page avant de lancer le script (car il a besoin de connaître leurs dimensions pour effectuer ses calculs d’alignement).

<script change:javascript="head 'themes.husson.js.equalheight'"></script>

<script type="text/javascript">
	(function($){
	    "use strict";
			$(document).ready(function(){
				$(window).on('load', function(){ // http://stackoverflow.com/questions/9134918/document-ready-fires-too-early
					// http://devfrontend.info/colonnes-de-meme-hauteur/
					$('.product-visual').css({height: 'auto'}).setEqualHeight();
					$('.product-label').css({height: 'auto'}).setEqualHeight();
					//$('.product-visual').css('height', '100%');

					// http://jsfiddle.net/frontenddeveloper/d25oer58/14/
					var getContainerHeight, getImageHeight, resizeTimer;
					function vAlignImage(){
					    var getContainerHeight = $('.product-visual').height();
					    $('.product-visual img').each(function(){
					        var getImageHeight = $(this).height();
					        $(this).css('padding-top', ((getContainerHeight / 2) - (getImageHeight / 2)));
					    });
					}
					vAlignImage();
				});

				$(window).on('resize', function(e){
					// http://devfrontend.info/colonnes-de-meme-hauteur/
					$('.product-visual').css({height: 'auto'}).setEqualHeight();
		      $('.product-label').css({height: 'auto'}).setEqualHeight();

					// http://jsfiddle.net/frontenddeveloper/d25oer58/14/
					clearTimeout(resizeTimer);
				  resizeTimer = setTimeout(function() {
				 		vAlignImage();
				  });
		    });
			});
	})(jQuery);

</script>

(function($){

"use strict";

$(document).ready(function(){

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

// http://devfrontend.info/colonnes-de-meme-hauteur/

$('.product-visual').css({height: 'auto'}).setEqualHeight();

$('.product-label').css({height: 'auto'}).setEqualHeight();

//$('.product-visual').css('height', '100%');

// http://jsfiddle.net/frontenddeveloper/d25oer58/14/

var getContainerHeight, getImageHeight, resizeTimer;

function vAlignImage(){

var getContainerHeight = $('.product-visual').height();

$('.product-visual img').each(function(){

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

$(this).css('padding-top', ((getContainerHeight / 2) - (getImageHeight / 2)));

});

}

vAlignImage();

});

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

// http://devfrontend.info/colonnes-de-meme-hauteur/

$('.product-visual').css({height: 'auto'}).setEqualHeight();

$('.product-label').css({height: 'auto'}).setEqualHeight();

// http://jsfiddle.net/frontenddeveloper/d25oer58/14/

clearTimeout(resizeTimer);

resizeTimer = setTimeout(function() {

vAlignImage();

});

})(jQuery);

</script>

Articles récents

Catégories

Archives

Méta

Étiquette : bootstrap

[Bootstrap 3 et 4] Composant Collapse, la classe collapsed n’apparaît qu’après un premier affichage/masquage des éléments

Solution #1

Solution #2 (la meilleure)

[Magento 1.x] Starter themes

Optimiser et synchroniser l’exécution de media queries CSS et JS avec Sync MQ

Sync MQ: pour quoi faire?

De l’art de bien choisir ses points de rupture.

Et mon code JavaScript dans tout ça?

Quelques astuces d’utilisation:

HTML

CSS (SASS)

JS (enquire, jQuery)

[Bootstrap] Annuler les effets du composant Affix pour une vue donnée

Utiliser les points de rupture du composant grille de Bootstrap 3 pour créer des media-queries JS avec Enquire.js

[Bootstrap 3] Ajouter un point de rupture supplémentaire à la grille avec la version SASS de Bootstrap 3

mixins/grid-framework.scss

mixins/grid.scss

variables.scss

grid.scss

[jQuery][Bootstrap 3][Collapse][enquire.js] En vue Mobile, dans un menu, désactiver la redirection vers la page cible au clic sur un lien de premier niveau avec les data-attributes et jQuery.

Solution (avec le composant Collapse de Bootstrap 3 et enquire.js) :

Sur le lien qui active la partie masquée à afficher :

Sur l’élément à afficher/masquer :

La partie jQuery (en utilisant enquire.js pour simuler des media-queries en JS – très pratique) :

Pour finir – Markup purement HTML (rendu dans le navigateur) :

[CSS] [jQuery] Une liste responsive d’éléments avec visuels de dimensions différentes alignés horizontalement et verticalement dans les cadres dans lesquels ils s’inscrivent

Une version qui gère l’alignement vertical des images responsives (fluides) en pure CSS

Une version un peu moins légère qui gère l’alignement vertical des images responsives (fluides) avec jQuery