septembre 2014 – devfrontend.info

[CSS][jQuery] Un menu déroulant fondé sur flexbox (modèle tabulaire en fallback IE9-) et un sous-niveau centré horizontalement avec outerWidth

18/09/2014 / admin

Avant de mettre en place cette solution, voir en bas de page les contraintes et choses restant à améliorer !!

Simulation : Menu déroulant Flexbox.

Pré-requis :

Le premier niveau doit occuper 100% de l’espace disponible en largeur,
les libellés de premier niveau ne doivent pas occuper un espace à largeur fixe (chaque libellé à une largeur en fonction de sa longueur),
les espaces entre les libellés de premier niveau doivent être strictement identiques,
les sous-niveau doivent être centrés horizontalement sur l’axe médian libellé de premier niveau > sous-niveau,
compatibilité navigateurs avec prise en charge ciblée des différents états de la spécification de Flexbox (ancienne et nouvelle) et fallback IE10-.

Quelques aspects techniques :

[CSS|Flexbox] Les écarts gauche/droite entre chaque entrées sont distribués de façon homogène, grâce à flexbox.
[jQuery] Chrome qui semble ne pas interpréter correctement la présence de paddings dans le sous menu lorsqu’on utilise la propriété outerWidth de jQuery pour calculer le positionnement centré horizontalement du sous menu par rapport à son entrée parente.

Edit: ajout d’un span.medial-axis-alignment pour englober les libellés de 1er niveau sans les marges et calculer en jQuery le positionnement des sous-niveaux par rapport à l’axe médiant.
~~[CSS] position: relative; qui n’est pas bien gérée sous Firefox avec display: table; et display: table-cell;.~~ Edit: le menu est passé d’une structure fondée sur le modèle tabulaire à une structure fondée sur flexbox. Le modèle tabulaire reste proposé en guise de fallback pour les navigateurs IE9-.

Remarques importantes pour la compatibilité cross-browsers :

Pour effectuer le switch entre vieille et nouvelle spécification Flexbox, les styles ont été déclarés dans l’ordre suivant :

1. les propriétés propres à l’ancienne spécification avec les préfixes -webkit, -moz, -o, et sans préfixe :

/* Old 2009 version support */
/* Firefox 27-, Chrome 20-, Safari 6- */
.primary-nav .level1{
  display: -webkit-box;
  display: -moz-box;
  display: -o-box;
  display: box;
}

.primary-nav .level1 li{
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
}

/* Old 2009 version support */

/* Firefox 27-, Chrome 20-, Safari 6- */

.primary-nav .level1{

display: -webkit-box;

display: -moz-box;

display: -o-box;

display: box;

}

.primary-nav .level1 li{

-webkit-box-flex: 1;

-moz-box-flex: 1;

-o-box-flex: 1;

box-flex: 1;

}

2. les propriétés propres à la nouvelle spécification avec un suffixe !important.

/* Current specification */ .primary-nav .level1{ display: flex !important; } .primary-nav .level1 li{ flex-grow: 1 !important; }

1
2
3
4
5
6
7
8

/* Current specification */
.primary-nav .level1{
display: flex !important;
}

.primary-nav .level1 li{
flex-grow: 1 !important;
}

Ciblage CSS IE9, IE8 obtenu avec la mise en place de commentaires conditionnels dans la balise head de la page et de classes .ie8, .ie9 dans la CSS :

<!--[if IE 8 ]>
  <html lang="fr" class="ie8">
<![endif]-->

<!--[if IE 9 ]>
  <html lang="fr" class="ie9">
<![endif]-->

<!--[if IE 8 ]>

<![endif]-->

<!--[if IE 9 ]>

<![endif]-->

.ie8 .primary-nav .level1,
.ie9 .primary-nav .level1{
  display: table;
}

.ie8 .primary-nav .level1 li,
.ie9 .primary-nav .level1 li{
  display: table-cell;
}

.ie8 .primary-nav .level1,

.ie9 .primary-nav .level1{

display: table;

}

.ie8 .primary-nav .level1 li,

.ie9 .primary-nav .level1 li{

display: table-cell;

}

Ciblage CSS IE10 obtenu avec la mise en place de la méthode décrite ici : IE 10 Specific Styles.

/* Deux lignes de javascript pour ajouter le User Agent à l'élément <HTML> */
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

/* Deux lignes de javascript pour ajouter le User Agent à l'élément <HTML> */

var doc = document.documentElement;

doc.setAttribute('data-useragent', navigator.userAgent);

/* Styler à partir du User Agent */
html[data-useragent*='MSIE 10.0'] h1 {
  color: blue;
}

/* Styler à partir du User Agent */

html[data-useragent*='MSIE 10.0'] h1 {

color: blue;

}

Code jQuery à exécuter pour centrer les sous-menu par rapport aux largeurs des premiers niveaux

jQuery('.primary-nav .level2').each(function() {
    var nav_sub_item_width = 220; /* if you modify this value, remember to modify it in 'navigation.css' too */
    var nav_primary_item_width = jQuery(this).closest('.medial-axis-alignment').outerWidth();
    var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2) + 12;
    //var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2); /* remove padding value in some cases */

    jQuery(this).css('margin-left', -wanted_value);
});

jQuery('.primary-nav .level2').each(function() {

var nav_sub_item_width = 220; /* if you modify this value, remember to modify it in 'navigation.css' too */

var nav_primary_item_width = jQuery(this).closest('.medial-axis-alignment').outerWidth();

var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2) + 12;

//var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2); /* remove padding value in some cases */

jQuery(this).css('margin-left', -wanted_value);

});

Cas particuliers et adaptation de code à apporter :

Dans le cas où les sous-menus ne sont pas correctement centrés par rapport à l’axe médian, lancer le bout de code jQuery seulement après que la page se soit entièrement chargée :

$(window).bind("load", function() {
   // code here
});

$(window).bind("load", function() {

// code here

});

…ou mieux (sans le bind) :

jQuery(window).load(function() {
  // code here
});

jQuery(window).load(function() {

// code here

});

Remarque à propos de la gestion des paddings par jQuery (notamment sous Chrome) : pour une raison obscure, la valeur du padding (+ 12 dans le calcul de la valeur servant à aligner le sous-menu sur l’axe médian du libellé de premier niveau) concourt à obtenir un alignement correct dans la simulation effectuée par le biais de JSFiddle, mais il a fallu la supprimer dans un autre cas de figure rencontré…

var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2) + 12;

1	var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2) + 12;

Décalage du sous-menu sous Chrome – appliquer la solution ci dessous :

.primary-nav .level1 li:hover .level2{
  left: -12px; /* IN SOME CASES - fixes Chrome medial axis vertical alignment bug */
}

.primary-nav .level1 li:hover .level2{

left: -12px; /* IN SOME CASES - fixes Chrome medial axis vertical alignment bug */

}

Fallback IE9- en jQuery

Polyfill IE9- (non-testé – nécessite Selectivizr) : Flexie.js.

A améliorer : l’alignement vertical des libellés de 1er niveau n’est pas géré.

[RBS Change v3.x] Afficher différentes vues d’un bloc en éditant le fichier /lib/blocks/_nom_du_bloc_Action.class.php

18/09/2014 / admin

Dans l’arborescence des fichiers, se rendre à la racine du répertoire du module qui contient le bloc pour lequel on souhaite créer et afficher une nouvelle vue en front (dans notre exemple, le bloc en question s’appelle ‘_nom_du_bloc_-Block-SubscriptionFooter-Success.all.all.html’).

Dupliquer ce fichier et le renommer en ‘_nom_du_bloc_-Block-SubscriptionFooter-Toto.all.all.html’. Nous venons de remplacer le suffixe ‘-Success’ par ‘-Toto’.

Se rendre dans le répertoire /lib/blocks/ et ouvrir le fichier se terminant par ‘Action.class.php’ et dont le libellé correspond au nom du bloc dont on souhaite tester une vue supplémentaire.

Repérer la ligne qui contient :

return website_BlockView::SUCCESS;

1

return website_BlockView::SUCCESS;

La remplacer par :

return 'Toto';

1

return 'Toto';

C’est désormais le bloc portant le suffixe ‘-Toto’ qui sera affiché en front.

Remarque : Cette astuce n’est valable que pour tester l’affichage d’une vue supplémentaire d’un bloc en front.

[jQuery] [CSS] Une bordure CSS derrière un titre

11/09/2014 / admin

Nouvelle méthode (nécessite le jQuery de l’ancienne méthode) :

@mixin make-line-behind-title(){ font-size: rem(18); text-transform: uppercase; text-align: center; display: block; width: 100%; position: relative; &:after{ position: absolute; z-index: -1; top: 50%; left: 0; content: ""; height: 1px; width: 100%; background-color: $site-font-color-light; } > span{ background-color: #fff; padding: 0 8px; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

@mixin make-line-behind-title(){
font-size: rem(18);
text-transform: uppercase;
text-align: center;
display: block;
width: 100%;
position: relative;
&:after{
position: absolute;
z-index: -1;
top: 50%;
left: 0;
content: "";
height: 1px;
width: 100%;
background-color: $site-font-color-light;
}
> span{
background-color: #fff;
padding: 0 8px;
}
}

Ancienne méthode :

Sources : CSS line behind title text, Wrap all text before first
tag within an

Problème : scanner le contenu se trouvant entre les balises ouvrante et fermante de titre, repérer le premier retour chariot et imbriquer tout le texte se trouvant avant celui-ci dans une nouvelle balise.

Avant exécution du jQuery :

<h1 class="heading-one">lorem ipsum<br />dolor sit amet<br />lorem ipsum dolor<br />sit amet</h1>

1

<h1 class="heading-one">lorem ipsum<br />dolor sit amet<br />lorem ipsum dolor<br />sit amet</h1>

Après exécution du jQuery :

<h1 class="heading-one"><span class="line-behind-text">lorem ipsum</span><br />dolor sit amet<br />lorem ipsum dolor<br />sit amet</h1>

1

<h1 class="heading-one"><span class="line-behind-text">lorem ipsum</span><br />dolor sit amet<br />lorem ipsum dolor<br />sit amet</h1>

Solution :

jQuery :

jQuery(document).ready(function(){ jQuery('.heading-one').each(function (){ jQuery(jQuery(this).prop('firstChild')).wrap('<span class="line-behind-text" />'); }); });

1
2
3
4
5

jQuery(document).ready(function(){
    jQuery('.heading-one').each(function (){
        jQuery(jQuery(this).prop('firstChild')).wrap('<span class="line-behind-text" />');
    });
});

CSS :

.heading-one{ text-align: center; position: relative; overflow: hidden; } .heading-one .line-behind-text { display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; *vertical-align: auto; position: relative; padding: 0 20px; } .heading-one .line-behind-text:before, .heading-one .line-behind-text:after { content: ''; display: block; width: 1000px; position: absolute; top: 0.73em; border-top: 1px solid red; } .heading-one .line-behind-text:before { right: 100%; } .heading-one .line-behind-text:after { left: 100%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.heading-one{
    text-align: center;
    position: relative;
    overflow: hidden;
}

.heading-one .line-behind-text {
    display: inline-block;
    vertical-align: baseline;
    zoom: 1;
    *display: inline;
    *vertical-align: auto;
    position: relative;
    padding: 0 20px;
}

.heading-one .line-behind-text:before,
.heading-one .line-behind-text:after {
    content: '';
    display: block;
    width: 1000px;
    position: absolute;
    top: 0.73em;
    border-top: 1px solid red;
}

.heading-one .line-behind-text:before { right: 100%; }
.heading-one .line-behind-text:after { left: 100%; }

Articles récents

Catégories

Archives

Méta

Mois : septembre 2014

[RBS Change v3.x] Afficher différentes vues d’un bloc en éditant le fichier /lib/blocks/_nom_du_bloc_Action.class.php

[jQuery] [CSS] Une bordure CSS derrière un titre

Nouvelle méthode (nécessite le jQuery de l’ancienne méthode) :

Ancienne méthode :

Problème : scanner le contenu se trouvant entre les balises ouvrante et fermante de titre, repérer le premier retour chariot et imbriquer tout le texte se trouvant avant celui-ci dans une nouvelle balise.

Solution :