Mois : juin 2018

[jQuery] Eviter le scroll de la page lorsqu’on touche un élément en position absolute en sur-impression

26/06/2018 / admin

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: http://jsfiddle.net/R9Ut6/.

ATTENTION: contrairement à la demo, dans mon cas, ça a fonctionné en mettant la propriété overflow-y à hidden sur .scrollDiv.

<div class='pageScroller'></div>
Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>

<div class='scrollDiv'>
    DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>
    
</div>

Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>

Content Content Content Content Content Content Content Content Content Content Content Content Content

DivConten DivConten DivConten DivConten DivConten DivConten DivConten DivConten DivConten DivConten DivConten DivConten DivConten DivConten

</div>

Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content

html,body{height:100%}

.scrollDiv{
    width:100%;
    height:200px;
    overflow-y:scroll;
    border:solid 1px #f00;
    -webkit-overflow-scrolling: touch;
}
.pageScroller{
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:50%;
    z-index: 1;
    background-color: rgba(0,0,0,0.7);
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
}

html,body{height:100%}

.scrollDiv{

width:100%;

height:200px;

overflow-y:scroll;

border:solid 1px #f00;

-webkit-overflow-scrolling: touch;

}

.pageScroller{

position:absolute;

right:0;

top:0;

bottom:0;

width:50%;

z-index: 1;

background-color: rgba(0,0,0,0.7);

overflow-y:scroll;

-webkit-overflow-scrolling: touch;

}

$( '.scrollDiv' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
    var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;

    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
});

$( '.scrollDiv' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {

var e0 = e.originalEvent,

delta = e0.wheelDelta || -e0.detail;

this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;

e.preventDefault();

});

[jQuery] Alimenter un tableau à partir d’une boucle .each() avec .push() et générer une liste UL LI avec les données stockées dans celui-ci

22/06/2018 / admin

Sources: How to create an array from .each loop with jQuery et How to generate UL Li list from string array using jquery?.

      function addHeaderTopRowLinksToMegadropdownXS() {
        var headerHorizontalNav01 = [];
        $cdDropdownContent = $('ul.cd-dropdown-content', '#xsMegaDropdown');

        $('.yCmsComponent', '#page-header').each(function(){
            headerHorizontalNav01.push($(this).html());
        });

        $.each(headerHorizontalNav01, function(i) {
            $('<li class="has-children">'+headerHorizontalNav01[i]+'</li>')
                .appendTo($cdDropdownContent);
        });
      }

function addHeaderTopRowLinksToMegadropdownXS() {

var headerHorizontalNav01 = [];

$cdDropdownContent = $('ul.cd-dropdown-content', '#xsMegaDropdown');

$('.yCmsComponent', '#page-header').each(function(){

headerHorizontalNav01.push($(this).html());

});

$.each(headerHorizontalNav01, function(i) {

$('<li class="has-children">'+headerHorizontalNav01[i]+'</li>')

.appendTo($cdDropdownContent);

});

}

[LESS] Un mixin pour boucler dans un tableau contenant des valeurs allant par pairs

12/06/2018 / admin

Attention: le plugin for.less utilisé dans l’exemple ci-dessous est déprécié selon un commenatire laissé dans le code source de l’auteur. Il faut désormais utiliser List/Array manipulation for Less.

Source: Loop over an array of name value pairs in LESS et mixin sous Git.

CSS color codes & names (tableaux de correspondances Nom de couleur > Code hexadécimal).

Mixin LESS (ne pas oublier d’inclure le mixin for.less) :

.Couleur {
  .facet-mark {
    &:before {
      display: inline-block;
      vertical-align: sub;
      content: "" !important;
      width: 18px;
      height: 18px;
      border: 1px solid #ededed;
    }
  }
  @facetColors: Beige #DEB887, 
                Blanc #ffffff, 
                Bleu #00b0f0, 
                Gris #777777, 
                Jaune #ffe209, 
                Marron #974706, 
                Multicolore linear-gradient(to right, #9400D3 0%,#4B0082 (100%/7)*2,#0000FF (100%/7)*3,#00FF00 (100%/7)*4,#FFFF00 (100%/7)*5, #FF7F00 (100%/7)*6,#FF0000 100%), 
                Noir #000000, 
                Orange #fb6e05, 
                Rose #ff338a, 
                Rouge #ff0000, 
                Vert #00b050, 
                Violet #800080;
  .for(@facetColors); .-each(@value) {
      @name:  extract(@value, 1);
      .@{name} {
        .facet-mark {
          &:before {
            background: extract(@value, 2);
          }
        }
      }
  }
}

.Couleur {

.facet-mark {

&:before {

display: inline-block;

vertical-align: sub;

content: "" !important;

width: 18px;

height: 18px;

border: 1px solid #ededed;

}

@facetColors: Beige #DEB887,

Blanc #ffffff,

Bleu #00b0f0,

Gris #777777,

Jaune #ffe209,

Marron #974706,

Multicolore linear-gradient(to right, #9400D3 0%,#4B0082 (100%/7)*2,#0000FF (100%/7)*3,#00FF00 (100%/7)*4,#FFFF00 (100%/7)*5, #FF7F00 (100%/7)*6,#FF0000 100%),

Noir #000000,

Orange #fb6e05,

Rose #ff338a,

Rouge #ff0000,

Vert #00b050,

Violet #800080;

.for(@facetColors); .-each(@value) {

@name: extract(@value, 1);

.@{name} {

.facet-mark {

&:before {

background: extract(@value, 2);

}

Rendu CSS :

.Couleur .facet-mark:before {
  display: inline-block;
  vertical-align: sub;
  content: "" !important;
  width: 18px;
  height: 18px;
  border: 1px solid #ededed;
}
.Couleur .Beige .facet-mark:before {
  background: #000;
}
.Couleur .Blanc .facet-mark:before {
  background: #fff;
}
.Couleur .Bleu .facet-mark:before {
  background: #00b0f0;
}
.Couleur .Gris .facet-mark:before {
  background: #777;
}
.Couleur .Jaune .facet-mark:before {
  background: #ffe209;
}
.Couleur .Marron .facet-mark:before {
  background: #974706;
}
.Couleur .Multicolore .facet-mark:before {
  background: #000;
}
.Couleur .Noir .facet-mark:before {
  background: #000;
}
.Couleur .Orange .facet-mark:before {
  background: #fb6e05;
}
.Couleur .Rose .facet-mark:before {
  background: #ff338a;
}
.Couleur .Rouge .facet-mark:before {
  background: red;
}
.Couleur .Vert .facet-mark:before {
  background: #00b050;
}
.Couleur .Violet .facet-mark:before {
  background: #000;
}

.Couleur .facet-mark:before {

display: inline-block;

vertical-align: sub;

content: "" !important;

width: 18px;

height: 18px;

border: 1px solid #ededed;

}

.Couleur .Beige .facet-mark:before {

background: #000;

}

.Couleur .Blanc .facet-mark:before {

background: #fff;

}

.Couleur .Bleu .facet-mark:before {

background: #00b0f0;

}

.Couleur .Gris .facet-mark:before {

background: #777;

}

.Couleur .Jaune .facet-mark:before {

background: #ffe209;

}

.Couleur .Marron .facet-mark:before {

background: #974706;

}

.Couleur .Multicolore .facet-mark:before {

background: #000;

}

.Couleur .Noir .facet-mark:before {

background: #000;

}

.Couleur .Orange .facet-mark:before {

background: #fb6e05;

}

.Couleur .Rose .facet-mark:before {

background: #ff338a;

}

.Couleur .Rouge .facet-mark:before {

background: red;

}

.Couleur .Vert .facet-mark:before {

background: #00b050;

}

.Couleur .Violet .facet-mark:before {

background: #000;

}

[jQuery] Astuces de manipulation du widget Autocomplete de jQuery UI

07/06/2018 / admin

Modifier le rendu HTML avec les fonctions natives _renderMenu and _renderItem

Source: Quick example of multi-column results with jQueryUI’s new Autocomplete?

I ended up manually overriding the _renderMenu and _renderItem functions after all. Works like a charm so far, and was actually very easy to do. I was hoping for a « per-instance » solution, but we’ll burn that bridge when we come to it. Here’s what it came to, and thanks again!

$.ui.autocomplete.prototype._renderMenu = function(ul, items) {
  var self = this;
  ul.append("<table><thead><tr><th>ID#</th><th>Name</th><th>Cool&nbsp;Points</th></tr></thead><tbody></tbody></table>");
  $.each( items, function( index, item ) {
    self._renderItem( ul.find("table tbody"), item );
  });
};

$.ui.autocomplete.prototype._renderItem = function(table, item) {
  return $( "<tr></tr>" )
    .data( "item.autocomplete", item )
    .append( "<td>"+item.id+"</td>"+"<td>"+item.value+"</td>"+"<td>"+item.cp+"</td>" )
    .appendTo( table );
};

$("#search").autocomplete({
  source: [
    {id:1,value:"Thomas",cp:134},
    {id:65,value:"Richard",cp:1743},
    {id:235,value:"Harold",cp:7342},
    {id:982,value:"Nina",cp:21843},
    {id:724,value:"Pinta",cp:35},
    {id:78,value:"Santa Maria",cp:787}],
  minLength: 1
});

$.ui.autocomplete.prototype._renderMenu = function(ul, items) {

var self = this;

ul.append("<table><thead><tr><th>ID#</th><th>Name</th><th>Cool Points</th></tr></thead><tbody></tbody></table>");

$.each( items, function( index, item ) {

self._renderItem( ul.find("table tbody"), item );

});

};

$.ui.autocomplete.prototype._renderItem = function(table, item) {

return $( "<tr></tr>" )

.data( "item.autocomplete", item )

.append( "<td>"+item.id+"</td>"+"<td>"+item.value+"</td>"+"<td>"+item.cp+"</td>" )

.appendTo( table );

};

$("#search").autocomplete({

source: [

{id:1,value:"Thomas",cp:134},

{id:65,value:"Richard",cp:1743},

{id:235,value:"Harold",cp:7342},

{id:982,value:"Nina",cp:21843},

{id:724,value:"Pinta",cp:35},

{id:78,value:"Santa Maria",cp:787}],

minLength: 1

});

Annuler les styles de .ui-menu pour .ui-autocomplete

Cette astuce fonctionne pour n’importe quel widget issu de jQuery UI.

.ui-autocomplete.ui-menu {
  .ui-menu-item {
    padding: 0;
    list-style-image: none;
  }
  .ui-menu-divider {
    margin: 0;
    border-width: 0;
  }
  .ui-state-focus,
  .ui-state-active {
    margin: 0;
  }
}

.ui-autocomplete.ui-menu {

.ui-menu-item {

padding: 0;

list-style-image: none;

}

.ui-menu-divider {

margin: 0;

border-width: 0;

}

.ui-state-focus,

.ui-state-active {

margin: 0;

}

jQuery Autocomplete with custom renderer throwing “Cannot read property ‘value’ of undefined”

Source : jQuery Autocomplete with custom renderer throwing “Cannot read property ‘value’ of undefined”

[javaScript] Vérifier qu’une chaîne de caractères contient un texte donné avec la méthode indexOf()

06/06/2018 / admin

Source: Check if a string has a certain piece of text.

var test = 'Hello World';
if( test.indexOf('World') >= 0){
  // Found world
}

var test = 'Hello World';

if( test.indexOf('World') >= 0){

// Found world

}

[Foundation] Démarrez vos développements front-end avec un starter kit incluant le moteur de templates Twig (Twig.js) et le framework JavaScript Vue.js

04/06/2018 / admin

Source: Foundation’s ZURB stack including Twig (Twig.js) template engine and Vue.js progressive JS framework by Frank LANG on GitHub.

Vue.js et Foundation 6 for Sites

Vue + Foundation. This is a demo integration of Foundation for Sites 6.3 in a VueJS 2.2 single-page application.
Setting up Vue 2 and Foundation 6 et version PDF pour la postérité.

[NPM] vue2-foundation – Vue 2.x component wrappers for Foundation 6 widgets. Sources du projet vue2-foundation sous GitHub.

Articles récents

Catégories

Archives

Méta

Mois : juin 2018

[jQuery] Eviter le scroll de la page lorsqu’on touche un élément en position absolute en sur-impression

[jQuery] Alimenter un tableau à partir d’une boucle .each() avec .push() et générer une liste UL LI avec les données stockées dans celui-ci

[LESS] Un mixin pour boucler dans un tableau contenant des valeurs allant par pairs

[jQuery] Astuces de manipulation du widget Autocomplete de jQuery UI

Modifier le rendu HTML avec les fonctions natives _renderMenu and _renderItem

Annuler les styles de .ui-menu pour .ui-autocomplete

jQuery Autocomplete with custom renderer throwing “Cannot read property ‘value’ of undefined”

[javaScript] Vérifier qu’une chaîne de caractères contient un texte donné avec la méthode indexOf()

[Foundation] Démarrez vos développements front-end avec un starter kit incluant le moteur de templates Twig (Twig.js) et le framework JavaScript Vue.js

Vue.js et Foundation 6 for Sites

Icônes SVG

Icônes SVG avec Twig

Icônes SVG avec Vue.js