exercices jQuery : ex 43 - 71 + update v4.0

_instructions

Instructions pour la mise à jour 
des exercices css v3.0
 
-- 12 jan. 2015 -- 
 
*********************************

1° Fichier index.html
   line ~36 
   Ajouter un nouvel élément de menu jQuery
   <li><a href="#jQuery"><span>jQuery</span></a></li>
   
   Ajout de la rubrique jQuery dans le menu
   
*********************************

2° Fichier: css/mi-ca.css 
   à la fin du fichier
   Ajouter les lignes suivantes:
   
header ul.nav li:nth-child(5) ul{
    -moz-column-count: 3;
    -moz-column-gap: 8px;
    -webkit-column-count: 3;
    -webkit-column-gap: 8px;
    column-count: 3;
    column-gap: 8px;
    width: 420px;
}
.jQuery article .ic-bookmark{
    color:#f1c40f;
}
   
*********************************

3° Fichier: index.html
   Juste après la fermeture de la </section> des transitions 
   Mais avant la fermeture du </div> .container
   
   Ajouter le fichier index_update4.0.html
   

*********************************

4° Fichier: css/main.css 
   A la fin de la partie author's styles (soit juste avant les Media Queries
   
   Ajouter le fichier main_update4.0.css

*********************************
Bon apprentissage
   

index_update4.0.html

<!-- jQuery v4.0 -->
  <section class="jQuery row" id="jQuery">
        <div class="row">
          <header class="clearfix padded">
            <h1 class="col-sm-3">jQuery</h1>
            <div class="col-sm-4">
              <h2>Objectifs</h2>
              <p>Les bases du <em>framework</em> jQuery</p>
              <p>Quelques manipulation en pur javascript</p>
            </div>
            <div class="col-sm-5">
              <h2>Ressources</h2>
              <ul>
                <li><a href="http://api.jquery.com/">Documentation jQuery (officielle)</a></li>
                <li><a href="http://jqapi.com/">Documentation plus lisible</a></li>
                <li><a href="http://jquery.developpeur-web2.com/documentation.php">Documentation en français (obsolette)</a></li>
                <li><a href="http://www.gchagnon.fr/cours/dhtml/jquery.html">Intro à jQuery (4ans)</a></li>
              </ul>
            </div>
          </header>
        </div>
        <article class="row ex43">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex43"><i class="ic-bookmark"></i></a>Document ready</h2>
            <div class="content">
              <p>La librairie jQuery à besoin d'attendre que l'arbre html le <abbr title="Document Object Model">DOM</abbr> soit completement chargé et analyser par le navigateur.</p>
              <p>Ainsi, le code ci-contre doit toujours être ajouté au fichier <code>js/main.js</code>

            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb2"></i>
              <p>Ne pas ajouter plusieurs instences de ce code mais regrouper les instructions dans un seul <code>$(document).ready(function(){});</code></p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <pre>
              $(document).ready(function(){
                // vos instructions jQuery ici
              });
            </pre>
          </div>
        </article>
        <article class="row ex44">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex44"><i class="ic-bookmark"></i></a>exercice 44</h2>
            <div class="content">
              <p>Au click, ajouter la classe <code>.emeraud</code> au <code>.carre</code></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-eye"></i>
              <p>Utiliser de préférence une fonction nommée pour l'action du click</p>
              <p>Cette fonction peut être placée en dehors du <code>$(document).ready().</code>. Par contre l'appel doit être dans la fonction <code>$(document).ready()</code></p>
              <p>Il ne faut pas mettre de <code>.</code> devant le nom de la classe avec les méthodes natives jQuery finissant par <em>class</em> telles que (<code>addClass</code>,<code>removeClass</code>,<code>toggleClass</code>)</p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre"></div>
          </div>
        </article>
        <article class="row ex45">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex45"><i class="ic-bookmark"></i></a>exercice 45</h2>
            <div class="content">
              <p>Au click, supprimer la classe <code>.emeraud</code> au <code>.carre</code></p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre emeraud"></div>
          </div>
        </article>
        <article class="row ex46">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex46"><i class="ic-bookmark"></i></a>exercice 46</h2>
            <div class="content">
              <p>Au click, successivement ajouter et supprimer la classe <code>.emeraud</code> au <code>.carre</code></p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre emeraud"></div>
          </div>
        </article>
        <article class="row ex47">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex47"><i class="ic-bookmark"></i></a>exercice 47</h2>
            <div class="content">
              <p>Utilisation de la <b>console</b> et des <b>alert</b></p>
              <p>La console (située dans l'inspecteur du navigateur) ou les alertes sont des outils qui permettent le débugage : on préfère la console car elle ne demande pas d'action de l'utilsateur.</p>
              <p>Ces outils permettent de donner l'état d'un élément à un moment précis. Et ainsi de contrôler que votre code s'execute correctement (détecter les fautes de frappes, connaître l'état d'un élément, etc);</p>
              <p><b>Exercice a):</b> Au click sur le <code>.carre.emeraud</code> exécuter un <code>console.log()</code> qui affichera le mot "test console"</p>
              <p><b>Exercice b):</b> Au click sur le <code>.carre.orange</code> exécuter une <code>alert</code> qui affichera le mot "test alert"</p>
            </div>
            <div class="tips clearfix">
              <i class="ic-eye"></i>
              <p>Afficher/masquer la console dans l'inspecteur avec la touche <key>esc</key></p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre emeraud"></div>
            <div class="carre orange"></div>
          </div>
        </article>
        <article class="row ex48">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex48"><i class="ic-bookmark"></i></a>exercice 48</h2>
            <div class="content">
              <p>Au <b>survol</b>, successivement ajouter et supprimer la classe <code>.emeraud</code> au <code>.carre</code></p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre emeraud"></div>
          </div>
        </article>
        <article class="row ex49">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex49"><i class="ic-bookmark"></i></a>exercice 49</h2>
            <div class="content">
              <p>Au <b>survol</b>, supprimer la classe <code>.emeraud</code> sur le carre et ajouter la classe <code>.purple</code></p>
              <p>Au <b>désurvol</b>, supprimer la classe <code>.purple</code> sur le carre et ajouter la classe <code>.orange</code></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-eye"></i>
              <p>Utiliser deux fonctions distinctes appelées dans la méthode <code>.hover(fonction1,fonction2)</code></p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre emeraud"></div>
          </div>
        </article>
        <article class="row ex50">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex50"><i class="ic-bookmark"></i></a>exercice 50</h2>
            <div class="content">
              <p>A l'aide de la methode <code>.html()</code> : </p>
              <p><b>exercice a)</b> : au click sur le <code>.carre.white</code> : afficher une alert contenant le contenu de ce carré</p>
              <p><b>exercice b)</b> : au click sur le <code>.carre.lightBlue</code> : modifier le contenu html de ce carré par un autre html p.ex: (<code>&lt;p&gt;&lt;i&gt;Salut&lt;/i&gt; jQuery&lt;/p&gt;</code>)</p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre white"><p>Contenu <b>du carre</b> avec un <a href="#jQuery-ex50">lien</a></p></div>
            <div class="carre lightBlue"><p>Contenu textuel à changer</p></div>
          </div>
        </article>
        <article class="row ex51">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex51"><i class="ic-bookmark"></i></a>exercice 51</h2>
            <div class="content">
              <p>A l'aide de la methode <code>.attr()</code> : </p>
              <p><b>exercice a)</b> : au click sur le <code>.carre.red</code> : afficher une alert contenant l'attribut <code>data-info</code></p>
              <p><b>exercice b)</b> : au click sur le <code>.carre.yellow</code> : modifier l'attribut <code>href</code> du lien et le faire pointer vers votre vcard online p.ex eikon.mi-ca.ch/03_vcard/cm2X/XX_XXXXXXX</p>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb2"></i>
              <p>Pour l'exercice b) utiliser la methode <code>.find()</code> pour cibler le lien sans lui donner de classe et d'id</p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre red" data-info="Ceci est un carre rouge. En html5, il est possible d'ajouter des attibuts aux balises. Ces attributs peuvent contenir des informations ou des options pour les plugins jQuery.Elles doivent toujours commencer par 'data-'"></div>
            <div class="carre yellow"><p><a href="#jQuery-ex51">Lien</a></p></div>
          </div>
        </article>
        <article class="row ex52">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex52"><i class="ic-bookmark"></i></a>exercice 52</h2>
            <div class="content">
              <p>A l'aide de la methode <code>.css()</code> : </p>
              <p>Au click sur le <code>.carre.emeraud</code> : changer les styles taille et couleur de la bordure, background, couleur et taille du texte</p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre emeraud"><p>Lorem ipsum</p></div>
          </div>
        </article>
        <article class="row ex53">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex53"><i class="ic-bookmark"></i></a>exercice 53</h2>
            <div class="content">
              <p>A l'aide de la methode <code>.css()</code> : </p>
              <p>Au click sur le <code>.carre.darkBlue</code> on récupère et affiche dans une alert la propriété css <code>line-height</code></p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre darkBlue"><p>Lorem ipsum</p></div>
          </div>
        </article>
        <article class="row ex54">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex54"><i class="ic-bookmark"></i></a>exercice 54</h2>
            <div class="content">
              <p>A l'aide de la methode <code>.append()</code> : </p>
              <p>Au click sur le <code>.carre.lightBlue</code> on en ajoute un autre <code>carre.yellow</code> à côté (après)</p>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-eye"></i>
              <p>Le compteur est géré via les css (regarder comment c'est fait) </p>
            </div>
          </div>
          <div class="exemple col-sm-8 clearfix">
            <div class="carre darkBlue"></div>
          </div>
        </article>
        <article class="row ex55">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex55"><i class="ic-bookmark"></i></a>exercice 55</h2>
            <div class="content">
              <p>A l'aide de la methode <code>.prepend()</code> : </p>
              <p>Au click sur le <code>.carre.lightBlue</code> on en ajoute une autre <code>carre.emeraud</code> avant</p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre lightBlue"></div>
          </div>
        </article>
        <article class="row ex56">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex56"><i class="ic-bookmark"></i></a>exercice 56</h2>
            <div class="content">
              <p>A l'aide de la methode <code>.parent()</code> : </p>
              <p>Au click sur le <code>.carre.orange</code> on ajoute une classe <code>.emeraud</code> au container parent direct</p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre orange"></div>
          </div>
        </article>
        <article class="row ex57">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex57"><i class="ic-bookmark"></i></a>exercice 57</h2>
            <div class="content">
              <p>A l'aide de la methode <code>.parent()</code> utilisée 2x de suite: </p>
              <p>Au click sur le <code>.carre.white</code> on ajoute une classe <code>.lightBlue</code> au  2ème parent</p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre white"></div>
          </div>
        </article>
        <article class="row ex58">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex58"><i class="ic-bookmark"></i></a>exercice 58</h2>
            <div class="content">
              <p>A l'aide de la methode <code>.parents()</code> (attention avec un <b>s</b>): </p>
              <p>Au click sur le <code>.carre.red</code> on ajoute une classe <code>.lightGreen</code> à la première section ancètre </p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre red"></div>
          </div>
        </article>
        <article class="row ex59">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex59"><i class="ic-bookmark"></i></a>exercice 59</h2>
            <div class="content">
              <p>A l'aide de la methode <code>.parents()</code> &amp; <code>.find()</code> : </p>
              <p>Au click sur le <code>.carre.yellow</code> on ajoute une classe <code>.darkBlue</code> au titre <code>&lt;h2&gt;</code> de cet exercice </p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre yellow"></div>
          </div>
        </article>
        <article class="row ex60">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex60"><i class="ic-bookmark"></i></a>exercice 60</h2>
            <div class="content">
              <p>A l'aide de la methode <code>.hide()</code> &amp; <code>.show()</code> : </p>
              <p>Au click sur le <code>button</code> on affiche le <code>carre.lightGreen</code> et on cache le <code>carre.lightBlue</code> </p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre lightGreen" style="display:none"></div>
            <div class="carre lightBlue"></div>
            <button>Affiche / Masque </button>
          </div>
        </article>
        <article class="row ex61">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex61"><i class="ic-bookmark"></i></a>exercice 61</h2>
            <div class="content">
              <p>Faire le même exercice que le 60 mais avec la methode <code>.toggle()</code>: </p>
              <p>Au click sur le <code>button</code> on affiche ou masque le <code>carre.lightGreen</code> et on affiche ou masque le <code>carre.lightBlue</code> </p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre lightGreen" style="display:none"></div>
            <div class="carre lightBlue"></div>
            <button>Affiche / Masque </button>
          </div>
        </article>
        <article class="row ex62">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex62"><i class="ic-bookmark"></i></a>exercice 62</h2>
            <div class="content">
              <p>Faire le même exercice que le 60 mais avec la methode <code>.parent()</code> &amp; <code>.toggleClass()</code>: </p>
              <p>Au click sur le <code>button</code> on affiche ou masque le <code>carre.lightGreen</code> et on affiche ou masque le <code>carre.lightBlue</code> en ajoutant une classe à <code>.exemple</code></p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre lightGreen"></div>
            <div class="carre lightBlue"></div>
            <button>Affiche / Masque </button>
          </div>
        </article>
        <article class="row ex63">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex63"><i class="ic-bookmark"></i></a>exercice 63</h2>
            <div class="content">
              <p>Afficher et masquer les carrés avec les méthodes <code>.slideUp()</code> &amp; <code>.slideDown()</code>: </p>
              <p>Au click sur le <code>button</code> on affiche  le <code>carre.lightGreen</code> et on masque le <code>carre.lightBlue</code></p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre lightGreen" style="display:none"></div>
            <div class="carre lightBlue"></div>
            <button>Affiche / Masque </button>
          </div>
        </article>
        <article class="row ex64">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex64"><i class="ic-bookmark"></i></a>exercice 64</h2>
            <div class="content">
              <p>Idem 63 mais avec la méthode <code>.slideToggle()</code>: </p>
              <p>Au click sur le <code>button</code> on affiche  le <code>carre.lightGreen</code> et on masque le <code>carre.lightBlue</code></p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre lightGreen" style="display:none"></div>
            <div class="carre lightBlue"></div>
            <button>Affiche / Masque </button>
          </div>
        </article>

        <article class="row ex65">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex65"><i class="ic-bookmark"></i></a>exercice 65</h2>
            <div class="content">
              <p>Faire le même exercice que le 60 mais avec la methode <code>.fadeIn()</code> &amp; <code>.fadeOut()</code>: </p>
              <p>Au click sur le <code>button</code> on affiche ou masque le <code>carre.orange</code> et on affiche ou masque le <code>carre.yellow</code></p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre orange" style="display:none"></div>
            <div class="carre yellow"></div>
            <button>Affiche / Masque </button>
          </div>
        </article>
        <article class="row ex66">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex66"><i class="ic-bookmark"></i></a>exercice 66</h2>
            <div class="content">
              <p>Afficher et masquer les carrés avec les méthodes <code>.fadeToggle()</code>: </p>
              <p>Au click sur le <code>button</code> on affiche  le <code>carre.orange</code> et on masque le <code>carre.yellow</code> en 2,5 secondes</p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre orange" style="display:none"></div>
            <div class="carre yellow"></div>
            <button>Affiche / Masque </button>
          </div>
        </article>
        <article class="row ex67">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex67"><i class="ic-bookmark"></i></a>exercice 67</h2>
            <div class="content">
              <p>A l'aide de la méthode <code>.animate()</code> déplacer le carré vert de 40px à droite à chaque click </p>

            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre lightGreen"></div>
          </div>
        </article>
        <article class="row ex68">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex68"><i class="ic-bookmark"></i></a>exercice 68</h2>
            <div class="content">
              <p>A l'aide de la méthode <code>.animate()</code> déplacer le carré violet de 240px à droite puis dans une fonction de <em>callback</em> le faire revenir </p>

            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre purple"></div>
          </div>
        </article>
        <article class="row ex69">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex69"><i class="ic-bookmark"></i></a>exercice 69</h2>
            <div class="content">
              <p>A l'aide de la méthode <code>.animate()</code> &amp; <code>delay()</code> déplacer le carré blue de 240px à droite puis dans une fonction de <em>callback</em> le faire revenir mais seulement après avoir attendu 1seconde</p>

            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre darkBlue"></div>
          </div>
        </article>
        <article class="row ex70">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex70"><i class="ic-bookmark"></i></a>exercice 70</h2>
            <div class="content">
              <p>Lors d'un click sur un carre, on ajoute/supprime la classe active</p>
              <p>Lors d'un click sur le bouton get classes, il affiche dans la console un résumé de ce type :</p>
              <pre>
1 is active : false
2 is active : false
3 is active : false
4 is active : true
5 is active : true
6 is active : false
7 is active : false
8 is active : false
              </pre>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb"></i>
              <p><em>facultatif</em> : Utiliser la boucle <code>.each()</code> pour boucler sur tous les carrés</p>
              <p>Utiliser la methode <code>.hasClass()</code> pour questionner si un .carre à la classe active ou non</p>
            </div>
          </div>
          <div class="exemple col-sm-5">
            <div class="carre red" data-num="1"></div>
            <div class="carre red" data-num="2"></div>
            <div class="carre red" data-num="3"></div>
            <div class="carre red" data-num="4"></div>
            <div class="carre red" data-num="5"></div>
            <div class="carre red" data-num="6"></div>
            <div class="carre red" data-num="7"></div>
            <div class="carre red" data-num="8"></div>
          </div>
          <div class="col-sm-3 exemple" id="ex70info">
            <pre id="data"></pre>
            <button>get classes</button>
          </div>
        </article>
        <article class="row ex71">
          <div class="desc col-sm-4">
            <h2><a name="jQuery-ex71"><i class="ic-bookmark"></i></a>exercice 71</h2>
            <div class="content">
              <p><b>exercice a):</b> Lors d'un click sur un carre, on ajoute/supprime la classe active</p>
              <p>Lors d'un click sur le bouton <em>reset</em>, il supprime toutes les classes actives des carrés activés</p>
              ---
              <p><b>exercice b);</b> Lors d'un click sur le bouton <em>random</em>, il active/desactive 3 .carre aléatoirement parmis les 8</p>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb2"></i>
              <p>Pour l'aléatoire, il faut utiliser du pur javascript avec le code <code>Math.random()</code> (chiffre aléatoire de 0 à 1). En le multipliant par le nombre max et en l'arondissant avec <code>Math.round()</code> vous obtiendrai un chiffre rond</p>
              <p>Utiliser <code>:eq()</code> ou <code>:nth-child()</code> pour cibler ces carrés en jQuery</p>
            </div>
          </div>
          <div class="exemple col-sm-5">
            <div class="carre red" data-num="1"></div>
            <div class="carre red" data-num="2"></div>
            <div class="carre red" data-num="3"></div>
            <div class="carre red" data-num="4"></div>
            <div class="carre red" data-num="5"></div>
            <div class="carre red" data-num="6"></div>
            <div class="carre red" data-num="7"></div>
            <div class="carre red" data-num="8"></div>
          </div>
          <div class="col-sm-3 controls">
            <button class="reset">reset</button>
            <button class="random">random</button>
          </div>
        </article>
      </section>

main_update4.0.css

/* JQUERY */

/* grey box */
.ex44 .exemple,
.ex45 .exemple,
.ex46 .exemple,
.ex47 .exemple,
.ex48 .exemple,
.ex49 .exemple,
.ex50 .exemple,
.ex51 .exemple,
.ex52 .exemple,
.ex53 .exemple,
.ex54 .exemple,
.ex55 .exemple,
.ex56 .exemple,
.ex57 .exemple,
.ex58 .exemple,
.ex59 .exemple,
.ex60 .exemple,
.ex61 .exemple,
.ex62 .exemple,
.ex63 .exemple,
.ex64 .exemple,
.ex65 .exemple,
.ex66 .exemple,
.ex67 .exemple,
.ex68 .exemple,
.ex69 .exemple,
.ex70 .exemple,
.ex71 .exemple{
  background: #bdc3c7;
  height: 230px;
  min-height:230px;
  background-clip:content-box;
}
/* les carrés tailles & pos */
.ex44 .carre,
.ex45 .carre,
.ex46 .carre,
.ex48 .carre{
  border:1px solid #444;
}
.ex44 .carre,
.ex45 .carre,
.ex46 .carre,
.ex47 .carre,
.ex48 .carre,
.ex49 .carre,
.ex50 .carre,
.ex51 .carre,
.ex52 .carre,
.ex53 .carre,
.ex54 .carre,
.ex55 .carre,
.ex56 .carre,
.ex57 .carre,
.ex58 .carre,
.ex59 .carre,
.ex60 .carre,
.ex61 .carre,
.ex62 .carre,
.ex63 .carre,
.ex64 .carre,
.ex65 .carre,
.ex66 .carre,
.ex67 .carre,
.ex68 .carre,
.ex69 .carre,
.ex70 .carre,
.ex71 .carre{
  width: 200px;
  height: 200px;
  position: relative;
  left: 15px;
  top: 15px;
  transition: left .55s;

}
.ex67 .carre,.ex68 .carre,.ex69 .carre{
  transition: none;
}
/* les éventuels float */
.ex47 .carre,
.ex50 .carre,
.ex51 .carre,
.ex54 .carre,
.ex55 .carre,
.ex70 .carre,
.ex71 .carre{
  float: left;
  margin-right: 15px;
}
.ex60 .exemple,
.ex61 .exemple,
.ex62 .exemple,
.ex63 .exemple,
.ex64 .exemple{
  position: relative;
}
.ex60 .carre,
.ex61 .carre,
.ex62 .carre,
.ex63 .carre,
.ex64 .carre,
.ex65 .carre,
.ex66 .carre,
.ex67 .carre{
  position: absolute;
  left: 30px;top: 15px;
}

.ex60 button,
.ex62 button,
.ex61 button,
.ex63 button,
.ex64 button,
.ex65 button,
.ex66 button{
  position:absolute;
  left:50%;
  bottom:-2.3em;
  transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
}

.ex60 .carre.lightBlue,
.ex62 .carre.lightBlue,
.ex63 .carre.lightBlue,
.ex64 .carre.lightBlue,
.ex61 .carre.lightBlue,
.ex65 .carre.orange,
.ex66 .carre.orange{
  right: 30px;
  top: 15px;
  left: auto;
  position: absolute;
}
/* cas particuliers (+ petits carrés) */
.ex54 .carre,
.ex55 .carre,
.ex70 .carre,
.ex71 .carre{
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
  position: relative;
}
/* changement de la couleur par défaut sur les carrés foncés */
article .carre.darkBlue,h2.darkBlue{
  color:#fff;
}
/* les paragraphes */
.ex50 .carre p,
.ex51 .carre p,
.ex52 .carre p,
.ex53 .carre p{
  margin: 15px;
}
/* compteur ex54 */
.ex54{
  counter-reset: section;
}
.ex56 .exemple.emeraud{
  background: #1abc9c;
}
.ex54 .exemple,.ex55 .exemple{
  height: auto;
  padding-bottom: 15px;
}
.ex54 .carre:before{
  counter-increment: section;
  content :counter(section);
  font-size: 20px;
  width: 100%;
  text-align: center;
  line-height: 80px;
  position: absolute;
  top: 0;
}

.ex62 .exemple .carre.lightGreen,
.ex62 .exemple.active .carre.lightBlue{
  display: none;
}
.ex62 .exemple .carre.lightBlue,
.ex62 .exemple.active .carre.lightGreen{
  display: block;
}
.ex70 #ex70info pre{
  margin: 15px;
}
#ex70info button,
.ex71 button{
  left:50%;
  position: relative;
  transform:translateX(-50%);
}
#ex70info pre:before{
  content:'resultat:';
  display: block;
  font-size: 1.2em;
  text-align: center;
  margin-bottom: .8em;
  font-family: 'Abel','Helvetica Neue',Helvetica,sans-serif;

}
.ex70 .carre:before,
.ex70 .carre:after,
.ex71 .carre:before,
.ex71 .carre:after{
  content:'';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 8px 0 8px;
  border-color: #ecf0f1 transparent transparent transparent;
  opacity:0;
  transition:opacity .4s ease .25s;
  position: absolute;
  top: 0;
  left: 50%;
  transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
}
.ex70 .carre:after,
.ex71 .carre:after{
  bottom: 0;
  top: auto;
  border-width: 0 8px 10px 8px;
  border-color: transparent transparent #ecf0f1 transparent;
}
.ex70 .carre.active:before,
.ex70 .carre.active:after,
.ex71 .carre.active:before,
.ex71 .carre.active:after{
  opacity:1;
}
.ex70 .carre,
.ex71 .carre{
  transition:all .25s ease;
}
.ex70 .carre.active,
.ex71 .carre.active{
  transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
}
.ex71 .carre:nth-child(odd).activem
.ex70 .carre:nth-child(odd).active{
  transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
}
.ex71 button{
display: block;
margin: 2em 0;
}
button{
  background: #e74c3c;
  color: #fff;
  border:none;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor:pointer;
  letter-spacing:0.1em;
  font-family: 'Cabin Condensed','Abel','Helvetica Neue',Helvetica,sans-serif;
}
button:focus{
  outline:none;
}
/* ##JQUERY */