|
1 2 3 4 5 6 7 8 9 |
var isCheckedCheckbox = $('input[type="checkbox"]:checked'); $('.element').each(function(){ if($(this).find(isCheckedCheckbox).length > 0){ // faire quelque chose si au moins une checkbox est sélectionnée } else { // sinon, faire autre chose } }); |
Mois : mai 2016
[LESS] Propriété CSS Calc : petite subtilité de déclaration
La propriété CSS calc ne fonctionne pas lorsqu’on la déclare comme en CSS :
|
1 2 3 4 5 |
@asideWidth: 30px; .post { width: calc(100% - @asideWidth); } |
Adapter son code comme suit :
|
1 2 3 4 5 |
@asideWidth: 30px; .post { width: calc(~"100% - " @asideWidth); } |
[Bootstrap 3] Conserver plusieurs collapse ou dropdown ouverts simultanément
Source Keep multiple collapse open (with button to toggle) – Bootstrap 3.
L’astuce consiste à :
- Englober l’ensemble des éléments collapse dans une
<div>avec unid="accordion". - Rajouter sur les liens, qui au clic ouvrent les parties cachées, des attributs
data-parent="#accordion"(dont la valeur fera référence à celle de l’id de la div englobante) ethref="#collapseOne"(dont la valeur sera unique pour chaque lien). - Rajouter un attribut
id="collapseOne"unique (dont la valeur fera référence à la valeur de l’attribut href placé sur le lien juste au-dessus).
…et à ajouter un bout de code javaScript supplémentaire (voir plus bas).
|
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 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<div class="accordion" id="accordion"> <!--Article 1--> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a> </div> <div id="collapseOne" class="accordion-body collapse"> <div class="accordion-inner"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <!--Article 2--> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a> </div> <div id="collapseTwo" class="accordion-body collapse"> <div class="accordion-inner"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <!--Article 3--> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a> </div> <div id="collapseThree" class="accordion-body collapse"> <div class="accordion-inner"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
$('a[data-toggle="collapse"]').on('click',function(){ var id=$(this).attr('href'); if($(id).hasClass('in')) { $(id).collapse('hide'); } else{ $(id).collapse('show'); } }); |
[CSS] Afficher du contenu pour les lecteurs d’écrans uniquement
|
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 29 30 |
// Only display content to screen readers // // See: http://a11yproject.com/posts/how-to-hide-content/ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; } // Use in conjunction with .sr-only to only display content when it's focused. // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 // Credit: HTML5 Boilerplate .sr-only-focusable { &:active, &:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } } |
[CSS] Les règles d’héritage
A part !important, est-ce qu’il existe des trucs propres pour qu’un style prenne le dessus sur un autre avec lequel il est en concurrence?
La surcharge par ordre de déclaration dans la CSS :
Pour prendre la main, t’as la surcharge : tu déclares .box { padding: 12px; } puis plus loin, tu re-déclares .box { padding: 22px; }.
|
1 2 3 |
.box { padding: 12px; } .several-other-css-declaration { ... } .box { padding: 22px; } // <- déclaration qui sera prise en compte. |
C’est toujours la dernière déclaration rencontrée pour un élément donné qui est prise en compte et qui écrase toutes les précédentes.
Le ciblage par précision dans le chemin (dans le DOM) qui permet d’atteindre l’élément :
Code HTML :
|
1 2 3 4 5 6 7 |
<div class="riri"> <div class="fifi"> <div class="loulou"> Les castors juniors </div> </div> </div> |
Dans l’ordre de priorité tu as :
.riri .fifi .loulou{ font-size: 12px }(le + important).fifi .loulou { font-size: 22px; }.loulou { font-size: 42px; }(le – important)
Et là, plus tu seras précis dans la manière (le chemin) de cibler ton élément, plus tes styles prendront le dessus peu importe l’ordre dans lequel ils sont déclarés dans ta/tes CSS.
Il y a encore un cas supplémentaire dans la demo JSFiddle.net, donc à voir et à utiliser pour manipuler d’autres cas à l’avenir.
[jQuery] Centrer horizontalement la partie déroulée d’un menu sur un libellé dont la largeur peut varier
TODO : gérer les limites droite/gauche de la page.
Markup HTML :
|
1 2 3 4 5 6 7 8 9 |
<li class="js-facet"> <div class=""> <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="btn-facet"> Shop by Prix<span class="caret"></span> </a> <div class="js-facet-values"> </div> </div> </li> |
Code jQuery :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var facetValuesElement = $('.js-facetnav-refinements .js-facet'); // DO: Partie déroulée du dropdown centrée horizontalement par rapport à la largeur du libellé de premier niveau du menu var nav_sub_item_width = 370; facetValuesElement.each(function() { var nav_primary_item_width = $(this).outerWidth(); var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2); $(this).find('.js-facet-values').css({ 'width': nav_sub_item_width+'px', 'margin-left': -wanted_value }); }); // UNDO: Partie déroulée du dropdown centrée horizontalement par rapport à la largeur du libellé de premier niveau du menu facetValuesElement.each(function() { $(this).attr('style', ''); }); |
[jQuery] Combiner plusieurs déclarations dans une même méthode .attr
|
1 2 3 4 5 6 7 |
$('.element').attr({ id: getFacetID, "data-toggle": 'dropdown', role: 'button', "aria-haspopup": 'true', "aria-expanded": 'false' }); |
A noter : les attributs qui contiennent des tirets (caractère « -« ) doivent être mis entre guillemets.
[jQuery] Combiner plusieurs déclarations dans une seule méthode .removeAttr
Source : Combing multiple .removeAttr() statements.
Version linéaire (la méthode .removeAttr est appelée pour chaque déclaration)
|
1 2 3 4 |
checkboxes.removeAttr("checked",'checked'); checkboxes.removeAttr("indeterminate", false); checkboxes.removeAttr("role", 'checkbox'); checkboxes.removeAttr("aria-checked", false); |
Version optimisée
|
1 2 3 |
$.each(["checked","indeterminate","role","aria-checked"],function(i,attrName){ checkbox.removeAttr(attrName); }); |
[Yeoman] Réussir à installer Yeoman sur Ubuntu en 3 étapes
Source : Yeoman: Getting it to Work on Ubuntu
Si l’installation de Yeoman sur Ubuntu Server vous pète à la tronche (en vous affichant, par exemple, un message d’erreur de ce style) :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
npm ERR! Linux 4.4.0-22-generic npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" "-g" "yo" npm ERR! node v4.2.6 npm ERR! npm v3.5.2 npm ERR! path /usr/local/lib/node_modules npm ERR! code EACCES npm ERR! errno -13 npm ERR! syscall access npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules' npm ERR! at Error (native) npm ERR! { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'access', npm ERR! path: '/usr/local/lib/node_modules' } npm ERR! npm ERR! Please try running this command again as root/Administrator. npm ERR! Please include the following file with any support request: npm ERR! /home/frank/npm-debug.log |
1. Installer Node
|
1 |
sudo apt-get update; sudo apt-get upgrade; sudo apt-get install build-essential openssl libssl-dev curl |
|
1 |
sudo apt-get install nodejs; sudo ln -s /usr/bin/nodejs /usr/bin/node; curl https://npmjs.org/install.sh | sudo sh |
2. Pouvoir tout installer avec NPM
|
1 |
echo prefix = ~/.node >> ~/.npmrc; echo 'export PATH=$HOME/.node/bin:$PATH' >> ~/.bashrc; . ~/.bashrc |
3. Installer Yeoman
|
1 |
npm install -g yo |
Tester en tapant simplement la commande :
|
1 |
yo |
[Adobe Illustrator] Quelques astuces d’utilisation pour préparer une police d’icônes
Articles connexe avec d’autres astuces: [IcoMoon] Créer une police d’icônes ou de pictogrammes avec IcoMoon, résolution d’erreurs.
Préparer des sources SVG à leur intégration dans une police d’icônes
La création d’une police de caractères regroupant l’ensemble des icônes (et autres pictogrammes, etc…) auxquelles fait appel une charte graphique de site internet est devenue aujourd’hui quasiment incontournable tant le procédé se révèle bénéfique pour tous, et notamment à la différence d’un traitement via images au format PNG.
- L’utilisation du format vectoriel permet la manipulation à loisirs des dimensions des icônes sans perte de qualité visuelle.
- Ce format permet également d’agir facilement sur certaines caractéristiques visuelles des icônes via une pléthore de propriétés CSS (fond transparent, couleur, opacité, ajout d’une ombre portée, déformation, etc…).
- Ce format permet aussi de diminuer considérablement le poids du/des médias chargés dans les pages.
- Le chargement de la page s’en trouve dopé puisqu’on n’effectue plus qu’une seule requête serveur pour charger la totalité des icônes (bon OK, on pouvait déjà obtenir ce résultat en créant un sprite d’images).
Si il existe à l’heure actuelle plusieurs techniques permettant aux développeurs front-end d’industrialiser l’intégration de ces icônes (via des outils en ligne comme Icomoon, un plug-in Gulp comme Iconfont, ou à la génération d’une image sprite au format SVG), ils se retrouvent quelque fois freinés par des difficultés liées à la nature même des supports graphiques qu’on leur demande d’exploiter:
- Les pictogrammes, bien que constitués de tracés vectoriels, doivent être de très légèrement à très lourdement retraités.
- Les icônes ne sont pas fournies dans un format vectoriel, mais sous forme de bitmaps sur lesquels sont appliqués des effets d’incrustration de couleur. Pour ce cas, je l’annonce d’emblée: il n’existe pas de solution qui permettre d’obtenir des icônes propres. Il faut travailler en vectoriel pour obtenir de la qualité.
Le but de ce billet est ainsi de fournir des solutions aux problèmes les plus fréquemment rencontrés avec les supports graphiques destinés à la création d’une police d’icônes. Avec notamment quelques astuces d’utilisation d’Adobe Illustrator que les développeurs front-end connaissent peu sachant qu’il s’agit d’avantage d’un outil destiné à la création de supports pour l’impression, mais qui se révèle être un outil incontournable lorsqu’il s’agit de manipuler des tracés vectoriels.
- Comment recadrer une illustration aux seules limites du ou des tracés sélectionnés?
- Convertir des tracés (strokes) en éléments pleins (fills)
- Les paramètres de sauvegarde des SVG pour intégration dans une police d’icônes
- Utiliser l’outil Concepteur de forme d’Illustrator pour intégrer un tracé en 1er plan dans un tracé en arrière plan sous forme de pochoir/découpe
- Ré-exporter un SVG récalcitrant avec icomoon.io
- Résoudre le problème des SVG multi-tranches (paths) et multicolores (multicolors)
Comment recadrer une illustration aux seules limites du ou des tracés sélectionnés?
J’ai sélectionné un ensemble de tracés pour les copier/coller dans un nouveau fichier (typiquement pour l’isoler en vue de l’exporter au format SVG pour en faire un pictogramme ou une icône). Mon nouveau fichier ne tient pas compte des dimensions de mes tracés et comprend beaucoup de marges que je souhaite supprimer.
Pour ce faire, sélectionner simplement Objet > Plans de travail > Ajuster aux limites de l’illustration.
Convertir des tracés (strokes) en éléments pleins (fills)
Source : Icomoon.io docs – Converting Strokes & Text to Fills
La version actuelle de l’application Icomoon ignore les tracés. Mais on peut les convertir en éléments pleins via différents logiciels de création vectorielle. Il est à noter que j’avais également rencontré des difficultés de même nature en générant ma police d’icônes via le plugin Gulp Iconfont.
A l’import de fichiers SVG dans Icomoon comme via Gulp Iconfont l’icône n’est que partiellement, voir pas du tout, visible. La capture ci-dessous illustre le souci. Une icône similaire à été importée deux fois (mais il y a une différence de traitement à la source entre les deux fichiers, nous allons voir ça plus bas).
Ci-dessous, une capture en provenance d’Illustrator qui montre la différence, à la source, entre les deux icônes :
Pour convertir des tracés en éléments pleins sous Adobe Illustrator, choisir Objet > Décomposer. Il faudra peut-être sélectionner Objet > Décomposer l’aspect avant de pouvoir appliquer Objet > Décomposer.
Il est également possible qu’au moment de décomposer les tracés, Illustrator ouvre une fenêtre avec des cases à cocher Objet, Fond, Contour. Il faudra sélectionner uniquement Contour (cf. capture ci-dessous).
Les paramètres de sauvegarde des SVG pour intégration dans une police d’icônes
Sauvegardez votre fichier au format SVG avec les paramètres suivants:
- Profils SVG: SVG 1.1
- Polices > Type: SVG
- Polices > Jeu partiel: Aucun (utiliser les polices système)
- Options > Emplacement de l’image: Incorporer
- Options avancées:
- Propriétées CSS: Attributs de présentation
- Positions décimales: 1
- Codage: UTF-8
- Produire moins d’éléments
: sélectionner
Laisser le reste non sélectionné.
Utiliser l’outil Concepteur de forme d’Illustrator pour intégrer un tracé en 1er plan dans un tracé en arrière plan sous forme de pochoir/découpe
Ci-dessous l’illustration de l’effet attendu (présence d’une croix dans le cercle en bas à droite) et de l’effet obtenu après passage à la moulinette icomoon ou gulp-iconfont. Problème: les tracés qui constituent la croix sont ignorés.
Solution: à l’aide de l’outil Concepteur de forme d’Illustrator, créer une sorte de pochoir/découpe des tracés de 1er plan sur les tracés d’arrière plan. On voit clairement dans l’illustration ci-dessous que le cercle et la croix sont constitués de 3 tracés bien distincts. L’idée étant de n’avoir plus qu’un tracé unique.
Commencer par sélectionner l’outil Concepteur de forme dans le panneau d’outils de gauche :
Placez le curseur sur un tracé de 1er plan que vous souhaitez incruster dans l’arrière plan et en maintenant la touche Alt gauche enfoncée et cliquez sur l’ensemble des tracés (contours et intérieur de forme) sur lesquels vous souhaitez agir (le curseur doit afficher un caractère –, cf. illustrations ci-dessous).
Sélection des contours :
Sélection des intérieurs de forme :
Au final, le tracé doit ressembler à ceci (petite subtilité dans notre exemple, il y a encore un tracé derrière le cercle que nous allons pouvoir supprimer de la même manière) :
Ré-exporter un SVG récalcitrant avec icomoon.io
L’application de génération d’une police d’icônes à partir de fichiers SVG procède, à l’upload des sources, procède à des traitements qui peuvent permettre dans certains cas de nettoyer les fichiers les plus récalcitrants. Pour exemple, j’avais une icône (déjà précédemment retraitée sous Illustrator avec les différentes techniques énoncées dans ce billet) qui m’ajoutait, après génération d’une police via gulp-iconfont, une marge importante sous l’élément. Cette marge n’était pas présente dans le SVG source. L’inclusion de cette marge décalait l’ensemble des icônes de la police générée.
- Dans l’app en ligne icomoon.io, exporter le fichier SVG récalcitrant en cliquant sur Import Icons (barre du haut de page)
- Sélectionner l’icône pour export
- Cliquer sur Generate SVG & More (barre du bas de page)
- Cliquer sur Download (barre du bas de page)
Résoudre le problème des SVG multi-tranches (paths) et multicolores (multicolors)
Dans la capture ci-dessous, le picto est non seulement multi-tranches (paths) mais également multi « colors ». Deux éléments qui vont empêcher sa conversion et son intégration dans une police d’icônes. On devine notamment qu’il est multi-tranches car on a deux couleurs: le rose et le blanc. En effet, le blanc devrait être transparent.
Si on génère une police d’icônes avec ce type de fichiers, on va se retrouver à devoir placer de multiples éléments HTML dans le code pour pouvoir afficher l’icône dans son intégralité.
Source CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.naosicon-promo-code-cart---bad .path1:before { content: "\e90e"; color: #de0072; } .naosicon-promo-code-cart---bad .path2:before { content: "\e90f"; color: #fff; margin-left: -1em; } .naosicon-promo-code-cart---bad .path3:before { content: "\e910"; color: #de0072; margin-left: -1em; } |
Source HTML (à la sauce AngularJS)
|
1 2 3 4 5 |
<span ng-click="editGlyph(glyph)" class="cursor-pointer noSelection lh2 ff-icomoon-font-tab fs-prevSize fgc2"> <span ng-if="glyph.icon.isMulticolor" ng-repeat="tChar in glyph.properties.tempChar" style=" color:#de0072; ; margin-left: 0"></span> <span ng-if="glyph.icon.isMulticolor" ng-repeat="tChar in glyph.properties.tempChar" style=" color:#fff; ; margin-left: -1em"></span> <span ng-if="glyph.icon.isMulticolor" ng-repeat="tChar in glyph.properties.tempChar" style=" color:#de0072; ; margin-left: -1em"></span> </span> |
On voit également bien dans la source HTML que des informations de couleur sont présentes dans le DOM.
Supprimer les couleurs multiples du picto SVG
Source: Réduire le poids d’une image SVG : d’Illustrator à l’export final par Stéphanie Walter sur le site Alsacréations et notamment le paragraphe Travail sur les couleurs.
Version PDF de l’article pour la postérité: alsacreations.com-Réduire le poids dune image SVG dIllustrator à lexport final.
On peut aussi passer par l’appli en ligne icomoon.io. Il suffit d’importer son icône en cliquant sur Import icons (en haut à gauche, bouton mauve – cf.capture ci-dessous), puis de sélectionner l’icône fraichement importée via l’outil Select (picto blanc sur fond jaune dans la capture) et de cliquer sur les options de couleur (flèche rouge dans la capture). Vous pouvez ensuite, sous Color Themes cliquer sur la poubelle pour supprimer toutes les informations de couleurs du picto.
Supprimer les tranches multiples du picto SVG
Commencer par sélectionner View > Show tranparency grid pour remplacer le fond blanc par un fond transparent:
A ce stade, on voit qu’il reste du blanc en plein milieu du picto. Pour le supprimer (pour le remplacer par du transparent), nous allons utiliser l’outil Concepteur de forme d’Illustrator (entouré en rouge dans la capture ci-dessous) :
Group selection tool
maj + clic pour sélectionner tous les tracés
object > group
- How to make an area in illustrator transparent?
- How to make the inner shape transparent using the Illustrator