février 2016 – devfrontend.info

Monthfévrier 2016

[CSS] Rendre un input type radio ou checkbox invisible mais cliquable

26/02/2016 / admin

Source : make an input invisible but clickable through CSS?

input {
  opacity: 0;
}

input {

opacity: 0;

}

Changer les dimensions d’un input type radio ou checkbox

Sources : How to change the size of the radio button using CSS? et Styling radio buttons with CSS.

input[type=radio] {
  border: 0px;
  width: 100%;
  height: 2em;
}

input[type=radio] {

border: 0px;

width: 100%;

height: 2em;

}

Attention : sous Firefox, l’élément ne grossit pas visuellement, mais la zone cliquable oui 🙂

Cette technique est intéressante si on cherche à cacher un champ radio ou checkbox sous un élément qui le remplacerait visuellement (habillage spécifique de l’UI).

Un polyfill pour émuler les effets de la propriété CSS `pointer-events` sous IE9

La propriété CSS pointer-events n’est pas prise en charge par IE9 (et plus anciens). Un polyfill en jQuery nommé Pointer Events Polyfill (source GitHub) existe et fonctionne très bien.

/*
 * Pointer Events Polyfill: Adds support for the style attribute "pointer-events: none" to browsers without this feature (namely, IE).
 * (c) 2013, Kent Mewhort, licensed under BSD. See LICENSE.txt for details.
 * https://github.com/kmewhort/pointer_events_polyfill
 */

// constructor
function PointerEventsPolyfill(options){
    // set defaults
    this.options = {
        selector: '*',
        mouseEvents: ['click','dblclick','mousedown','mouseup'],
        usePolyfillIf: function(){
            if(navigator.appName == 'Microsoft Internet Explorer')
            {
                var agent = navigator.userAgent;
                if (agent.match(/MSIE ([0-9]{1,}[\.0-9]{0,})/) != null){
                    var version = parseFloat( RegExp.$1 );
                    if(version < 11)
                      return true;
                }
            }
            return false;
        }
    };
    if(options){
        var obj = this;
        jQuery.each(options, function(k,v){
          obj.options[k] = v;
        });
    }

    if(this.options.usePolyfillIf())
      this.register_mouse_events();
}

// singleton initializer
PointerEventsPolyfill.initialize = function(options){
    if(PointerEventsPolyfill.singleton == null)
      PointerEventsPolyfill.singleton = new PointerEventsPolyfill(options);
    return PointerEventsPolyfill.singleton;
};

// handle mouse events w/ support for pointer-events: none
PointerEventsPolyfill.prototype.register_mouse_events = function(){
    // register on all elements (and all future elements) matching the selector
    jQuery(document).on(this.options.mouseEvents.join(" "), this.options.selector, function(e){
       if(jQuery(this).css('pointer-events') == 'none'){
             // peak at the element below
             var origDisplayAttribute = jQuery(this).css('display');
             jQuery(this).css('display','none');

             var underneathElem = document.elementFromPoint(e.clientX, e.clientY);

            if(origDisplayAttribute)
                jQuery(this)
                    .css('display', origDisplayAttribute);
            else
                jQuery(this).css('display','');

             // fire the mouse event on the element below
            e.target = underneathElem;
            jQuery(underneathElem).trigger(e);

            return false;
        }
        return true;
    });
};

* Pointer Events Polyfill: Adds support for the style attribute "pointer-events: none" to browsers without this feature (namely, IE).

* https://github.com/kmewhort/pointer_events_polyfill

// constructor

function PointerEventsPolyfill(options){

// set defaults

this.options = {

selector: '*',

mouseEvents: ['click','dblclick','mousedown','mouseup'],

usePolyfillIf: function(){

if(navigator.appName == 'Microsoft Internet Explorer')

{

var agent = navigator.userAgent;

if (agent.match(/MSIE ([0-9]{1,}[\.0-9]{0,})/) != null){

var version = parseFloat( RegExp.$1 );

if(version < 11)

return true;

}

return false;

}

};

if(options){

var obj = this;

jQuery.each(options, function(k,v){

obj.options[k] = v;

});

}

if(this.options.usePolyfillIf())

this.register_mouse_events();

}

// singleton initializer

PointerEventsPolyfill.initialize = function(options){

if(PointerEventsPolyfill.singleton == null)

PointerEventsPolyfill.singleton = new PointerEventsPolyfill(options);

return PointerEventsPolyfill.singleton;

};

// handle mouse events w/ support for pointer-events: none

PointerEventsPolyfill.prototype.register_mouse_events = function(){

// register on all elements (and all future elements) matching the selector

jQuery(document).on(this.options.mouseEvents.join(" "), this.options.selector, function(e){

if(jQuery(this).css('pointer-events') == 'none'){

// peak at the element below

var origDisplayAttribute = jQuery(this).css('display');

jQuery(this).css('display','none');

var underneathElem = document.elementFromPoint(e.clientX, e.clientY);

if(origDisplayAttribute)

jQuery(this)

.css('display', origDisplayAttribute);

else

jQuery(this).css('display','');

// fire the mouse event on the element below

e.target = underneathElem;

jQuery(underneathElem).trigger(e);

return false;

}

return true;

});

};

[PHP] Les opérateurs de comparaison et les opérateurs logiques

25/02/2016 / admin

Source : Manuel PHP : Opérateurs de comparaison et Manuel PHP : Les opérateurs logiques.

<div tal:attributes="class php:(condition)?'.retourne-true':'.retourne-false'">
<div tal:attributes="class php:(stores)?'results storelocator-search no-background':'no-results storelocator-search'">

1 2	<div tal:attributes="class php:(condition)?'.retourne-true':'.retourne-false'"> <div tal:attributes="class php:(stores)?'results storelocator-search no-background':'no-results storelocator-search'">

<div tal:attributes="class php:(stores)?'results storelocator-search no-background':'no-results storelocator-search'">

1	<div tal:attributes="class php:(stores)?'results storelocator-search no-background':'no-results storelocator-search'">

Faire (stores) c’est le raccourci de (stores == true) et faire (!stores) c’est le raccourci de (stores != true) ou (stores == false).

<div tal:attributes="class php:(stores || noSearch)?'results storelocator-search no-background':'no-results storelocator-search'">

1	<div tal:attributes="class php:(stores \|\| noSearch)?'results storelocator-search no-background':'no-results storelocator-search'">

Si stores répond true OU noSearch répond true, tu auras no-background. Donc si stores répond false et noSearch répond true, tu auras no-background. Il suffit que l’un des deux réponde true.

<div tal:attributes="class php:(stores || !noSearch)?'storelocator-search no-background-image':'storelocator-search'">

1	<div tal:attributes="class php:(stores \|\| !noSearch)?'storelocator-search no-background-image':'storelocator-search'">

En gros, quand tu mets le ! ça veut dire contraire, donc si tu mets !false ça fera true et le premier argument après le ? est exécuté si ce qu’il y a dans les parenthèses vaut true.

[Bootstrap] Fermer les éléments Collapse lorsqu’on clique à l’extérieur des zones

11/02/2016 / admin

Source (partielle) : Bootstrap Close collapse on outside click snippet – Bootply.

Une partie de la solution a été trouvée en tapant les mots-clés suivants dans Google : bootstrap collapse affix close when click outside.

$(document).on('click',function(){
  $('.collapse').collapse('hide');
});

$(document).on('click',function(){

$('.collapse').collapse('hide');

});

Eviter qu’au clic sur une zone ouverte, cette dernière se referme

Utile lorsque la zone ouverte contient des éléments d’action comme des liens, des cases à cocher, etc… On ne voudrait pas refermer la zone lorsque l’utilisateur est en-train de remplir un formulaire par exemple.

var targetElements = $('#zoneCollapse01, #zoneCollapse02, ...');

targetElements.on('click', function(event){
  event.stopPropagation();
});

var targetElements = $('#zoneCollapse01, #zoneCollapse02, ...');

targetElements.on('click', function(event){

event.stopPropagation();

});

[Bootstrap] Composant Collapse : fermer l’élément ouvert au click sur un autre élément

10/02/2016 / admin

Source : Bootstrap collapsed div not closing when clicking a new link for another toggle.

Nativement, le composant Collapse de Bootstrap ne permet pas de fermer l’élément ouvert au click sur un autre élément. Il se contente d’ouvrir et de fermer l’élément lié au lien ou au bouton au click sur celui-ci.

Utiliser ce code :

$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });

1	$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });

You can change .nav a and .navbar-to-collapse with your desired variable or add to them more variable simply by using < , > between each variable.

More explanation :

.nav a is the variable that you target by your click and in this example it’s a link under a nav class, you can modify it to target a link using ID not class $('#nav a')
.navbar-to-collapse is the value for data-target=".navbar-to-collapse" and you can modify it to the data-target you use.

So a complete example (for illustrating ) should be like that:

<header><!-- /Navigation-Bar Container-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-to-collapse">
        <span class="sr-only">Toggle navigation</span>
        <i class="icon-menu"></i>
        </button>
    </div>

    <div class="collapse navbar-collapse navbar-to-collapse">
        <ul class="nav">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
  </div><!-- /.navbar-collapse -->
</div>
</nav>

<span class="sr-only">Toggle navigation</span>

</button>

</div>

</ul>

</div>

</div>

</nav>

$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });

1	$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });

[jQuery] Utiliser la pseudo-classe CSS nth-child avec une valeur récupérée d’une variable

02/02/2016 / admin

Source : Demo jsFiddle.net.

.myClass:nth-last-child(-n+4){} nous donne en jQuery :

var myVariable = 4;
$('.myClass:nth-last-child(-n+'+myVariable+')').doSomething();

1 2	var myVariable = 4; $('.myClass:nth-last-child(-n+'+myVariable+')').doSomething();

(function(){
  var getColumnsCount = $('.container').attr('data-columns');
  $('.list .item:nth-last-child(-n+'+getColumnsCount+')').addClass('emphasis');
})();

(function(){

var getColumnsCount = $('.container').attr('data-columns');

$('.list .item:nth-last-child(-n+'+getColumnsCount+')').addClass('emphasis');

})();

[jQuery] Sélectionner les x derniers éléments ayant une classe spécifique avec les méthodes Filter et Slice

02/02/2016 / admin

Source : Démo jsFiddle.net.

L’intérêt d’utiliser les méthodes .filter() ou .slice() réside dans le fait qu’elles sont totalement indépendantes des concepts HTML et CSS d’imbrication ou d’héritage parents > enfants.
En effet, si on utilisait les pseudo-sélecteurs :nth-child ou :nth-of-type, on ciblerait les deux derniers <li> de chaque <ul>.Or ce que nous recherchons ici, c’est cibler les 2 derniers éléments de .container qui possèdent la classe .list-item. Et ce peu importe leur place dans l’arbre généalogique du container.

[jQuery] Sélectionner les x derniers éléments ayant une classe spécifique avec les méthodes Filter et Slice

(function(){
  var listItems = $('.container .list-item');

  // cibler les 2 derniers avec la méthode .filter()
  var getItemsCount = listItems.length;
  var getLastTwo = [getItemsCount - 1, getItemsCount - 2];
  
  listItems.filter(function(index, el){
    return $.inArray(index, getLastTwo) > -1;
  }).addClass('last-two');
  
  // cibler du 5ème au 9ème avec la méthode .slice()
  listItems.slice(5, 9).addClass('five-to-nine');
})();

(function(){

var listItems = $('.container .list-item');

// cibler les 2 derniers avec la méthode .filter()

var getItemsCount = listItems.length;

var getLastTwo = [getItemsCount - 1, getItemsCount - 2];

listItems.filter(function(index, el){

return $.inArray(index, getLastTwo) > -1;

}).addClass('last-two');

// cibler du 5ème au 9ème avec la méthode .slice()

listItems.slice(5, 9).addClass('five-to-nine');

})();

<div class="container">
  <ul class="list">
    <li class="list-item">list item</li>
    <li class="list-item">list item</li>
    <li class="list-item">list item</li>
    <li class="list-item">list item</li>
  </ul>
  <ul class="list">
    <li class="list-item">list item</li>
    <li class="list-item">list item</li>
    <li class="list-item">list item</li>
    <li class="list-item">list item</li>
  </ul>
  <ul class="list">
    <li class="list-item">list item</li>
    <li class="list-item">list item</li>
    <li class="list-item">list item</li>
    <li class="list-item">list item</li>
  </ul>
  <ul class="list">
    <li class="list-item">list item</li>
    <li class="list-item">list item</li>
    <li class="list-item">list item</li>
    <li class="list-item">list item</li>
  </ul>
  <ul class="list">
    <li class="list-item">list item</li>
  </ul>  
</div>

</ul>

</ul>

</ul>

</ul>

</ul>

</div>

.last-two{
  border: 1px solid tomato;
}
.five-to-nine{
  background: pink;
}

.last-two{

border: 1px solid tomato;

}

.five-to-nine{

background: pink;

}

[jQuery] Les opérateurs de comparaison

01/02/2016 / admin

Source : Apprendre jQuery > Les conditions > Les opérateurs de comparaison.

On commence par créer une variable qui récupère une valeur correspondant au nombre de <li> enfants immédiats contenus dans ul.comment-list :

var reviewCount = jQuery('ul.comment-list > li').length;

1	var reviewCount = jQuery('ul.comment-list > li').length;

Opérateur d’égalité

Compare deux valeurs et vérifie leur égalité. Si la valeur de la variable reviewCount est strictement égale à 1, alors ajoute la classe hello.

if (reviewCount == 1) {
  jQuery('ul.comment-list').addClass('hello');
}

if (reviewCount == 1) {

jQuery('ul.comment-list').addClass('hello');

}

Opérateurs	Désignation	Effet	Exemple	Résultat
==	opérateur d’égalité	Compare deux valeurs et vérifie leur égalité	x == 3	Retourne True si X est égal à 3, sinon False
!=	opérateur de différence	Vérifie qu’une variable est différente d’une valeur	x != 3	Retourne 1 si X est différent de 3, sinon 0
*===*	opérateur d’identité	Vérifie l’identité de valeur et de type de deux valeurs	a === b	Retourne True si a est égal à b et est de même type, sinon False
!==	opérateur de non identité	Vérifie la non identité de valeur et de type de deux valeurs, c’est-à-dire si les deux valeurs n’ont pas la même valeur ou bien sont de types différents.	a !== b	Retourne True si a est différent de b ou bien est de type différent, sinon False
>	opérateur de supériorité stricte	Vérifie qu’une variable est strictement supérieure à une valeur	x > 3	Retourne True si X est supérieur à 3, sinon False
>=	opérateur de supériorité	Vérifie qu’une variable est supérieure ou égale à une valeur	x >= 3	Retourne True si X est supérieur ou égal à 3, sinon False
<	opérateur d’infériorité stricte	Vérifie qu’une variable est strictement inférieure à une valeur	x < 3	Retourne True si X est inférieur à 3, sinon False
<=	opérateur d’infériorité	Vérifie qu’une variable est inférieure ou égale à une valeur	x <= 3	Retourne True si X est inférieur ou égale à 3, sinon False

Theme by Anders Norén — Up ↑

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Archives

Méta

Monthfévrier 2016

[CSS] Rendre un input type radio ou checkbox invisible mais cliquable

Changer les dimensions d’un input type radio ou checkbox

Un polyfill pour émuler les effets de la propriété CSS `pointer-events` sous IE9

[PHP] Les opérateurs de comparaison et les opérateurs logiques

[Bootstrap] Fermer les éléments Collapse lorsqu’on clique à l’extérieur des zones

Eviter qu’au clic sur une zone ouverte, cette dernière se referme

[Bootstrap] Composant Collapse : fermer l’élément ouvert au click sur un autre élément

[jQuery] Utiliser la pseudo-classe CSS nth-child avec une valeur récupérée d’une variable

[jQuery] Sélectionner les x derniers éléments ayant une classe spécifique avec les méthodes Filter et Slice

[jQuery] Les opérateurs de comparaison

Opérateur d’égalité

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

Monthfévrier 2016

Changer les dimensions d’un input type radio ou checkbox

Un polyfill pour émuler les effets de la propriété CSS pointer-events sous IE9

Eviter qu’au clic sur une zone ouverte, cette dernière se referme

Opérateur d’égalité

Un polyfill pour émuler les effets de la propriété CSS `pointer-events` sous IE9