Monthavril 2015

[Bootstrap] Caler sur les limites droite d’une page la partie déroulée d’un menu horizontal lui même aligné à droite

Il peut arriver qu’une charte prévoit un menu géant horizontal qui soit aligné sur les limites droite de la page et déroulant (dropdown menu Bootstrap).

bootstrap-drodown_menu-align_right-01

Attention : la classe .right-stack n’existe pas dans Bootstrap. Elle se réfère à une <div> qui englobe l’ensemble du menu horizontal. Sa présence est importante au bon fonctionnement de cette astuce.

[IcoMoon] Créer une police d’icônes ou de pictogrammes avec IcoMoon, résolution d’erreurs

Article connexe avec d’autres astuces: [Adobe Illustrator] Quelques astuces d’utilisation pour préparer une police d’icônes.

SVG Cleaner

Batch, tunable, crossplatform SVG cleaning program : SVG Cleaner sur github.com.

Une version executable à télécharger sur Sourceforge.

Export your vector layers from PS to SVG in a single click!

Free photoshop script: Export your vector layers from PS to SVG in a single click!. What this Photoshop script does:

This script, once activated, exports all vector layers named with “.svg” at the end of the layer name as SVG files, along with their shape and color attribute.
No more slicing SVGs one by one like a caveman. Finished preparing your layers? Boom!

Exporter une icône constituée d’un ensemble de tracés vectoriels au format *.ai depuis Fireworks CS6 et l’ajouter à une police d’icônes générée à l’aide de l’App Icomoon

Remarque : Photoshop CC 2015 ne permet pas d’export au format *.ai :/

Problème :

Si pour x raison(s), le fait :

  1. d’enregistrer une icône constituée d’un ensemble de tracés vectoriels au format *.ai depuis Fireworks,
  2. d’ouvrir ensuite le fichier sous Illustrator pour le ré-enregistrer au format *.svg
  3. et d’importer, pour finir, ce fichier dans son nouveau format depuis l’App Icomoon…

…n’affiche pas du tout l’icone comme elle devrait, suivez la procédure ci-dessous :

Solution :

  1. Dans Fireworks, à l’aide de l’Outil Pointeur, sélectionner l’ensemble de tracés vectoriels qui constituent votre icône.
    fw-exporter copie
  2. Ctrl+c pour copier vos tracés, Ctrl+n pour créer un nouveau document. Dans la modale « Nouveau document » qui s’ouvre, dans la section « Couleur de la zone de travail », sélectionner « Transparente » puis bouton « OK ».
  3. Ctrl+v pour coller vos tracés dans le nouveau document.
  4. Menu « Fichier > Enregistrer sous ». Choisissez comme format de sortie (« Type ») « Illustrator 8 (.ai) » puis bouton « Enregistrer ».
  5. Rendez-vous sur : Zamzar – Conversion de AI à SVG en ligne et gratuitement. On ne va pas utiliser Illustrator pour convertir au format *.svg notre icône fraîchement exportée depuis Fireworks au format *.ai.
  6. Suivre les étapes 1 à 4. Utiliser une adresse e-mail jetable (yopmail.com fonctionne bien avec Zamzar) pour récupérer votre icône au format *.svg.
  7. Vérifiez vos mail : un lien pour télécharger une icône immédiatement exploitable avec l’App Icomoon vous y attend.
  8. Pleurez de joie, voilà c’est fini !

Après import, l’icône n’est que partiellement, voir pas du tout, visible dans IcoMoon

Source : http://www.sitepoint.com/create-an-icon-font-illustrator-icomoon/.

Problème :

A l’import du fichier svg dans IcoMoon l’icône n’est que partiellement, voir pas du tout, visible. La capture ci-dessous montre le problème. La même icône à été importée deux fois (mais il y a une différence entre les deux fichiers, nous allons voir ça plus bas).

icomoon-incomplete_icon

Ci-dessous, une capture en provenance d’Illustrator qui montre la différence, à la source, entre les deux icônes :

icomoon-illustrator

Solution :

Afin que l’ensemble des éléments vectoriels qui constituent une même icône soient importés dans IcoMoon, il faut pouvoir sélectionner non pas les tracés mais les contours de celle-ci. On voit dans la capture de gauche que ce sont (sauf pour la serrure) des tracés qui sont sélectionnés. Dans la capture de droite, ce sont les contours qui sont sélectionnés.

Pour ce faire, sélectionner l’ensemble des tracés à l’aide de l’outil Lasso ou de l’outil Baguette Magique puis Objet > Décomposer.

Transformer un SVG en icône à l’aide d’icomoon génère des tranches (paths) multiples au sein d’un seul et même glyphe

Source : SVG to Ico using icomoon generates multiple path instead of single object glyph.

Problème :

Exemple de fichier CSS généré pour une icône unique :

Ce problème intervient lorsque les tracés SVG importés embarquent plusieurs couleurs. Les icônes au sein d’une police ne peuvent contenir qu’une seule couleur par défaut.
Pour « traduire » des icônes multicolores via CSS, Icomoon crée plusieurs calques qu’il superpose. Ces glyphes nécessitent ainsi plus d’un seul caractère et ne peuvent avoir de ligatures.

Solution :

Pour éviter les glyphs multicolores, il faut ré-importer la source SVG après avoir réduit son nombre de couleurs à une seule. On peut pour ce faire tenter ce convertisseur en ligne : PicSvg – Convertir une image en Svg .

Solution #2: on le corrige à la main (comme les vrais) à l’aide d’Illustrator

Voir ici : Résoudre le problème des SVG multi-tranches (paths) et multicolores (multicolors)

Paramètres de sauvegarde des SVG pour création d’une police d’icônes :

Save your file as SVG with the following settings:

  • SVG Profiles: SVG 1.1
  • Fonts Type: SVG
  • Fonts Subsetting: None
  • Options Image Location: Embed
  • Advanced Options:
    • CSS Properties: Presentation Attributes
    • Decimal Places: 1
    • Encoding: UTF-8
    • Output fewer elements: check

Je n’ai aucun outil de type Illustrator/Fireworks à disposition et j’ai déjà une icône au format SVG, mais elle comporte plusieurs calques et/ou couleurs qui empêchent d’obtenir un résultat optimal en police d’icônes.

Utiliser la moulinette http://picsvg.com/fr.php pour ‘nettoyer’ vos SVG. L’outil est conçu à la base pour convertir un JPG ou un PNG en SVG mais permettrait aussi, dans certains cas, de rendre un SVG propre à la conversion en police d’icônes. A tester, surtout si vous ne disposez d’aucune appli pour retoucher vos sources.

[jQuery] jQuery ne fonctionne plus après rafraîchissement AJAX d’un élément dans la page

Sources : Click doesn’t work after AJAX load – jQuery, Jquery not working after ajax refresh page.

Si vous utilisez AJAX sur votre site, il est possible que des événements comme click, submit ou hover ne fonctionnent plus après rafraîchissement si vous ne les attachez pas proprement.
Je vais utiliser l’événement click pour décrire le problème, mais ce dernier s’applique à l’ensemble des événements jQuery.

Structure HTML :

Code jQuery qui fonctionnera uniquement avant rafraîchissement AJAX :

Code jQuery qui fonctionnera avant et après rafraîchissement AJAX :

[Bootstrap] Créer des notifications en mode fly-over

Source : Create Fly Over Notification Messages with Bootstrap.

benknowscode.com-Create Fly Over Notification Messages with Bootstrap

[Magento] Récupérer et afficher les propriétés d’un objet (d’un produit, par exemple)

Récupérer et afficher les propriétés d’un objet (ici l’objet $currentproduct qui est un produit) :

Afficher le libellé et l’ID de l’objet $currentproduct :

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑