Mois : avril 2018

[SASS][LESS] Remonter le DOM en CSS en utilisant l’esperluette

30/04/2018 / admin

.js-quick-view {
  ul.rollover-content.top.in li.rollover-item:first-child & {
    border: 4px solid red !important;
  }
}

.js-quick-view {

ul.rollover-content.top.in li.rollover-item:first-child & {

border: 4px solid red !important;

}

[jQuery] Redimensionner automatiquement un element HTML Select en fonction de la largeur de l’Option sélectionnée

26/04/2018 / admin

Source: Auto resizing the SELECT element according to selected OPTION’s width. Voir le jsFiddle ici.

<select id="resizing_select">
 <option>All</option>
 <option>Longer</option>
 <option>A very very long string...</option>
</select>
<select id="width_tmp_select">
 <option id="width_tmp_option"></option>
</select>

<option>Longer</option>

<option>A very very long string...</option>

</select>

</select>

$(document).ready(function() {
 $('#resizing_select').change(function(){
    $("#width_tmp_option").html($('#resizing_select option:selected').text());
    $(this).width($("#width_tmp_select").width());  
 });
});

$(document).ready(function() {

$('#resizing_select').change(function(){

$("#width_tmp_option").html($('#resizing_select option:selected').text());

$(this).width($("#width_tmp_select").width());

});

#resizing_select {
 width: 50px;
} 
 
#width_tmp_select{
 display : none;
}

#resizing_select {

width: 50px;

}

#width_tmp_select{

display : none;

}

Cas particulier: la page se recharge après sélection

Source: Persist variables between page loads.

    ACC.naosPagination.resizeSelectOnTheFly();

    var sortOptionsWidth = sessionStorage.getItem('sortOptionsWidth');
    $('#sortOptions1').width(sortOptionsWidth);
    sessionStorage.removeItem('sortOptionsWidth');


    resizeSelectOnTheFly: function(){
        $('#resizing_select').change(function(){
            $("#width_tmp_option").html($('#resizing_select option:selected').text());
            $(this).width($("#width_tmp_select").width());
            var getWidth = ($('#resizing_select').width()) + 2;

            sessionStorage.setItem('sortOptionsWidth', getWidth+'px');
        });
    }

ACC.naosPagination.resizeSelectOnTheFly();

var sortOptionsWidth = sessionStorage.getItem('sortOptionsWidth');

$('#sortOptions1').width(sortOptionsWidth);

sessionStorage.removeItem('sortOptionsWidth');

resizeSelectOnTheFly: function(){

$('#resizing_select').change(function(){

$("#width_tmp_option").html($('#resizing_select option:selected').text());

$(this).width($("#width_tmp_select").width());

var getWidth = ($('#resizing_select').width()) + 2;

sessionStorage.setItem('sortOptionsWidth', getWidth+'px');

});

}

[jQuery] Vérifier en cours de saisie en live si un input[type= »text »] contient du contenu avec l’événement Input et la méthode Val

24/04/2018 / admin

Dans l’exemple qui suit, on procède à cette vérification pour désactiver une fonctionnalité de Collapse (Bootstrap) des champs de formulaires si du texte est saisi.

    <div class="form-group address-extra-info-trigger">
        <span class="control-label">
            <spring:theme code="address.line2"/>
        </span>
        <button id="triggerBillingAddressExtraInfo" class="btn-naked" type="button" data-toggle="collapse" data-target="#collapseBillingAddressExtraInfo" aria-expanded="false" aria-controls="collapseBillingAddressExtraInfo">
            <span class="show-extra-fields">
                <i class="glyphicon glyphicon-chevron-down"></i> <spring:theme code="naos.show"/></span>
            <span class="hide-extra-fields">
                <i class="glyphicon glyphicon-chevron-up"></i> <spring:theme code="naos.hide"/></span>
        </button>
    </div>

    <div class="collapse address-extra-info-fields" id="collapseBillingAddressExtraInfo">
        <input type="text" id="one" />
        <input type="text" id="two" />
        <input type="text" id="three" />
        [...]
    </div>

<spring:theme code="address.line2"/>

</span>

</button>

</div>

[...]

</div>

Si un seul champ à vérifier:

Si le champ qui a le focus n’est pas vide, on agit sur #triggerBillingAddressExtraInfo en ajoutant un style inline pointer-events: none; (qui désactive la possibilité de cliquer sur l’élément).

    $('input').on('input', function(e){
        var toto = $(this).val();
        console.log(toto);

        if(!toto == ''){
            $('#triggerBillingAddressExtraInfo').css('pointer-events', 'none');
        }
        else{
            $('#triggerBillingAddressExtraInfo').removeAttr('style');
        }
    });

$('input').on('input', function(e){

var toto = $(this).val();

console.log(toto);

if(!toto == ''){

$('#triggerBillingAddressExtraInfo').css('pointer-events', 'none');

}

else{

$('#triggerBillingAddressExtraInfo').removeAttr('style');

}

});

Si plusieurs champs à vérifier:

Sources: jQuery check if any text input has value et Detect changed input text box.

On ajoute la condition: si tous les champs au sein de #collapseBillingAddressExtraInfo sont vides, on retire le style inline pointer-events: none;.

    function hasValue(elem) {
        return $(elem).filter(function() { return $(this).val(); }).length > 0;
    }

    $('input', '#collapseBillingAddressExtraInfo').on('input', function(e){
        var toto = $(this).val();
        var titi = hasValue('#collapseBillingAddressExtraInfo input');
        // console.log(toto);
        // console.log(titi);

        if(!toto == ''){
            $('#triggerBillingAddressExtraInfo').css('pointer-events', 'none');
        }
        else if(!titi == true) {
            $('#triggerBillingAddressExtraInfo').removeAttr('style');
        }
    });

function hasValue(elem) {

return $(elem).filter(function() { return $(this).val(); }).length > 0;

}

$('input', '#collapseBillingAddressExtraInfo').on('input', function(e){

var toto = $(this).val();

var titi = hasValue('#collapseBillingAddressExtraInfo input');

// console.log(toto);

// console.log(titi);

if(!toto == ''){

$('#triggerBillingAddressExtraInfo').css('pointer-events', 'none');

}

else if(!titi == true) {

$('#triggerBillingAddressExtraInfo').removeAttr('style');

}

});

Mieux, avec deux fonctions

    function hasValue(elem) {
        return $(elem).filter(function() { return $(this).val(); }).length > 0;
    }

    function deactivateCollapse(collapseElement, triggerElement){
        $('input', collapseElement).on('input', function(e){
            var focusedInputValue = $(this).val();
            var inScopeInputsValues = hasValue(collapseElement+' input');

            if(!focusedInputValue == ''){
                $(triggerElement).css('pointer-events', 'none');
            }
            else if(!inScopeInputsValues == true) {
                $(triggerElement).removeAttr('style');
            }
        });
    }

    deactivateCollapse('#collapseBillingAddressExtraInfo', '#triggerBillingAddressExtraInfo');
    deactivateCollapse('#collapseDeliveryAddressExtraInfo', '#triggerDeliveryAddressExtraInfo');

function hasValue(elem) {

return $(elem).filter(function() { return $(this).val(); }).length > 0;

}

function deactivateCollapse(collapseElement, triggerElement){

$('input', collapseElement).on('input', function(e){

var focusedInputValue = $(this).val();

var inScopeInputsValues = hasValue(collapseElement+' input');

if(!focusedInputValue == ''){

$(triggerElement).css('pointer-events', 'none');

}

else if(!inScopeInputsValues == true) {

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

}

});

}

deactivateCollapse('#collapseBillingAddressExtraInfo', '#triggerBillingAddressExtraInfo');

deactivateCollapse('#collapseDeliveryAddressExtraInfo', '#triggerDeliveryAddressExtraInfo');

[Bootstrap 3 et 4] Composant Collapse, la classe collapsed n’apparaît qu’après un premier affichage/masquage des éléments

24/04/2018 / admin

Si toi aussi tu travailles encore avec Bootstrap en 2018 (ou +), tu t’es forcément retrouvé face à ce problème qui existait dans la version 3 de Bootstrap et est toujours présent dans la version 4: la classe collapsed sur le lien ou le bouton qui va permettre d’afficher/masquer des éléments n’apparaît qu’après un premier affichage/masquage de ces dits éléments.

Fais le test sur les exemples qu’on retrouve dans les docs officielles : https://getbootstrap.com/docs/3.3/javascript/#collapse ou https://getbootstrap.com/docs/4.0/components/collapse/.

Il est d’ailleurs étonnant que personne ne leur ait jamais remonté ce bug… Peut-être parce que plus personne n’utilise Bootstrap en 2018 (ou +).

Solution #1

Pour solutionner notre problème, il suffit de mettre un setTimeout javaScript quelque part dans tes sources pour délayer l’ajout dans le DOM de la classe collapsed à l’affichage de la page. Oui: c’est sâle. Oui: c’est une vilaine câle en bois. Non: on n’aurait pas pu mettre la classe dans le code HTML car le code natif Bootstrap te la supprime illico. Oui: tu peux peut-être passer par les events proposés par l’api pour faire ça mieux, mais ça veut dire que tu ne peux pas utiliser les data-attributes pour initier ton collapse.

    <div class="form-group address-extra-info-trigger">
        <span class="control-label">
            <spring:theme code="address.line2"/>
        </span>
        <button id="triggerAddressExtraInfo" class="btn-naked" type="button" data-toggle="collapse" data-target="#collapseAddressExtraInfo" aria-expanded="false" aria-controls="collapseAddressExtraInfo">
            <span class="show-extra-fields">
                <i class="glyphicon glyphicon-chevron-down"></i> <spring:theme code="naos.show"/></span>
            <span class="hide-extra-fields">
                <i class="glyphicon glyphicon-chevron-up"></i> <spring:theme code="naos.hide"/></span>
        </button>
    </div>

    <div class="collapse address-extra-info-fields" id="collapseAddressExtraInfo">
        <p>bla bla bla toto...</p>
    </div>

<spring:theme code="address.line2"/>

</span>

</button>

</div>

</div>

.address-extra-info {
  &-trigger {
    .btn-naked {
      &.collapsed {
        .hide-extra-fields {
          display: none;
        }
      }
      &:not(.collapsed) {
        .show-extra-fields {
          display: none;
        }
      }
    }
  }
}

.address-extra-info {

&-trigger {

.btn-naked {

&.collapsed {

.hide-extra-fields {

display: none;

}

&:not(.collapsed) {

.show-extra-fields {

display: none;

}

  setTimeout(function(){
    $('#triggerAddressExtraInfo').addClass('collapsed');
  }, 500);

setTimeout(function(){

$('#triggerAddressExtraInfo').addClass('collapsed');

}, 500);

Solution #2 (la meilleure)

Il est temps d’abandonner Bootstrap pour Foundation.

[javaScript] VideoJS – astuces et bonnes pratiques de mise en place

17/04/2018 / admin

Centering the Big Ass Play Button in VideoJS
Sous Edge la popin vidéo est écrasée

Centering the Big Ass Play Button in VideoJS

EDIT: ATTENTION, la méthode donnée dans ce lien n’est pas la bonne!!!

Il suffit, en effet d’ajouter la classe .vjs-big-play-centered sur l’élément HTML video.

Sous Edge la popin vidéo est écrasée

J’avais un height: 0px; pour les sélecteurs .video-js.vjs-fluid, .video-js.vjs-16-9, .video-js.vjs-4-3. Edge (jusqu’à 17 exclus) n’a pas aimé.

@media (min-width: @screen-lg-min) {
  .edge-14,
  .edge-15,
  .edge-16 {
    #productDetailsVideoModal {
      .modal-body {
        height: 657px;
      }
      .main-preview-player {
        height: 657px - @grid-gutter-width;
        background-color: #1a1a1a;
      }
    }
  }
  .edge-14,
  .edge-15,
  .edge-16 {
    .video-js.vjs-fluid, .video-js.vjs-16-9, .video-js.vjs-4-3 {
      height: 100%;
    }
  }
}

@media (min-width: @screen-lg-min) {

.edge-14,

.edge-15,

.edge-16 {

#productDetailsVideoModal {

.modal-body {

height: 657px;

}

.main-preview-player {

height: 657px - @grid-gutter-width;

background-color: #1a1a1a;

}

.edge-14,

.edge-15,

.edge-16 {

.video-js.vjs-fluid, .video-js.vjs-16-9, .video-js.vjs-4-3 {

height: 100%;

}

[CSS] Masquer la scrollbar tout en permettant encore le scroll

11/04/2018 / admin

Source: Hide scroll bar, but while still being able to scroll sur Stack Overflow

Sous Chrome:

…mais ne fonctionne pas sous Firefox ou Internet Explorer.

::-webkit-scrollbar { 
    display: none; 
}

::-webkit-scrollbar {

display: none;

}

Solutions universelles

Voir aussi plus bas dans le cas d’une iFrame. Voir le billet original sur Stack Overflow pour des liens vers des jsFiddle d’example.

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}

#parent{

height: 100%;

width: 100%;

overflow: hidden;

}

#child{

width: 100%;

height: 100%;

overflow-y: scroll;

padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */

}

ou avec position: absolute;

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

#parent{

height: 100%;

width: 100%;

overflow: hidden;

position: relative;

}

#child{

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: -17px; /* Increase/Decrease this value for cross-browser compatibility */

overflow-y: scroll;

}

Cas d’une iFrame

body.pageLabel--liste-de-naissance {
  .no-space {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  iframe.js-rbschange-iframe {
    width: 100% !important;
    overflow-y: scroll;
    @media (min-width: @screen-md-min) {
      padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    }
  }
}
#tplOneColumn {
  // un <div> englobant DANS l'iFrame
  overflow: hidden;
}

body.pageLabel--liste-de-naissance {

.no-space {

height: 100%;

width: 100%;

overflow: hidden;

}

iframe.js-rbschange-iframe {

width: 100% !important;

overflow-y: scroll;

@media (min-width: @screen-md-min) {

padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */

}

#tplOneColumn {

// un <div> englobant DANS l'iFrame

overflow: hidden;

}

Articles récents

Catégories

Archives

Méta

Mois : avril 2018

[SASS][LESS] Remonter le DOM en CSS en utilisant l’esperluette

[Bootstrap 3] Garder une popover ouverte lorsqu’on survole celle-ci avec la souris

[jQuery] Redimensionner automatiquement un element HTML Select en fonction de la largeur de l’Option sélectionnée

Cas particulier: la page se recharge après sélection

[jQuery] Vérifier en cours de saisie en live si un input[type= »text »] contient du contenu avec l’événement Input et la méthode Val

Si un seul champ à vérifier:

Si plusieurs champs à vérifier:

Mieux, avec deux fonctions

[Bootstrap 3 et 4] Composant Collapse, la classe collapsed n’apparaît qu’après un premier affichage/masquage des éléments

Solution #1

Solution #2 (la meilleure)

[javaScript] VideoJS – astuces et bonnes pratiques de mise en place

Centering the Big Ass Play Button in VideoJS

Sous Edge la popin vidéo est écrasée

[CSS] Masquer la scrollbar tout en permettant encore le scroll

Sous Chrome:

Solutions universelles

Cas d’une iFrame