Étiquette : if

[Javascript] Déclaration de condition If dynamique

23/06/2022 / admin

function compare(post, operator, value) {
  switch (operator) {
    case '>':   return post > value;
    case '<':   return post < value;
    case '>=':  return post >= value;
    case '<=':  return post <= value;
    case '==':  return post == value;
    case '!=':  return post != value;
    case '===': return post === value;
    case '!==': return post !== value;
  }
}
//...
compare(5, '<', 10); // true
compare(100, '>', 10); // true
compare('foo', '!=', 'bar'); // true
compare('5', '===', 5); // false

function compare(post, operator, value) {

switch (operator) {

case '>': return post > value;

case '<': return post < value;

case '>=': return post >= value;

case '<=': return post <= value;

case '==': return post == value;

case '!=': return post != value;

case '===': return post === value;

case '!==': return post !== value;

}

//...

compare(5, '<', 10); // true

compare(100, '>', 10); // true

compare('foo', '!=', 'bar'); // true

compare('5', '===', 5); // false

[JSP] Comment ajouter une classe CSS dans une vue en regard d’une condition

26/07/2018 / admin

Source: How to set style class on td based on a condition

Trois possibilités, à la manière d’un if else en javaScript:

<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] Stocker plusieurs données dans une variable sous forme de tableau et interroger la variable pour savoir si elle contient une donnée ou pas

11/07/2017 / admin

Source: https://stackoverflow.com/questions/13509669/find-out-if-a-variable-is-in-an-array

    var bpMobile = ['small', 'medium'];
    var bpDesktop = ['large', 'xlarge', 'xxlarge'];

1 2	var bpMobile = ['small', 'medium']; var bpDesktop = ['large', 'xlarge', 'xxlarge'];

    if($.inArray(Foundation.MediaQuery.current, bpMobile) != -1){
      alert('Mobile!');
    } else {
      alert('Desktop!');
    }

if($.inArray(Foundation.MediaQuery.current, bpMobile) != -1){

alert('Mobile!');

} else {

alert('Desktop!');

}

[jQuery] Compter le nombre d’enfants dans chaque parent et ajouter une classe spécifique en fonction du résultat

09/09/2016 / admin

Source : jQuery count number of li’s in each ul.

$.each($('.meganav-level2 .container .row'), function() {
    var children = $(this).find('> .meganav-level2-item');
    var count = children.length;
    $(this).attr('data-columns', count);

    if(count == 2){
        children.addClass('col-md-6');
    }
    else if(count == 3){
        children.addClass('col-md-4');
    }
    else if(count == 4){
        children.addClass('col-md-3');
    }
});

$.each($('.meganav-level2 .container .row'), function() {

var children = $(this).find('> .meganav-level2-item');

var count = children.length;

$(this).attr('data-columns', count);

if(count == 2){

children.addClass('col-md-6');

}

else if(count == 3){

children.addClass('col-md-4');

}

else if(count == 4){

children.addClass('col-md-3');

}

});

[jQuery] Détecter le navigateur et sa version avec le plug-in browser-detection et lancer une fonction avec les conditions if et else

14/03/2016 / admin

Edit du 04/10/2017: le plug-in Bowser ayant montré ses limites également, j’ai créé un nouveau billet qui liste les plugins JS de détection de browser, version, OS et les pour et contres d’utilisation.

Edit du 31/08/2017: le plug-in Browser Detection fonctionne très bien mais ne détecte pas le navigateur Microsoft Edge. Se tourner vers Bowser – A Browser detector. Because sometimes, there is no other way, and not even good modern browsers always provide good feature detection mechanisms.

JS Fiddle de demo ici.

Plug-in jQuery browser-detection.js sur GitHub.

Dans l’exemple ci-dessous, on cherche à détecter l’utilisation de Safari et sa version. Pour les versions 8 et antérieures (signifiées par la valeur 600 ou moins en suffixe de la classe safari-* ajoutée à l’élément html par le plug-in browser-detection.js et pour les autres navigateurs, on ne lance pas la fonction maFonction.

    jQuery(document).ready(function(){
        // https://github.com/sub2home/browser-detection
        browserDetection({
          addClasses: true
        });

        function maFonction(){
          // ici, le code de votre fonction
        }

        var isSafari = jQuery('html.safari').length;
        if (isSafari == 1) {
          var getClassValue = jQuery('*[class*="safari-"]').attr('class').split('safari-')[1];
          if (getClassValue <= 600){
            // alert('<=600');
            // do nuffin'
          }
          else {
            // alert('>600');
            maFonction();
          }
        }
        else {
          maFonction();
        }
    });

jQuery(document).ready(function(){

// https://github.com/sub2home/browser-detection

browserDetection({

addClasses: true

});

function maFonction(){

// ici, le code de votre fonction

}

var isSafari = jQuery('html.safari').length;

if (isSafari == 1) {

var getClassValue = jQuery('*[class*="safari-"]').attr('class').split('safari-')[1];

if (getClassValue <= 600){

// alert('<=600');

// do nuffin'

}

else {

// alert('>600');

maFonction();

}

else {

maFonction();

}

});

[LESS][Mixin] Une navigation simple en mode « inline » avec les guards

27/02/2015 / admin

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée :

ul.mon-menu {
  .simple-inline-nav("|"; 6px);
}

ul.mon-menu {

.simple-inline-nav("|"; 6px);

}

Résultat : entrée 1 | entrée 2 | entrée 3

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire devant la première entrée :

ul.mon-menu {
  .simple-inline-nav("|"; 6px; add-first);
}

ul.mon-menu {

.simple-inline-nav("|"; 6px; add-first);

}

Résultat : | entrée 1 | entrée 2 | entrée 3

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire derrière la dernière entrée :

ul.mon-menu {
  .simple-inline-nav("|"; 6px; add-last);
}

ul.mon-menu {

.simple-inline-nav("|"; 6px; add-last);

}

Résultat : entrée 1 | entrée 2 | entrée 3 |

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et deux séparateurs supplémentaires placés respectivement devant et derrière la première et la dernière entrée :

ul.mon-menu {
  .simple-inline-nav("|"; 6px; add-both);
}

ul.mon-menu {

.simple-inline-nav("|"; 6px; add-both);

}

Résultat : | entrée 1 | entrée 2 | entrée 3 |

/*
  Simple Inline Nav mixin

  Usage :

  1. Getting a simple inline nav with a separator between each menu entries :
      .simple-inline-nav("|"; 6px);
      =>  entry 1 | entry 2 | entry 3
  2. Getting a simple inline nav with a separator between each entries and a separator before the first entry :
      .simple-inline-nav("|"; 6px; add-first);
      =>  | entry 1 | entry 2 | entry 3
  3. Getting a simple inline nav with a separator between each entries and a separator after the last entry :
      .simple-inline-nav("|"; 6px; add-last);
      =>  entry 1 | entry 2 | entry 3 |
  4. Getting a simple inline nav with a separator between each entries and separators before and after the first and the last entries :
      .simple-inline-nav("|"; 6px; add-both);
      =>  | entry 1 | entry 2 | entry 3 |
*/

.simple-inline-nav(@separator; @padding) {
  > li {
    display: inline-block;
    padding-right: @padding;

    &:after {
      content: @separator;
      margin-left: @padding;
    }
  }

  > li:last-child {
    padding-right: 0;

    &:after {
        content: "";
    }
  }
}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-first) {
  .simple-inline-nav(@separator; @padding);
  > li:first-child {
    padding-left: @padding;

    &:before {
      content: @separator;
      margin-right: @padding;
    }
  }
}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-last) {
  .simple-inline-nav(@separator; @padding);
  > li:last-child {
    padding-right: @padding;

    &:after {
      content: @separator;
      margin-left: @padding;
    }
  }
}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-both) {
  .simple-inline-nav(@separator; @padding);
  > li:first-child {
    padding-left: @padding;

    &:before {
      content: @separator;
      margin-right: @padding;
    }
  }

  > li:last-child {
    padding-right: @padding;

    &:after {
      content: @separator;
      margin-left: @padding;
    }
  }
}

Simple Inline Nav mixin

Usage :

1. Getting a simple inline nav with a separator between each menu entries :

.simple-inline-nav("|"; 6px);

=> entry 1 | entry 2 | entry 3

2. Getting a simple inline nav with a separator between each entries and a separator before the first entry :

.simple-inline-nav("|"; 6px; add-first);

=> | entry 1 | entry 2 | entry 3

3. Getting a simple inline nav with a separator between each entries and a separator after the last entry :

.simple-inline-nav("|"; 6px; add-last);

=> entry 1 | entry 2 | entry 3 |

4. Getting a simple inline nav with a separator between each entries and separators before and after the first and the last entries :

.simple-inline-nav("|"; 6px; add-both);

=> | entry 1 | entry 2 | entry 3 |

.simple-inline-nav(@separator; @padding) {

> li {

display: inline-block;

padding-right: @padding;

&:after {

content: @separator;

margin-left: @padding;

}

> li:last-child {

padding-right: 0;

&:after {

content: "";

}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-first) {

.simple-inline-nav(@separator; @padding);

> li:first-child {

padding-left: @padding;

&:before {

content: @separator;

margin-right: @padding;

}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-last) {

.simple-inline-nav(@separator; @padding);

> li:last-child {

padding-right: @padding;

&:after {

content: @separator;

margin-left: @padding;

}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-both) {

.simple-inline-nav(@separator; @padding);

> li:first-child {

padding-left: @padding;

&:before {

content: @separator;

margin-right: @padding;

}

> li:last-child {

padding-right: @padding;

&:after {

content: @separator;

margin-left: @padding;

}

Articles récents

Catégories

Archives

Méta

Étiquette : if

[Javascript] Déclaration de condition If dynamique

[JSP] Comment ajouter une classe CSS dans une vue en regard d’une condition

[jQuery] Stocker plusieurs données dans une variable sous forme de tableau et interroger la variable pour savoir si elle contient une donnée ou pas

[jQuery] Compter le nombre d’enfants dans chaque parent et ajouter une classe spécifique en fonction du résultat

[jQuery] Détecter le navigateur et sa version avec le plug-in browser-detection et lancer une fonction avec les conditions if et else

[LESS][Mixin] Une navigation simple en mode « inline » avec les guards

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée :

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire devant la première entrée :

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire derrière la dernière entrée :

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et deux séparateurs supplémentaires placés respectivement devant et derrière la première et la dernière entrée :