Source: How do I change the value of a global variable inside of a function
|
1 2 3 4 5 |
var maVariableGlobale = 0; function maFonction(){ maVariableGlobale = 1; } |
Mois : juillet 2018
[javaScript] Importer ses points de rupture (breakpoints) CSS pour les utiliser avec javaScript
Source: Importing CSS Breakpoints Into JavaScript
L’exemple utilise Bootstrap 3 mais est facilement transposable.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
body:before { display: none; } @media (max-width: @screen-xs-max) { body:before { content: "xs"; } } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { body:before { content: "sm"; } } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { body:before { content: "md"; } } @media (min-width: @screen-lg-min) { body:before { content: "lg"; } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var breakpoint = {}; breakpoint.refreshValue = function () { this.value = window.getComputedStyle(document.querySelector('body'), ':before').getPropertyValue('content').replace(/\"/g, ''); }; $(window).on('load resize', breakpoint.refreshValue()); if (breakpoint.value == 'xs') { console.log('XS breakpoint'); } if (breakpoint.value == 'sm') { console.log('SM breakpoint'); } if (breakpoint.value == 'md') { console.log('MD breakpoint'); } if (breakpoint.value == 'lg') { console.log('LG breakpoint'); } |
[JSP] Comment ajouter une classe CSS dans une vue en regard d’une condition
Source: How to set style class on td based on a condition
Trois possibilités, à la manière d’un if else en javaScript:
|
1 2 3 |
<td class="${test eq true ? 'style_class1' : 'style_class2'}"> <td class="${test ? 'style_class1' : 'style_class2'}"> <td class="${test eq true && not empty test2 ? 'style_class1' : 'style_class2'}"> |
[jQuery] Bloquer le scroll dans la page quand un élément en position absolue est scrollable
Edit 21/01/2021: préférer la solution suivante: [CSS] Désactiver le scroll dans la page lorsqu’un élément en position absolue (de type Modale, Off-Canvas, …) est ouvert en sur-impression
Source: bloquer le scroll de la page quand on est dans une div scrollable.
|
1 2 3 4 5 6 7 |
$('#monElement').bind('mousewheel DOMMouseScroll', function (e) { var e0 = e.originalEvent, delta = e0.wheelDelta || -e0.detail; this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; e.preventDefault(); }); |
[Hybris] Quels arguments à la condition c:if pour n’afficher un bloc de code que si le contenu qu’il habille est présent
Si le bloc de code n’est pas vide de contenu:
|
1 2 3 4 5 6 7 |
<c:if test="${not empty productReference.target.price.promotionPercentage}"> <div class="stickers-list"> <span class="sticker-promotionPercentage"> ${productReference.target.price.promotionPercentage}% </span> </div> </c:if> |
Si le bloc de code n’est pas vide de contenu et que le contenu à afficher est plus grand que « 0 »:
|
1 2 3 4 5 |
<div class="stickers-list"> <c:if test="${not empty product.price.promotionPercentage && product.price.promotionPercentage lt 0}"> <span class="sticker-promotionPercentage">${product.price.promotionPercentage}%</span> </c:if> </div> |
[iOS] Prévenir le bug de Double Tap sur iPhones et iPads
Sources: Solving The Double Tap Issue on iOS Devices (fonctionne) et The Annoying Mobile Double-Tap Link Issue et Demo (pas testé, plus propre mais plus chiant à mettre en place si pas prévu en amont du développement du projet).
En javaScript (jQuery)
ATTENTION: votre lien doit évidemment être présent dans le DOM au moment où vous ce code est exécuté. Sinon, prévoir une détection.
|
1 2 3 4 5 |
$("a").on("click touchend", function(e) { var el = $(this); var link = el.attr("href"); window.location = link; }); |
Si l’utilisateur doit pouvoir scroller dans la page au touch sur un lien
Si l’utilisateur doit pouvoir scroller, il ne faut pas que le touch sur un lien déclenche ce dernier!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var ___SCROLL_TOP_LAST___ = 0; $(".autocomplete-item").on("touchstart", function() { ___SCROLL_TOP_LAST___ = $('body').scrollTop(); console.log('touchstart: '+___SCROLL_TOP_LAST___); }); $(".autocomplete-item").on("touchend", function() { console.log('touchend: '+___SCROLL_TOP_LAST___); var el = $(this); var link = el.attr("href"); if($('body').scrollTop() === ___SCROLL_TOP_LAST___) { window.location = link; } }); |
En CSS
cf. article de Chris Coyier sur CSS Tricks…
[jQuery] Obtenir la somme des outerHeight de l’ensemble des éléments ayant la même classe
Source: Get the sum of the outerHeight of all elements of the same class.
|
1 2 3 4 5 6 7 8 |
<ul> <li class="left-stack"></li> <li class="left-stack"></li> <li class="left-stack"></li> <li></li> <li></li> <li></li> </ul> |
|
1 2 3 4 |
var leftStackOuterHeight = 0; $('.left-stack').each(function () { leftStackOuterHeight += $(this).outerHeight(); }); |
…va me donner la somme des hauteurs des 3 éléments de la liste ci-dessus qui ont la classe .left-stack.
[Javascript] Filtrer les éléments d’un tableau et stopper à la première occurrence qui matche
ECMAScript:
Sources: JavaScript filter that stops at the first result et Array.prototype.find().
|
1 2 3 4 5 6 7 8 |
var array1 = [5, 12, 8, 130, 44]; var found = array1.find(function(element) { return element > 10; }); console.log(found); // expected output: 12 |
Javascript:
Source: How to Search Arrays in JavaScript: Searching Arrays Using for Loops.
|
1 2 3 4 5 6 7 8 9 10 |
function findInArray(ar, val) { for (var i = 0,len = ar.length; i < len; i++) { if ( ar[i] > val ) { // first val > leftStackOuterHeight return i; } } return -1; } var firstMatchingElement = findInArray(output, leftStackOuterHeight); |
[jQuery] Trouver la distance entre deux éléments du DOM avec la méthode Offset
Source: Find distance between two DIVs using jQuery?.
|
1 2 |
<div class="foo"></div> <div class="bar"></div> |
La solution ci-dessous fonctionnera si il n’y a qu’un seul élément .foo et qu’un seul élément .bar dans le DOM.
|
1 |
$('.foo').offset().top - $('.bar').offset().top |
[Javascript] Supprimer tous les caractères non numériques d’une chaîne avec la méthode Replace
Source: Strip all non-numeric characters from string in JavaScript.
|
1 2 |
var myString = 'abc123.8<blah>'; //desired output is 1238 |
|
1 |
myString = myString.replace(/\D/g,''); |
Attention: cette méthode renverra du texte. Le code myString + 1 renverra 12381.
Pour manipuler les valeurs numériques obtenues, il faut utiliser parseInt:
|
1 2 3 |
myString = parseInt(myString.replace(/\D/g,'')); myString + 1; // 1239 |