Mois : août 2015

[SASS] Un tableau comparatif responsive en pure HTML/SASS

26/08/2015 / admin

Simulation : http://jsfiddle.net/frontenddeveloper/5u38aLbg/11/

Code HTML :

<table class="table-comparison clearfix">
  <thead class="clearfix">
    <tr>
      <th>Détail de nos offres</th>
      <th>
        <span class="offer-label">Pack premium</span><br />
        <span class="offer-price">299€ soit -50%</span><br />
        <button class="offer-button">Je m'abonne</button>
      </th>
      <th>
        <span class="offer-label">Pack numérique</span><br />
        <span class="offer-price">299€ soit -50%</span><br />
        <button class="offer-button">Je m'abonne</button>
      </th>
      <th>
        <span class="offer-label">Offre XXX</span><br />
        <span class="offer-price">299€ soit -50%</span><br />
        <button class="offer-button">Je m'abonne</button>
      </th>
      <th>
        <span class="offer-label">Offre XXX</span><br />
        <span class="offer-price">299€ soit -50%</span><br />
        <button class="offer-button">Je m'abonne</button>
      </th>
      <th>
        <span class="offer-label">Inscription</span><br />
        <span class="offer-price">Gratuit</span><br />
        <button class="offer-button">Je m'inscris</button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Consultation des articles <a href="#">[i]</a></th>
      <td>illimité</td>
      <td>illimité</td>
      <td>illimité</td>
      <td>illimité</td>
      <td>8</td>
    </tr><tr>
      <th>Réception du journal en PDF dès 22h30 <a href="#">[i]</a></th>
      <td>oui</td>
      <td>oui</td>
      <td>non</td>
      <td>non</td>
      <td>non</td>
    </tr><tr>
      <th>Newsletters <a href="#">[i]</a></th>
      <td>oui</td>
      <td>oui</td>
      <td>oui</td>
      <td>oui</td>
      <td>oui</td>
    </tr><tr>
      <th>Alertes personnalisées <a href="#">[i]</a></th>
      <td>oui</td>
      <td>oui</td>
      <td>oui</td>
      <td>oui</td>
      <td>oui</td>
    </tr><tr>
      <th>Accès aux applications mobile et tablette <a href="#">[i]</a></th>
      <td>oui</td>
      <td>oui</td>
      <td>oui</td>
      <td>oui</td>
      <td>oui</td>
    </tr><tr>
      <th>La livraison du journal avant 7h30* <a href="#">[i]</a></th>
      <td>oui</td>
      <td>non</td>
      <td>non</td>
      <td>non</td>
      <td>non</td>
    </tr><tr>
      <th>La livraison des magazines<br />Enjeux et Série Limitée <a href="#">[i]</a></th>
      <td>oui</td>
      <td>non</td>
      <td>non</td>
      <td>non</td>
      <td>non</td>
    </tr><tr class="hide-on-mobile">
      <th>Prix</th>
      <td>
        <span class="offer-price">299€</span><br />
        <span class="offer-discount">soit -50%</span>
      </td>
      <td>
        <span class="offer-price">180€</span><br />
        <span class="offer-discount">soit -50%</span>
      </td>
      <td>
        <span class="offer-price">299€</span><br />
        <span class="offer-discount">soit -50%</span>
      </td>
      <td>
        <span class="offer-price">180€</span><br />
        <span class="offer-discount">soit -50%</span>
      </td>
      <td>Gratuit</td>
    </tr><tr class="hide-on-mobile">
      <th>&nbsp;</th>
      <td><button class="offer-button">Je m'abonne</button></td>
      <td><button class="offer-button">Je m'abonne</button></td>
      <td><button class="offer-button">Je m'abonne</button></td>
      <td><button class="offer-button">Je m'abonne</button></td>
      <td><button class="offer-button">Je m'inscris</button></td>
    </tr>
  </tbody>
</table>

100

101

102

103

104

105

106

107

108

109

110

<tr>

<th>Détail de nos offres</th>

<th>

<span class="offer-label">Pack premium</span><br />

<button class="offer-button">Je m'abonne</button>

</th>

<th>

<span class="offer-label">Pack numérique</span><br />

<button class="offer-button">Je m'abonne</button>

</th>

<th>

<span class="offer-label">Offre XXX</span><br />

<button class="offer-button">Je m'abonne</button>

</th>

<th>

<span class="offer-label">Offre XXX</span><br />

<button class="offer-button">Je m'abonne</button>

</th>

<th>

<span class="offer-label">Inscription</span><br />

<span class="offer-price">Gratuit</span><br />

<button class="offer-button">Je m'inscris</button>

</th>

</tr>

</thead>

<tbody>

<tr>

<th>Consultation des articles <a href="#">[i]</a></th>

<td>illimité</td>

</tr><tr>

<th>Réception du journal en PDF dès 22h30 <a href="#">[i]</a></th>

</tr><tr>

<th>Newsletters <a href="#">[i]</a></th>

</tr><tr>

<th>Alertes personnalisées <a href="#">[i]</a></th>

</tr><tr>

<th>Accès aux applications mobile et tablette <a href="#">[i]</a></th>

</tr><tr>

<th>La livraison du journal avant 7h30* <a href="#">[i]</a></th>

</tr><tr>

<th>La livraison des magazines<br />Enjeux et Série Limitée <a href="#">[i]</a></th>

</tr><tr class="hide-on-mobile">

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

<td>Gratuit</td>

</tr><tr class="hide-on-mobile">

<td><button class="offer-button">Je m'abonne</button></td>

<td><button class="offer-button">Je m'inscris</button></td>

</tr>

</tbody>

</table>

Mixin SASS:

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
}
* html .clearfix { zoom: 1; }
*:first-child+html .clearfix { zoom: 1; }

@mixin table-comparison(
    $border-width: 1px,
    $border-color: #ddd,
    $cell-padding: 6px,
    $cell-vertical-align: middle,
    $cell-text-align: center,
    $horizontal-header-text-align: center,
    $vertical-header-text-align: left,
    $mobile-breakpoint: 979px,
    $mobile-horizontal-header-cell-height: 84px,
    $mobile-column-width: 110px,
    $mobile-cell-height: 68px) { 
    
    /* base */
    width: 100%; 
    border-collapse: collapse; 
    border-spacing: 0; 
    th,td { 
        margin: 0;
    }
    
    /* minimal skin */
    border: $border-width solid $border-color;
    border-bottom: none;
    th,td { 
        padding: $cell-padding;
        vertical-align: $cell-vertical-align;
        border: $border-width solid $border-color;
        border-bottom: none;
    }
    thead {
        th {
            text-align: $horizontal-header-text-align;
            &:first-child {
                text-align: $vertical-header-text-align;
                vertical-align: bottom;
            }
        }
    }
    tbody {
        th {
            text-align: $vertical-header-text-align;        
        }
        td { text-align: $cell-text-align; }
        tr:last-child {
            th,td {
                border-top: none;
                border-bottom: $border-width solid $border-color;
            }
        }        
    }
    
    @media only screen and (max-width: $mobile-breakpoint) {
        .hide-on-mobile {
            display: none !important;
        }
        
        /* base */
        display: block;
        position: relative;
        thead {
            display: block;
            float: left;
            tr { display: block; }
        }
        tbody {
            display: block;
            width: auto;
            position: relative;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            tr {
                display: inline-block;
                vertical-align: top;
                th {
                    white-space: normal;
                }
            }
        }
        th,td { display: block; }
        th { border-bottom: 0; }
        td { 
            border-left: 0;
            border-bottom: 0;
            height: $mobile-cell-height;
            line-height: $mobile-cell-height;
        }

        /* minimal skin */
        border: none;
        tr {
            th,td { border-left: none; }
        }
        thead th { 
            border-left: $border-width solid $border-color;
            width: $mobile-column-width;
            height: $mobile-cell-height;
            &:first-child {
                height: $mobile-horizontal-header-cell-height;               
            }
        }
        th, td {
            &:last-child { border-bottom: $border-width solid $border-color; }
        }        
        tr {
            &:last-child th,
            &:last-child td { border-top: $border-width solid $border-color; }
        }
        tbody th {
            width: $mobile-column-width;
            height: $mobile-horizontal-header-cell-height;
            text-align: $horizontal-header-text-align;
        }
    }
}

.table-comparison {
    @include table-comparison();
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

.clearfix:after {

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

* html .clearfix { zoom: 1; }

*:first-child+html .clearfix { zoom: 1; }

@mixin table-comparison(

$border-width: 1px,

$border-color: #ddd,

$cell-padding: 6px,

$cell-vertical-align: middle,

$cell-text-align: center,

$horizontal-header-text-align: center,

$vertical-header-text-align: left,

$mobile-breakpoint: 979px,

$mobile-horizontal-header-cell-height: 84px,

$mobile-column-width: 110px,

$mobile-cell-height: 68px) {

/* base */

width: 100%;

border-collapse: collapse;

border-spacing: 0;

th,td {

margin: 0;

}

/* minimal skin */

border: $border-width solid $border-color;

border-bottom: none;

th,td {

padding: $cell-padding;

vertical-align: $cell-vertical-align;

border: $border-width solid $border-color;

border-bottom: none;

}

thead {

th {

text-align: $horizontal-header-text-align;

&:first-child {

text-align: $vertical-header-text-align;

vertical-align: bottom;

}

tbody {

th {

text-align: $vertical-header-text-align;

}

td { text-align: $cell-text-align; }

tr:last-child {

th,td {

border-top: none;

border-bottom: $border-width solid $border-color;

}

@media only screen and (max-width: $mobile-breakpoint) {

.hide-on-mobile {

display: none !important;

}

/* base */

display: block;

position: relative;

thead {

display: block;

float: left;

tr { display: block; }

}

tbody {

display: block;

width: auto;

position: relative;

overflow-x: auto;

overflow-y: hidden;

white-space: nowrap;

tr {

display: inline-block;

vertical-align: top;

th {

white-space: normal;

}

th,td { display: block; }

th { border-bottom: 0; }

td {

border-left: 0;

border-bottom: 0;

height: $mobile-cell-height;

line-height: $mobile-cell-height;

}

/* minimal skin */

border: none;

tr {

th,td { border-left: none; }

}

thead th {

border-left: $border-width solid $border-color;

width: $mobile-column-width;

height: $mobile-cell-height;

&:first-child {

height: $mobile-horizontal-header-cell-height;

}

th, td {

&:last-child { border-bottom: $border-width solid $border-color; }

}

tr {

&:last-child th,

&:last-child td { border-top: $border-width solid $border-color; }

}

tbody th {

width: $mobile-column-width;

height: $mobile-horizontal-header-cell-height;

text-align: $horizontal-header-text-align;

}

.table-comparison {

@include table-comparison();

}

[CSS][SASS] Styler des frères en fonction de leur ordre d’apparition dans le DOM avec les pseudo-classes nth-child et nth-last-child

24/08/2015 / admin

Source : Styling elements based on sibling count

Version CSS

Deux possibilités (sachant que dans certains cas l’une conviendra mieux que l’autre) :

/* one item */
li:nth-child(1):nth-last-child(1) {
	width: 100%;
}

/* two items */
li:nth-child(1):nth-last-child(2),
li:nth-child(2):nth-last-child(1) {
	width: 50%;
}

/* three items */
li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
	width: 33.3333%;
}

/* four items */
li:nth-child(1):nth-last-child(4),
li:nth-child(2):nth-last-child(3),
li:nth-child(3):nth-last-child(2),
li:nth-child(4):nth-last-child(1) {
	width: 25%;
}

/* one item */

li:nth-child(1):nth-last-child(1) {

width: 100%;

}

/* two items */

li:nth-child(1):nth-last-child(2),

li:nth-child(2):nth-last-child(1) {

width: 50%;

}

/* three items */

li:nth-child(1):nth-last-child(3),

li:nth-child(2):nth-last-child(2),

li:nth-child(3):nth-last-child(1) {

width: 33.3333%;

}

/* four items */

li:nth-child(1):nth-last-child(4),

li:nth-child(2):nth-last-child(3),

li:nth-child(3):nth-last-child(2),

li:nth-child(4):nth-last-child(1) {

width: 25%;

}

/* one item */
li:first-child:nth-last-child(1) {
	width: 100%;
}

/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
	width: 50%;
}

/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
	width: 33.3333%;
}

/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
	width: 25%;
}

/* one item */

li:first-child:nth-last-child(1) {

width: 100%;

}

/* two items */

li:first-child:nth-last-child(2),

li:first-child:nth-last-child(2) ~ li {

width: 50%;

}

/* three items */

li:first-child:nth-last-child(3),

li:first-child:nth-last-child(3) ~ li {

width: 33.3333%;

}

/* four items */

li:first-child:nth-last-child(4),

li:first-child:nth-last-child(4) ~ li {

width: 25%;

}

Mixin SASS

Sass mixin for styling elements based on sibling count par Zakir Tariverdiev; Codepen.
Using Sass for “Quantity Queries” par James Steinbach; Codepen.

[jQuery] Cibler une popin fancybox en fonction du support (smartphone, tablette, desktop …) et lui passer des arguments différents

20/08/2015 / admin

Attention : astuce valable pour Fancybox à partir de sa version: 2.1.5 (Fri, 14 Jun 2013).

Source : Need to add a surrounding div to fancybox or add a class to body when clicked

You can bind all your fancyboxes to the same selector so you won’t need to have a different script for each fancybox. You can add an extra class to your links to separate each fancybox like :

<a class="fancybox i300"...>..</a>
<a class="fancybox i420"...>...</a>

1 2	<a class="fancybox i300"...>..</a> <a class="fancybox i420"...>...</a>

Then you can declare different API options of each fancybox in separated variables like :

// settings for fancybox 300
var f300 = {
    maxWidth: 320,
    maxHeight: 569,
    minWidth: 300
};
// settings for fancybox 420
var f420 = {
    maxWidth: 480,
    maxHeight: 600,
    minWidth: 420
};

// settings for fancybox 300

var f300 = {

maxWidth: 320,

maxHeight: 569,

minWidth: 300

};

// settings for fancybox 420

var f420 = {

maxWidth: 480,

maxHeight: 600,

minWidth: 420

};

…and use a single script with the common shared options AND using the afterLoad callback to apply each individual setting, depending on the class as well as adding the corresponding class to the fancybox overlay like

$(".fancybox").fancybox({
    // common API options
    fitToView: false,
    width: '90%',
    height: '90%',
    autoSize: false,
    closeClick: false,
    openEffect: 'none',
    closeEffect: 'none',
    padding: 0,
    afterLoad: function () {
        if ($(this.element).hasClass("i300")) {
            $.extend(this, f300);
            $(".fancybox-overlay").addClass("iphone_300");
        } else if ($(this.element).hasClass("i420")) {
            $.extend(this, f420);
            $(".fancybox-overlay").addClass("iphone_420");
        }
    }
});

$(".fancybox").fancybox({

// common API options

fitToView: false,

width: '90%',

height: '90%',

autoSize: false,

closeClick: false,

openEffect: 'none',

closeEffect: 'none',

padding: 0,

afterLoad: function () {

if ($(this.element).hasClass("i300")) {

$.extend(this, f300);

$(".fancybox-overlay").addClass("iphone_300");

} else if ($(this.element).hasClass("i420")) {

$.extend(this, f420);

$(".fancybox-overlay").addClass("iphone_420");

}

});

Notice we are adding classes either iphone_300 or iphone_420 to the fancybox overlay, which may have different styles within your own css stylesheet like

.iphone_300 {
    background: rgba(58, 42, 45, 0.8)
}
.iphone_420 {
    background: rgba(0, 0, 0, 0.2)
}

.iphone_300 {

background: rgba(58, 42, 45, 0.8)

}

.iphone_420 {

background: rgba(0, 0, 0, 0.2)

}

Simulation jsfiddle.net

when i put these in a rel=gallery, that when i click next it doesnt remove the previous addclass

Just add this as first line inside the afterLoad callback :

$(".fancybox-overlay").removeClass("iphone_300").removeClass("iphone_420");

1	$(".fancybox-overlay").removeClass("iphone_300").removeClass("iphone_420");

Simulation jsfiddle.net

[PHPTAL] Afficher sous condition un tag qui n’est pas fermé avec tal:omit-tag

13/08/2015 / admin

Source : PHPTAL Manual – tal:omit-tag.

L’attribut tal:omit-tag, couplé à l’attribut tal:condition="", demande au parseur PHPTAL d’ignorer les tags d’ouverture et de fermeture des éléments. Son contenu enfant, quant à lui, sera toujours évalué. Le tag de fermeture sera automatiquement pris en compte.

<tal:block tal:define="openingHours magasin/getOpeningHoursBean" tal:condition="openingHours">
  <div class="opening-hours">...</div>
</tal:block>

<div class="toto" tal:define="openingHours magasin/getOpeningHoursBean" tal:omit-tag="not: openingHours"><!-- Tag visible si 'openingHours' est affiché -->
  <div>...</div><!-- Tag et son contenu enfant toujours visible -->
</div>

<tal:block tal:define="openingHours magasin/getOpeningHoursBean" tal:condition="openingHours">

</tal:block>

</div>

Equivalent en PHP

<tal:block tal:define="openingHours magasin/getOpeningHoursBean" tal:condition="openingHours"><?php echo '<div class="toto">'; ?></tal:block>
<tal:block tal:define="openingHours magasin/getOpeningHoursBean" tal:condition="openingHours"><?php echo '</div>'; ?></tal:block>

1 2	<tal:block tal:define="openingHours magasin/getOpeningHoursBean" tal:condition="openingHours"><?php echo '<div class="toto">'; ?></tal:block> <tal:block tal:define="openingHours magasin/getOpeningHoursBean" tal:condition="openingHours"><?php echo '</div>'; ?></tal:block>

[jQuery] Au clic sur un élément, scroller automatiquement jusqu’à un autre élément présent dans le DOM

13/08/2015 / admin

…en utilisant les méthodes .click, animate., .scrollTop et .offset.

Source : jQuery scroll to element et hyperlink – JQuery smooth scrolling when clicking an anchor link.

<a id="myLink">Cliquez ici ...</a>
<div>
    <!-- beaucoup de code -->
</div>
<div id="myTarget">... et un scroll vous emmènera automatiquement ici !</div>

<a id="myLink">Cliquez ici ...</a>

<div>

</div>

<div id="myTarget">... et un scroll vous emmènera automatiquement ici !</div>

jQuery('a#myLink').on('click', function(){
  jQuery('a[href*="myTarget"]').click();
  jQuery('html, body').animate({
      scrollTop: jQuery("#myTarget").offset().top
  }, 500);
  return false;
});

jQuery('a#myLink').on('click', function(){

jQuery('a[href*="myTarget"]').click();

jQuery('html, body').animate({

scrollTop: jQuery("#myTarget").offset().top

}, 500);

return false;

});

[jQuery] Détecter un changement dans le contenu d’un élément HTML (plug-in)

12/08/2015 / admin

Source : Stack Overflow – jQuery watch div.
Simulation JS Fiddle.

Le plug-in

jQuery.fn.contentChange = function(callback){
  var elms = jQuery(this);
  elms.each(
    function(i){
      var elm = jQuery(this);
      elm.data("lastContents", elm.html());
      window.watchContentChange = window.watchContentChange ? window.watchContentChange : [];
      window.watchContentChange.push({"element": elm, "callback": callback});
    }
  )
  return elms;
}
setInterval(function(){
  if(window.watchContentChange){
    for( i in window.watchContentChange){
      if(window.watchContentChange[i].element.data("lastContents") != window.watchContentChange[i].element.html()){
        window.watchContentChange[i].callback.apply(window.watchContentChange[i].element);
        window.watchContentChange[i].element.data("lastContents", window.watchContentChange[i].element.html())
      };
    }
  }
},500);

jQuery.fn.contentChange = function(callback){

var elms = jQuery(this);

elms.each(

function(i){

var elm = jQuery(this);

elm.data("lastContents", elm.html());

window.watchContentChange = window.watchContentChange ? window.watchContentChange : [];

window.watchContentChange.push({"element": elm, "callback": callback});

}

)

return elms;

}

setInterval(function(){

if(window.watchContentChange){

for( i in window.watchContentChange){

if(window.watchContentChange[i].element.data("lastContents") != window.watchContentChange[i].element.html()){

window.watchContentChange[i].callback.apply(window.watchContentChange[i].element);

window.watchContentChange[i].element.data("lastContents", window.watchContentChange[i].element.html())

};

}

},500);

Le code HTML

<p>Testing it:  (click on divs to change contents)</p>

<div id="a" onclick="$(this).append('i')">Hi</div>
<div id="b" onclick="$(this).append('o')">Ho</div>
<div class="c" onclick="$(this).append('y')">He</div>
<div class="c" onclick="$(this).append('w')">He</div>
<div class="c" onclick="$(this).append('a')">He</div>

<p>Testing it: (click on divs to change contents)</p>

Utiliser le plug-in

function showChange(){
  var element = $(this);
  alert("it was '"+element.data("lastContents")+"' and now its '"+element.html()+"'");
}

$('#a').contentChange(function(){  alert("Hi!") });
$('div#b').contentChange( showChange );
$('.c').contentChange(function(){  alert("He he he...") });

function showChange(){

var element = $(this);

alert("it was '"+element.data("lastContents")+"' and now its '"+element.html()+"'");

}

$('#a').contentChange(function(){ alert("Hi!") });

$('div#b').contentChange( showChange );

$('.c').contentChange(function(){ alert("He he he...") });

Si le plug-in s’arrête de fonctionner après le 1er changement dans le DOM

Dans notre exemple, au clic sur une des options d’un élément HTML select :

jQuery('body').on('click', 'select#product-declination > option', function(){
  jQuery('div#b').contentChange( showChange );
});

jQuery('body').on('click', 'select#product-declination > option', function(){

jQuery('div#b').contentChange( showChange );

});

[Bonnes pratiques] Conventions

04/08/2015 / admin

Convention HTML/CSS/JS
Convention de langue (français/anglais)
Convention de syntaxe (espace/indentation)
Convention de commentaires (@TODO)
Convention de séparateur (trait d’union/underscore)
Convention de casse (minuscule/majuscule,camelCase)

[CSS] Les préfixes constructeurs obsolètes

04/08/2015 / admin

Source : What CSS to prefix?

Pas besoin de préfixes

border-radius
box-shadow
text-shadow
opacity

Uniquement -moz

box-sizing

Uniquement -webkit

transition
animation
gradient
calc()

-webkit et -ms

transform

[CSS] Sélection d’éléments, les sélecteurs avancés

03/08/2015 / admin

Fonctionnent à partir d’IE7 :

:first-child /* premier enfant */
élt + élt /* frère suivant direct */
élt ~ élt /* tous les frères suivants */
[attr^="valeur"] /* attribut qui commence par "valeur" */
[attr$="valeur"] /* attribut qui termine par "valeur" */
[attr*="valeur"] /* attribut qui contient "valeur" */
:hover /* élément survolé */

:first-child /* premier enfant */

élt + élt /* frère suivant direct */

élt ~ élt /* tous les frères suivants */

[attr^="valeur"] /* attribut qui commence par "valeur" */

[attr$="valeur"] /* attribut qui termine par "valeur" */

[attr*="valeur"] /* attribut qui contient "valeur" */

:hover /* élément survolé */

Articles récents

Catégories

Archives

Méta

Mois : août 2015

[SASS] Un tableau comparatif responsive en pure HTML/SASS

Code HTML :

Mixin SASS:

[CSS][SASS] Styler des frères en fonction de leur ordre d’apparition dans le DOM avec les pseudo-classes nth-child et nth-last-child

Version CSS

Mixin SASS

[jQuery] Cibler une popin fancybox en fonction du support (smartphone, tablette, desktop …) et lui passer des arguments différents

[PHPTAL] Afficher sous condition un tag qui n’est pas fermé avec tal:omit-tag

Equivalent en PHP

[jQuery] Au clic sur un élément, scroller automatiquement jusqu’à un autre élément présent dans le DOM

[jQuery] Détecter un changement dans le contenu d’un élément HTML (plug-in)

Le plug-in

Le code HTML

Utiliser le plug-in

Si le plug-in s’arrête de fonctionner après le 1er changement dans le DOM

[Bonnes pratiques] Conventions

[CSS] Les préfixes constructeurs obsolètes

Pas besoin de préfixes

Uniquement -moz

Uniquement -webkit

-webkit et -ms

[CSS] Sélection d’éléments, les sélecteurs avancés