février 2019

[CSS] Du random en CSS avec :nth-child

par admin
27/02/201927/02/2019

Source: https://www.lottejackson.com/learning/nth-child-cicada-principle. Version PDF de l’article.

.Item:nth-child(2n+1) .Item-image {…} 
.Item:nth-child(3n+2) .Item-image {…} 
.Item:nth-child(5n+3) .Item-image {…} 
.Item:nth-child(7n+5) .Item-image {…} 
.Item:nth-child(11n+7) .Item-image {…}

.Item:nth-child(2n+1) .Item-image {…}

.Item:nth-child(3n+2) .Item-image {…}

.Item:nth-child(5n+3) .Item-image {…}

.Item:nth-child(7n+5) .Item-image {…}

.Item:nth-child(11n+7) .Item-image {…}

[jQuery] Bootstrap 3 et affix ne conserve pas la pleine largeur d’un élément si j’utilise les classes de la grille

par admin
19/02/2019

        <div id="pageStickyHeader" class="row page-StickyHeader">
          <div class="col-lg-2">
            <img src="image/logoCALL-new.jpg" alt="" class="img-responsive" />
          </div>
          <div class="col-lg-8">
            <form class="form-inline">
              <label for="input-id" class="sr-only">Rechercher un produit</label>
              <input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title="" placeholder="Rechercher un produit">
              <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i><span class="sr-only">Rechercher</span></button>
            </form>
          </div>
          <div class="col-lg-2">Favoris | Panier</div>
        </div>

</div>

<label for="input-id" class="sr-only">Rechercher un produit</label>

<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i><span class="sr-only">Rechercher</span></button>

</form>

</div>

<div class="col-lg-2">Favoris | Panier</div>

</div>

  // Partie sticky du bandeau
  let $pageStickyHeader = $('#pageStickyHeader');
  let $pageStickyHeaderWidth = $('#pageStickyHeader').width();

  $pageStickyHeader
    .affix({
      offset: {
        top: 100,
        bottom: function () {
          return (this.bottom = $('#pageFooter').outerHeight(true))
        }
      }
    })
    .on('affix.bs.affix', function() {
      $(this).css('width', $pageStickyHeaderWidth);
    })
    .on('affix-top.bs.affix', function() {
      $(this).removeAttr('style');
    });
    // Fin: Partie sticky du bandeau

// Partie sticky du bandeau

let $pageStickyHeader = $('#pageStickyHeader');

let $pageStickyHeaderWidth = $('#pageStickyHeader').width();

$pageStickyHeader

.affix({

offset: {

top: 100,

bottom: function () {

return (this.bottom = $('#pageFooter').outerHeight(true))

}

})

.on('affix.bs.affix', function() {

$(this).css('width', $pageStickyHeaderWidth);

})

.on('affix-top.bs.affix', function() {

$(this).removeAttr('style');

});

// Fin: Partie sticky du bandeau

.page-StickyHeader.affix {
  top: 0px;
  z-index: 100;
  background: #fff;
}

.page-StickyHeader.affix {

top: 0px;

z-index: 100;

background: #fff;

}

[javascript] Les bases: les opérateurs

par admin
13/02/201914/02/2019

Ressources: Précédence des opérateurs sur MDN WebDocs (ordre de priorité d’exécution des opérateurs) Exemple d’opérateurs: delete, &&, =, +, !, *, ||, typeof Jargon a… Lire la suite »[javascript] Les bases: les opérateurs

[javascript] Les bases: les fonctions

par admin
12/02/201913/02/2019

let a = 5;
let b = 3;

function sum(a , b) {
    let c = a + b;
    console.log(c);
}

sum(a, b); //8

a = 8;
b = 12;

sum(a, b); //20

let a = 5;

let b = 3;

function sum(a , b) {

let c = a + b;

console.log(c);

}

sum(a, b); //8

a = 8;

b = 12;

sum(a, b); //20

function myFn(a, b) {
    let c;
    a = a + 1;
    c = a + b;
    return c;
}

console.dir(myFn);
console.log(myFn(5, 10)); // 16
console.log(myFn(a)); // Uncaught ReferenceError: a is not defined

function myFn(a, b) {

let c;

a = a + 1;

c = a + b;

return c;

}

console.dir(myFn);

console.log(myFn(5, 10)); // 16

console.log(myFn(a)); // Uncaught ReferenceError: a is not defined

Scope

function myFunction1(a, b) {
	console.log(a, b);
}

function myFunction2(a, b) {
	console.log(a, b);
}

const a = true;
const b = null;

myFunction1(2, 3); // 2, 3
myFunction2(4, 5); // 4, 5
console.log(a, b); // true, null

function myFunction1(a, b) {

console.log(a, b);

}

function myFunction2(a, b) {

console.log(a, b);

}

const a = true;

const b = null;

myFunction1(2, 3); // 2, 3

myFunction2(4, 5); // 4, 5

console.log(a, b); // true, null

return

function sum(a, b) {
	return a + b;
}

sum(10, 5); // 15
sum("abc", 2); // "abc2"
sum(); // NaN (Not a Number)

function sum(a, b) {

return a + b;

}

sum(10, 5); // 15

sum("abc", 2); // "abc2"

sum(); // NaN (Not a Number)

function myFunction(a) {
	console.log(a);
	return a; // function stops HERE
	console.log(a);
	const c = 10;
	console.log(c); // code NOT evaluated
}

myFunction(10);

function myFunction(a) {

console.log(a);

return a; // function stops HERE

console.log(a);

const c = 10;

console.log(c); // code NOT evaluated

}

myFunction(10);

function mult(a, b, c) {
	const result = a * b * c;
	console.log(result);
}

mult(0,3,5); // 0
mult(2,3,5); // 30
mult(2,3,"abc"); // NaN
mult(); // NaN

console.log(mult(2,3,5)); // 30 is printed inside of the function and function returns "undefined"

function mult(a, b, c) {

const result = a * b * c;

console.log(result);

}

mult(0,3,5); // 0

mult(2,3,5); // 30

mult(2,3,"abc"); // NaN

mult(); // NaN

console.log(mult(2,3,5)); // 30 is printed inside of the function and function returns "undefined"

function concatenatedStrings(str1, str2) {
	return str1 + " " + str2;
}

const str3 = concatenatedStrings("Hello", "World");
console.log(str3); // Hello World

function concatenatedStrings(str1, str2) {

return str1 + " " + str2;

}

const str3 = concatenatedStrings("Hello", "World");

console.log(str3); // Hello World

function outerFunction(a, b) {
	function innerFunction(c) {
		return c * c;
	}
	const sum = a + b;
	const result = innerFunction(sum);

	console.log(result);
}

outerFunction(5, 2); // 49

// ...which can be simplified as:
function outerFunction(a, b) {
	function innerFunction(c) {
		return c * c;
	}
	console.log(innerFunction(a + b));
}

outerFunction(5, 2); // 49

function outerFunction(a, b) {

function innerFunction(c) {

return c * c;

}

const sum = a + b;

const result = innerFunction(sum);

console.log(result);

}

outerFunction(5, 2); // 49

// ...which can be simplified as:

function outerFunction(a, b) {

function innerFunction(c) {

return c * c;

}

console.log(innerFunction(a + b));

}

outerFunction(5, 2); // 49

Fonctions anonymes Function expression assigned to the variable: => variable à laquelle est assignée une… Lire la suite »[javascript] Les bases: les fonctions

[JavaScript] UMD (Universal Module Definition) des modules JS qui s’exécutent partout!

par admin
11/02/201911/02/2019

Sources: Introduction: UMD: JavaScript modules that run anywhere par Bob Yexley. Version PDF. Explication: Writing Modular JavaScript With AMD, CommonJS & ES Harmony par Addy… Lire la suite »[JavaScript] UMD (Universal Module Definition) des modules JS qui s’exécutent partout!