Mois : décembre 2017

[jQuery] Illuminer un élément de menu au scroll dans la page

Réaliser l’équivalent du composant Magellan de Foundation 6 for sites.

Source: Highlight menu item on scroll – A PEN BY joxmar.

Les sources HTML et CSS sont facultatives; en tout cas, la partie jQuery peut assez facilement s’adapter.

Cas plus tordu

…où le sticky est séparé en 2 éléments.

[Javascript] Ressources pour manipuler les tableaux

Doc généraliste

Code snippets

  • Comment ajouter des éléments à un tableau?
  • Comment ajouter des URLs contenus dans un menu (UL>LI) dans un tableau?

    Le console.log renvoie ceci:

    (4) ["http://www.local/site_disabled/fr/home-static.html", "http://www.local/site_disabled/fr/flightlist-a-static.html", "http://www.local/site_disabled/fr/flightlist-d-static.html", "http://www.local/site_disabled/fr/companylist-static.html"]
    0: "http://www.local/site_disabled/fr/home-static.html"
    1: "http://www.local/site_disabled/fr/flightlist-a-static.html"
    2: "http://www.local/site_disabled/fr/flightlist-d-static.html"
    3: "http://www.local/site_disabled/fr/companylist-static.html"
    length: 4

  • Comment ajouter des entrées clé+valeur (key+value) à un tableau?
  • Comment supprimer tous les éléments d’une tableau, sauf les N derniers?

    Alternatively, modify the existing array with splice().

  • get closest number out of array
  • check if value exist or lies between particular values in array

  • How to compare values between two arrays?
  • Logic for checking in-between two numbersAttention au code d’exemple qui fonctionne bien mais qui omet les accolades !!!.

[Foundation 6] Habiller proprement un input type= »file »

Source: Adding Filename Feedback to (Stylized) Foundation File Upload Buttons sur Foundation forum.

The Problem:

Foundation has support for stylizing file inputs by adding a label element — but currently — after the user chooses a file from his/her system, there is no feedback that shows that a file was selected. The button’s text remains the same (e.g. « Upload File ») and doesn’t display the filename the user selected, causing the user to wonder if the file was actually selected.

The Solution:

To add feedback, you can add a small amount of JS code. Here’s an example that targets all input files using the example that Foundation uses on their Forms page.

HTML:

JS:

Tested working in Foundation 6.3.0

(Note: If using this code, you may want to use a named function instead of recreating an anonymous function in each iteration of the for loop.)

You may want to do some quick validation on this.files before setting the label’s innerHTML or leave the label’s innerHTML alone to keep the button as is and write the file name in another div next to it. There are also other things to consider such as multiple file uploads (in which you could signify the number of files as feedback for that use-case). It would be great if Foundation could possibly add this feature in the future.

Hope this helps,

Roy

[RBS Change 3.6.x] erreurs et solutions

f_AOP::getParentName could not find _ definition file #0

[Police d’icônes] bugs connus et leurs solutions

Après mise à jour de la police d’icônes, ce n’est pas la bonne police qui s’affiche

Vous avez ajouté ou retiré des icônes de votre police et, après mise à jour sur votre serveur, l’affichage des polices est décalé et ce n’est plus les bonnes polices qui s’affichent au bon endroit (je sais, c’est pas très français tout ça, mais vous comprenez ce que je veux dire, non?)

Le problème peut venir de la mise en cache des fonts et le blog CSS Tricks propose plusieurs solutions dans son article Strategies for Cache-Busting CSS.

C’est notamment la seconde solution qui est intéressante pour un dev front-end: Changing file name.
Elle consiste (pour faire simple) à attribuer un libellé unique au fichier incriminé à chaque fois qu’il est modifié. De cette manière, le serveur (quasiment) peu importe comment il est configuré, verra que c’est un nouveau fichier et en tiendra compte lors du prochain affichage d’une page dans un navigateur.

css-tricks.com-Strategies for Cache-BustingCSS (version PDF pour la postérité).

Une solution à mettre en place via Gulp

gulp-iconfont issue – font change so every build. One think bothers me: on every build of the iconfont the resulting font changes so it’s in my local changes all the time. Why the font changes despite I’m not changing the svg icons? How can I solve this issue?

See the gulp-svg2ttf timestamp option https://github.com/nfroidure/gulp-iconfont#iconfontoptions.

I have solved this problem as follows: first I generate a checksum and store it in the package.json with the current timestamp. This way the timestamp changes only when the checksum changes.

The relevant parts of my gulpfile:

Ce n’est pas la bonne icône qui s’affiche sous Chrome

Après avoir ajouté à la volée une ou plusieurs icônes à votre bibliothèque custom, certaines icônes en front sont remplacées par d’autres… C’est un souci avec les caches du navigateur Chrome. Il est évoqué ici: Issue with Icon Fonts in Chrome 23.

La solution consiste à déclarer le(s) format(s) woff jsute après le format eot et avant tous les autres:

Source: Bulletproof @font-face Syntax par Paul Irish.

Une deuxième solution consiste à ne générer que le format woff, la prise en charge de ce dernier étant particulièrement étendue aujourd’hui:

[javaScript] Désactiver un bouton d’action si le champ input associé affiche une valeur inférieure ou égale à zéro

Solution 1:

Vérifier que le contenu à changé avec l’événement input (source: Can jQuery check whether input content has changed?).

Où (optimisé)

Solution 2:

avec les attributs onkeyup et disabled

[jQuery][dataTables] Report des libellés d’en-têtes dans les éléments Select correspondant

Un petit code bit pour le projet https://datatables.net/ qui permet le report des libellés d’en-têtes dans les éléments Select correspondant.

Attention à bien placer et renseigner le data-heading dans la source HTML:

[jQuery][dataTables] Désactiver l’élément Select si toutes les cellules d’une même colonne ont le même contenu

Un petit plug-in pour le projet https://datatables.net/ qui permet de désactiver l’élément Select si toutes les cellules d’une même colonne ont le même contenu (ne PAS tenir compte de la colonne Date dans la capture).

Utilisation:

Code source:

Le mettre sous Git il faudrait …