Étiquette : multiple

[Javascript] Attacher plusieurs événements à un même listener

01/07/2022 / admin

Source: Multiple Events to a Listener with JavaScript. Code source sous GitHub.

/**
 * 💡 WAY 1 💡
 */
const button1 = document.querySelector('.btnAction_1');

// 💬 Events
button1.addEventListener('click', showEvent1);
button1.addEventListener('mouseover', showEvent1);

// 💬 Function
function showEvent1(e) {
    const result1 = document.querySelector('.btnResult_1');
    result1.textContent = e.type;
}

/**

* 💡 WAY 1 💡

const button1 = document.querySelector('.btnAction_1');

// 💬 Events

button1.addEventListener('click', showEvent1);

button1.addEventListener('mouseover', showEvent1);

// 💬 Function

function showEvent1(e) {

const result1 = document.querySelector('.btnResult_1');

result1.textContent = e.type;

}

/**
 * 💡 WAY 2 💡
 */
const button2 = document.querySelector('.btnAction_2');

// 💬 Events
let myEvents = 'click mouseover'.split(' ');
myEvents.forEach(event => button2.addEventListener(event, showEvent2));

// 💬 Function
function showEvent2(e) {
    const result2 = document.querySelector('.btnResult_2');
    result2.textContent = e.type;
}

/**

* 💡 WAY 2 💡

const button2 = document.querySelector('.btnAction_2');

// 💬 Events

let myEvents = 'click mouseover'.split(' ');

myEvents.forEach(event => button2.addEventListener(event, showEvent2));

// 💬 Function

function showEvent2(e) {

const result2 = document.querySelector('.btnResult_2');

result2.textContent = e.type;

}

/**
 * 💡 WAY 3 💡
 */
const button3 = document.querySelector('.btnAction_3');

// 💬 Events
['click', 'mouseover'].forEach(event => button3.addEventListener(event, showEvent3));

function showEvent3(e) {
    const result3 = document.querySelector('.btnResult_3');
    result3.textContent = e.type;
}

/**

* 💡 WAY 3 💡

const button3 = document.querySelector('.btnAction_3');

// 💬 Events

['click', 'mouseover'].forEach(event => button3.addEventListener(event, showEvent3));

function showEvent3(e) {

const result3 = document.querySelector('.btnResult_3');

result3.textContent = e.type;

}

A noter que Chris Fernandini de gomakethings.com déclare encore l’option passive à false à la fin de la déclaration de son EventListener. En savoir plus sur les passive events listeners.

// Setup our function to run on various events
var someFunction = function (event) {
    // Do something...
};

// Add our event listeners
window.addEventListener('click', someFunction, false);
window.addEventListener('mouseover', someFunction, false);

// Setup our function to run on various events

var someFunction = function (event) {

// Do something...

};

// Add our event listeners

window.addEventListener('click', someFunction, false);

window.addEventListener('mouseover', someFunction, false);

[jQuery] Empêcher un événement de s’exécuter à de multiples reprises avec les méthodes On et Off (entre autres)

02/08/2018 / admin

Source: Prevent jQuery events from firing multiple times

Le problème

 $('a', '#cdDropdown').on('click', cachedMenu);

1	$('a', '#cdDropdown').on('click', cachedMenu);

Avec cette déclaration, la fonction cachedMenu à exécuter au clic sur un lien enfants de #cdDropdown dans le DOM était exécutée plusieurs fois (6 fois) à chacun de mes clics. La multiplication des exécutions était exponentielle car en m’amusant à cliquer environ 12 à 15 fois sur des liens, la console de debug a loggué pas moins de 11045 exécutions de ma fonction!!!

La solution

 $('a', '#cdDropdown').off('click', cachedMenu).on('click', cachedMenu);

1	$('a', '#cdDropdown').off('click', cachedMenu).on('click', cachedMenu);

Avant d’activer un événement avec la méthode jQuery .on(), il faut tout simplement le désactiver avec la méthode .off().

[Magento 1.x] Un slider multi-produits responsive avec le plugin jQuery Cycle (fourni avec le thème Rwd)

03/03/2017 / admin

Source : http://jsfiddle.net/kRs2N/6/ et mon fork avec des marges entre les slides http://jsfiddle.net/frontenddeveloper/L3bpavzc/1/.

HTML

<ul class="slideshow">
    <li><img alt="" src="http://malsup.github.io/images/beach1.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach2.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach3.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach4.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong> </div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach5.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach6.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach7.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach8.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
</ul>
<div class="prevnext"> <a href="#" id="prev4" class="skew-backward">PREV</a> <a href="#" id="next4" class="skew-forward">NEXT</a> </div>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

CSS

/* Slider */

ul.slideshow {
  overflow: hidden;
    margin:0;
    padding:0;
    list-style-type:none;
    margin-bottom:-80px;
    margin-left: -10px;
    margin-right: -10px;
    }
li.cycle-slide
{
     text-align:center;
     position:relative;
     text-align:center;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
}
.cycle-slide div
{
    bottom:100px;
    color:#FFF;
    position:relative;
    left:0; right:0;
    font-size:24px;
    font-weight:300;
    text-transform:uppercase;
}
.cycle-slide div strong
{
    font-weight:700;
}
.cycle-slide img
{
    width: 100%; 
}
.slider {
    position:relative;
}
.prevnext
{
    position:absolute;
    top:50%;
    width:100%;
    margin-top:-90px;
}
#prev4
{ 
    position:absolute;
    left:40px;
    background-image:url(../images/prev.png);
    width:70px;
    height:140px;
}
#next4
{
    position:absolute;
    right:0;
    background-image:url(../images/next.png);
    width:70px;
    height:140px;
}

/* Slider */

ul.slideshow {

overflow: hidden;

margin:0;

padding:0;

list-style-type:none;

margin-bottom:-80px;

margin-left: -10px;

margin-right: -10px;

}

li.cycle-slide

{

text-align:center;

position:relative;

text-align:center;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

}

.cycle-slide div

{

bottom:100px;

color:#FFF;

position:relative;

left:0; right:0;

font-size:24px;

font-weight:300;

text-transform:uppercase;

}

.cycle-slide div strong

{

font-weight:700;

}

.cycle-slide img

{

width: 100%;

}

.slider {

position:relative;

}

.prevnext

{

position:absolute;

top:50%;

width:100%;

margin-top:-90px;

}

#prev4

{

position:absolute;

left:40px;

background-image:url(../images/prev.png);

width:70px;

height:140px;

}

#next4

{

position:absolute;

right:0;

background-image:url(../images/next.png);

width:70px;

height:140px;

}

jQuery

function buildCarousel(visibleSlides) {
    $('.slideshow').cycle({
        fx: 'carousel',
        speed: 600,
        slides: 'li',
        carouselVisible: visibleSlides,
        carouselFluid: true,
        swipe:true,
        swipefx:'scrollHorz',
        next: '#next4',
        prev: '#prev4',
        pager: '#gallery-chooser ul',
    });
    $('.slideshow li img').css('opacity','1');
}


function initCycle() {
    var width = $(document).width();
    var visibleSlides = 4;
    
    if ( width < 400 ) {visibleSlides = 1}
    else if(width < 700) {visibleSlides = 2}
    else if(width < 1024) {visibleSlides = 3}
    else if(width < 1400) {visibleSlides = 4}
    else {visibleSlides = 5};

    buildCarousel(visibleSlides);
}

function reinit_cycle() {
    var width = $(window).width();
    
    
    var destroyCarousel = function() { 
        $('.slideshow').cycle('destroy');
    }

    if (width < 400) {
        destroyCarousel(); // call the function
        reinitCycle(1);
    } else if (width > 400 && width < 700) {
        destroyCarousel();
        reinitCycle(2);
    } else if (width > 700 && width < 1024) {
        destroyCarousel();
        reinitCycle(3);
        } else if (width > 1024 && width < 1400) {
        destroyCarousel();
        reinitCycle(4);
    } else {
        destroyCarousel();
        reinitCycle(5);
    }
}

function reinitCycle(visibleSlides) {
    buildCarousel(visibleSlides);
}
var reinitTimer;
$(window).resize(function() {
    clearTimeout(reinitTimer);
    reinitTimer = setTimeout(reinit_cycle, 100);
});

$(document).ready(function(){
    initCycle();    
});

function buildCarousel(visibleSlides) {

$('.slideshow').cycle({

fx: 'carousel',

speed: 600,

slides: 'li',

carouselVisible: visibleSlides,

carouselFluid: true,

swipe:true,

swipefx:'scrollHorz',

next: '#next4',

prev: '#prev4',

pager: '#gallery-chooser ul',

});

$('.slideshow li img').css('opacity','1');

}

function initCycle() {

var width = $(document).width();

var visibleSlides = 4;

if ( width < 400 ) {visibleSlides = 1}

else if(width < 700) {visibleSlides = 2}

else if(width < 1024) {visibleSlides = 3}

else if(width < 1400) {visibleSlides = 4}

else {visibleSlides = 5};

buildCarousel(visibleSlides);

}

function reinit_cycle() {

var width = $(window).width();

var destroyCarousel = function() {

$('.slideshow').cycle('destroy');

}

if (width < 400) {

destroyCarousel(); // call the function

reinitCycle(1);

} else if (width > 400 && width < 700) {

destroyCarousel();

reinitCycle(2);

} else if (width > 700 && width < 1024) {

destroyCarousel();

reinitCycle(3);

} else if (width > 1024 && width < 1400) {

destroyCarousel();

reinitCycle(4);

} else {

destroyCarousel();

reinitCycle(5);

}

function reinitCycle(visibleSlides) {

buildCarousel(visibleSlides);

}

var reinitTimer;

$(window).resize(function() {

clearTimeout(reinitTimer);

reinitTimer = setTimeout(reinit_cycle, 100);

});

$(document).ready(function(){

initCycle();

});

[Bootstrap 3] Conserver plusieurs collapse ou dropdown ouverts simultanément

27/05/2016 / admin

Source Keep multiple collapse open (with button to toggle) – Bootstrap 3.

L’astuce consiste à :

Englober l’ensemble des éléments collapse dans une <div> avec un id="accordion".
Rajouter sur les liens, qui au clic ouvrent les parties cachées, des attributs data-parent="#accordion" (dont la valeur fera référence à celle de l’id de la div englobante) et href="#collapseOne" (dont la valeur sera unique pour chaque lien).
Rajouter un attribut id="collapseOne" unique (dont la valeur fera référence à la valeur de l’attribut href placé sur le lien juste au-dessus).

…et à ajouter un bout de code javaScript supplémentaire (voir plus bas).

<div class="accordion" id="accordion">
  <!--Article 1-->
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <!--Article 2-->
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <!--Article 3-->
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
        Collapsible Group Item #3
      </a>
    </div>
    <div id="collapseThree" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Collapsible Group Item #1

</a>

</div>

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

</div>

Collapsible Group Item #2

</a>

</div>

</div>

Collapsible Group Item #3

</a>

</div>

</div>

$('a[data-toggle="collapse"]').on('click',function(){
  var id=$(this).attr('href');
  if($(id).hasClass('in'))
  {
    $(id).collapse('hide');
  }
  
  else{
    $(id).collapse('show');
  }
});

$('a[data-toggle="collapse"]').on('click',function(){

var id=$(this).attr('href');

if($(id).hasClass('in'))

{

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

}

else{

$(id).collapse('show');

}

});

[jQuery] Combiner plusieurs déclarations dans une même méthode .attr

25/05/2016 / admin

$('.element').attr({
	id: getFacetID,
	"data-toggle": 'dropdown',
	role: 'button',
	"aria-haspopup": 'true',
	"aria-expanded": 'false'
});

$('.element').attr({

id: getFacetID,

"data-toggle": 'dropdown',

role: 'button',

"aria-haspopup": 'true',

"aria-expanded": 'false'

});

A noter : les attributs qui contiennent des tirets (caractère « -« ) doivent être mis entre guillemets.

[jQuery] Combiner plusieurs déclarations dans une seule méthode .removeAttr

25/05/2016 / admin

Source : Combing multiple .removeAttr() statements.

Version linéaire (la méthode .removeAttr est appelée pour chaque déclaration)

checkboxes.removeAttr("checked",'checked');
checkboxes.removeAttr("indeterminate", false);
checkboxes.removeAttr("role", 'checkbox');
checkboxes.removeAttr("aria-checked", false);

checkboxes.removeAttr("checked",'checked');

checkboxes.removeAttr("indeterminate", false);

checkboxes.removeAttr("role", 'checkbox');

checkboxes.removeAttr("aria-checked", false);

Version optimisée

$.each(["checked","indeterminate","role","aria-checked"],function(i,attrName){
    checkbox.removeAttr(attrName);
});

$.each(["checked","indeterminate","role","aria-checked"],function(i,attrName){

checkbox.removeAttr(attrName);

});

[CSS] Une bordure en deux teintes en CSS 3

17/07/2015 / admin

Source : Two-Tone Borders with CSS3.

Pour une bordure top

On ajoute la valeur inset à box-shadow.

border-top: 1px solid tomato;
box-shadow: inset 0 1px 0 red;

1 2	border-top: 1px solid tomato; box-shadow: inset 0 1px 0 red;

Pour une bordure bottom

border-bottom: 1px solid tomato;
box-shadow: 0 1px 0 red;

1 2	border-bottom: 1px solid tomato; box-shadow: 0 1px 0 red;

Autres ressources (avec plus d’exemples) : https://css-tricks.com/snippets/css/multiple-borders/, http://stackoverflow.com/questions/19463904/css-double-border-with-different-color, http://www.impressivewebs.com/multiple-borders-css/.

Articles récents

Catégories

Archives

Méta

Étiquette : multiple

[Javascript] Attacher plusieurs événements à un même listener

[jQuery] Empêcher un événement de s’exécuter à de multiples reprises avec les méthodes On et Off (entre autres)

Le problème

La solution

[Magento 1.x] Un slider multi-produits responsive avec le plugin jQuery Cycle (fourni avec le thème Rwd)

HTML

CSS

jQuery

[jQuery] Combiner plusieurs déclarations dans une même méthode .attr

[jQuery] Combiner plusieurs déclarations dans une seule méthode .removeAttr

Version linéaire (la méthode .removeAttr est appelée pour chaque déclaration)

Version optimisée

[CSS] Une bordure en deux teintes en CSS 3

Pour une bordure top

Pour une bordure bottom