Exercices CSS 21-30 + update v2.2

index.html

<!-- 
ajouter apès exercice 20 et supprimer la fin du document existant 
@version  2.20
@date     11.10.14 
@author   mi-ca
-->
          <article class="row ex21">
          <div class="desc col-sm-4">
            <h2><a name="css-ex21"><i class="ic-bookmark"></i></a>exercice 21</h2>
            <div class="content">
              <p>Créer une boîte avec une <b>hauteur fixée</b> (250px p.ex) qui contient du contenu textuel qui dépasse. Cette boîte est donc scrollable</p>
              <p>Voir le <a href="img/ex/ex21.mov">résultat</a>.</p>
            </div>
          </div>
          <div class="exemple col-sm-8">
          </div>
        </article>
        <article class="row ex22">
          <div class="desc col-sm-4">
            <h2><a name="css-ex22"><i class="ic-bookmark"></i></a>exercice 22</h2>
            <div class="content">
              <p>Créer deux <code>figure</code> contenant des images. Ces images sont plus grandes que les figures (800x800 p.ex). Elles doivent se center dans la figure et ne pas dépasser.</p>
              <p>Pour garder les gouttières utiliser un div englobant les <code>figure</code></p>
              <p>Voir le <a href="img/ex/ex22.png">résultat</a>.</p>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb2"></i>
              <p>La propriété css <code>overflow</code> permet de masquer le contenu qui sort de la boîte.</p>
              <p>Pour center l'image utiliser le positionnement absolut ou relatif.</p>
            </div>
          </div>
          <div class="exemple col-sm-8">
          </div>
        </article>
        <article class="row ex23">
          <div class="desc col-sm-4">
            <h2><a name="css-ex23"><i class="ic-bookmark"></i></a>exercice 23</h2>
            <div class="content">
              <p>Dans une boîte grise:</p>
              <p>Créer un div avec une icône et une couleur de fond emeraude.(pas de transparence)</p>
              <p>Créer un div avec du texte et une couleur de fond emeraude (le fond est transparent à 65%, le contenu n'est pas transparent)</p>
              <p>Créer un troisième div avec du texte et une couleur de fond emeraude (toute la boîte verte est transparente à 65%).</p>
              <p>Voir le <a href="img/ex/ex23.png">résultat</a>.</p>
            </div>
            <div class="tips clearfix">
              <i class="ic-eye"></i>
              <p>Faire la différence entre l'opacité d'une couleur de fond et l'opacité d'un objet.</p>
            </div>
          </div>
          <div class="exemple col-sm-8">
          </div>
        </article>
      </section>
      <section class="transition row" id="transition">
        <div class="row">
          <header class="clearfix padded">
            <h1 class="col-sm-3">Transitions</h1>
            <div class="col-sm-4">
              <h2>Objectifs</h2>
              <p>Apprendre les <b>transitions</b> css et les subtilités liées à la syntaxe.</p>
            </div>
            <div class="col-sm-5">
              <h2>Ressources</h2>
              <ul>
                <li><a href="http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html">Alsacreations les transitions</a></li>
                <li><a href="http://css-tricks.com/almanac/properties/t/transition/">Les transitions sur css-tricks</a></li>
              </ul>
            </div>
          </header>
        </div>
        <article class="row ex24">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex24"><i class="ic-bookmark"></i></a>exercice 24</h2>
            <div class="content">
              <p>Au survol du <code>div.exemple</code> de cet exercice, déplacer un carré emeraud contre la gauche de 150px.</p>
              <p>Voir le <a href="img/ex/24.mov">résultat</a></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-warning"></i>
              <p>Le survol s'effectue sur le rectangle <code>.exemple</code>. La transition est sur le carre. Vous devez utiliser l'héritage.</p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre emeraud">
            </div>
          </div>
        </article>
        <article class="row ex25">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex25"><i class="ic-bookmark"></i></a>exercice 25</h2>
            <div class="content">
              <p>Au survol du <code>div.exemple</code> de cet exercice, déplacer un carré rouge contre la gauche de jusqu'au bord droit.</p>
              <p>Voir le <a href="img/ex/25.mov">résultat</a></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb2"></i>
              <p>Les transitions ne peuvent pas changer de la valeur gauche à la valeur droite (<code>left</code> &amp; <code>right</code>) de ce fait il est pratique d'utiliser la propiété <code>calc()</code> pour atteindre facilement le bords droit en gardant l'animation sur la propriété <code>left</code>.</p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre red">
            </div>
          </div>
        </article>
        <article class="row ex26">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex26"><i class="ic-bookmark"></i></a>exercice 26</h2>
            <div class="content">
              <p>Au survol du <code>div.exemple</code> de cet exercice, déplacer un carré bleu foncé contre la gauche jusqu'au bord droit.(idem ex25)</p>
              <p>Il doit réduire sa taille à 100 pixel, devenir bleu clair et rester centré verticalement dans le <code>div.exemple</code>.</p>
              <p>Voir le <a href="img/ex/26.mov">résultat</a></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb2"></i>
              <p>Vous pouvez faire la transition sur tous les éléments à l'aide du mot-clé <code>all</code> dans les propriétés.</p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre darkBlue">
            </div>
          </div>
        </article>
        <article class="row ex27">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex27"><i class="ic-bookmark"></i></a>exercice 27</h2>
            <div class="content">
              <p>Au survol du <code>div.exemple</code> de cet exercice, déplacer un carré jaune contre la gauche jusqu'à la moitié de la boîte grise</p>
              <p>Il doit réduire sa taille à 100 pixel, devenir orange et rester centré verticalement dans le <code>div.exemple</code>.</p>
              <p>Appliquer une rotation de 45degrés, ajouter 10px de bords arrondis et une ombre à 20% de noir de 0 pixel de décalage et 20px de flou.</p>
              <p>Voir le <a href="img/ex/27.mov">résultat</a></p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre yellow">
            </div>
          </div>
        </article>
        <article class="row ex28">
          <div class="desc col-sm-4">
            <h2><a name="selector-ex28"><i class="ic-bookmark"></i></a>exercice 28</h2>
            <div class="content">
              <p>Au survol du <code>div.exemple</code> de cet exercice, faire tourner de 360 degré le carre violet</p>

              <p>Voir le <a href="img/ex/28.mov">résultat</a></p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre purple">
            </div>
          </div>
        </article>
        <article class="row ex29">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex29"><i class="ic-bookmark"></i></a>exercice 29</h2>
            <div class="content">
              <p>Au survol du <code>div.exemple</code> de cet exercice, déplacer un carre vert foncé jusqu'au bords droit en une demi seconde.</p>
              <p>Lors du désurvol le carre reprends sa position initiale après 1 seconde de délai et effectue le trajet de retour en 1.5 seconde.</p>

              <p>Voir le <a href="img/ex/29.mov">résultat</a></p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre darkGreen">
            </div>
          </div>
        </article>
        <article class="row ex30">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex30"><i class="ic-bookmark"></i></a>exercice 30</h2>
            <div class="content">
              <p>Deux images (<a href="http://lorempixel.com/400/200/food/7/">a</a> &amp; <a href="http://lorempixel.com/400/200/food/10/">b</a>) sont positionnées les unes sur les autres. Lors du survol du <code>div.exemple</code>, une des images se cache et laisse apparaitre la deuxième.</p>
              <p>Voir le <a href="img/ex/30.mov">résultat</a></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb2"></i>
              <p>Utiliser le positionnement <code>absolut</code> pour supperposer les images.</p>
              <p>Jouer avec l'opacité pour effectuer la transition progressive des images.</p>
            </div>
          </div>
          <div class="exemple col-sm-8">

          </div>
        </article>
      </section>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
    <script src="js/plugins.min.js"></script>
    <script src="js/main.js"></script>
  </body>
  </html>

Instructions

1° Copier le contenu de la partie index.html et le coller après la balise de fermeture de l'article de l'exercice 20 
   Attention : supprimer la fermeture de section et le reste du document
2° remplacer le fichier mi-ca.css par le nouveau (faire du copier-coller pour conserver les accents)
3° remplacer le fichier main.js par le nouveau (faire du copier-coller pour conserver les accents)
4° remplacer le fichier plugin.min.js par le nouveau (utiliser le bouton row)
5° sur le serveur copier-coller le fichier "screenshot_ex.zip" dans votre dossier "img" puis SUPPRIMER le dossier "ex" existant,
   déziper le "screenshot_ex.zip" et finalement supprimer le "screenshot_ex.zip"

main.js

$(document).ready(function(){
  var $menuLinks=''; // variable utilisée pour stocker les sous-menus
  setSubMenu(); // appel de la fonction qui génère automatiquement les sous-menus
  $('.nav a').smoothScroll({preventDefault: false}); // déplacement animé pour les ancres
}) // fin du document ready


  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
   * addAnchorToArticle
   * ======= mi-ca.ch =======
   * Cette fonction ajoute des ancres à tous les exercices
   * Corrige un oubli lors de la première release
   * Ces ancres sont décalées de 70px grace à la classe anchor
   * évitant ainsi que l'exercice ne soit caché par la barre des menu
   * ======= oct.2014 =======
   * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  function addAnchorToArticle(){
    var $name=$(this).attr('name'); // récupère le nom de l'ancre
    // créer une nouvelle ancre avec la classe .anchor et l'insert avant l'anchre déjà présente
    var $anchor=$('<a/>').attr({'id':$name,'class':'anchor'}).insertBefore($(this));
    // met à jour la variable contenant le sous-menu de la section
    $menuLinks+='<li><a href="#'+$name+'">'+$(this).parents('h2').text()+'</a></li>';
  }



  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
   * setSubMenu
   * ======= mi-ca.ch =======
   * Cette fonction parcours toutes les sections de la page
   * Dans chacune des sections, elle repère les articles et génère un sous-menu
   * ======= oct.2014 =======
   * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  function setSubMenu(){
    $('section').each(function(){ // parcours toutes les sections
      $menuLinks='<ul class="subMenu dropdown">'; // prépare le sous-menu de la section
      // dans cette section parcours tous les liens dans les titres des exercices (ancres déjà présente mais non décalée donc bug avec la barre de navigation)
      // et à l'aide de la fonction addAnchorToArticle créer de nouvelles ancres et les items du sous-menu
      $(this).find('article h2 a[name]').each(addAnchorToArticle);
      $menuLinks+='</ul>'; // ferme le sous-menu
      $('ul.nav li a[href="#'+$(this).attr('id')+'"]').parent().append($menuLinks);// ajoute le sous-menu à la barre de nav
      $menuLinks=''; // reset la variable (pour la prochaine section)
    });// fin du each//section -> fin du parcours de toutes les sections
  } // fin de la fonctions setSubMenu

mi-ca.css

/* HEADER */
header.darkBlue{
/* propriétés pour le positionnement */
  position:fixed; /* figé sur le viewport */
  top:0;
  left:0;
  width:100%;/* occupe toute la largeur du viewport (sinon que la taille de son contenu) */
  z-index:1; /* permet de forcer son affichage par dessus les blocs qui suivent (profondeur) */

/* polices & couleurs */
  color:#ecf0f1;
  opacity: .96;
}
header.darkBlue h1{
  font-size:29px; /* exercices */
  line-height: 1;
  margin: 3px 0;
}
header.darkBlue h1 b{ /* CSS */
  color:#3498db;
  font-size:35px;
  line-height: 1;
  letter-spacing:-0.05em;
}
header.darkBlue h1 i{ /* icone 3 */
  display: inline-block;
  margin-left: .25em;
}
/* nav */
header.darkBlue ul.nav{
  margin: 0;
  padding: 0;
  height: 70px;
}
header.darkBlue ul.nav > li{
  display: block;
  padding: 0 8px;
  border-right:1px solid #ddd;
  height: 100%;
  float: left;
}
header.darkBlue ul.nav > li a{
  color:#ddd;
  box-sizing:border-box;
  height: 100%;
  display: block;
  text-align: center;
  font-size: 20px;
  padding: 0 8px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
header.darkBlue ul.nav > li a:hover,header.darkBlue ul.nav > li.active a{
  background: rgba(52, 152, 219,.8);
}
header.darkBlue ul.nav>li a:after{
  content:' ';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(52, 152, 219,.8);
  margin-left: -10px;
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  left: 50%;
  bottom: -25px;
  transition:bottom .2s ease-out .1s;
}

header.darkBlue ul.nav > li a:hover:after,header.darkBlue ul.nav>li.active a:after{
  bottom:-10px;
  background: #34495e;
}
header.darkBlue ul.nav > li a span{
  display: block;
  position: relative;
  top: 50%;
  transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
}

ul.subMenu{
  position: absolute;
  left: 0;
  padding: 0;
  height: auto;
  width: 140px;
  background: #34495e;
  display: none;
}
ul.nav li:hover ul.subMenu{
  display: block;
}
ul.subMenu li{
  display: block;
  width: 140px;
  line-height: 1.6;
  border-top: 1px solid rgb(82, 93, 114);
}
li.active ul.subMenu li a{
  background: none!important;
}

header.darkBlue li.active ul.subMenu li a:after,
header.darkBlue ul.nav li ul.subMenu li a:hover:after{
  content:'';
  display: none;
}


/* SECTIONS */
section{
  border-top:4px solid #7f8c8d;
  padding-top:1px;
  margin-top: 25px;
}
section header{
  background: #bdc3c7;
  padding-bottom:25px;
}
.padded{
  margin:0 15px 50px 15px;
}
a.anchor{display: block; position: relative; top: -100px; width:1px;height: 1px;}
/*titres*/
section header h1,
section header h2{
  color: #34495e;
  font-weight: 500;
  line-height: 1.14;
  margin-top: 0;
  padding-top: .17em;
  font-family: 'Cabin Condensed','Abel','Helvetica Neue',Helvetica,sans-serif;
}
section header h1{
  font-size: 37px;
}
section header h2{
  padding-top: 1em;
  font-size: 21px;
}
section header h1:after,
section header .col-md-4:after{
  content:' ';
  height: 41px;
  border-right: 1px solid #34495e;
  position:absolute;
  right:0;
  top:0;
}
/* Articles */
article .ic-bookmark{
  font-size: 20px;
  margin-right: 4px;
}

article h2 a:hover{
  text-decoration: none;
}

.selectors article .ic-bookmark{
  color:#c0392b;
}
.css3 article .ic-bookmark{
  color:#34495e;
}
.transition article .ic-bookmark{
  color:#1abc9c;
}
article h2{
  font-family: 'Cabin Condensed','Abel','Helvetica Neue',Helvetica,sans-serif;
  font-weight:500;
  color:#2c3e50;
}
article .content{
  padding-bottom: 1em;
  margin-bottom: .5em;
}
article .content:after {
  content:' ';
  height: 1em;
  display:block;
  position:relative;
  width: 50%;
  left:50%;
  transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  border-bottom:1px solid rgba(52,73,94,.6);
}

article .tips{
  border: 1px solid #bfbfbf;
  background: #ecf0f1;
  border-radius: 3px;
  padding-top: .5em;
  display:table; /* permet de centrer verticalement sans connaître la hauteur */
                 /* src : http://css-tricks.com/centering-in-the-unknown/ */
}
article .tips i{
  display: table-cell; /* réagit comme une cellule de tableau TD */
  vertical-align: middle; /* et du coup permet de lui attribuer le fameux V-align */
  position: relative;
  top: -4px;
  width: 20%;
  text-align: center;
  font-size: 25px;
}
article .tips p{
  display: inline-block;
  float: left;
  width: 98%;
}
.exemple{
  min-height:300px;
  margin-top: 30px;

}
article {
  border-bottom: 4px solid rgba(127,140,141,.2);
  padding-bottom: 50px;
}
section article:last-child{
  border:none;
}
img{
  max-width:100%;
}

.exemple li{
  margin: 3px;
  padding: 3px;
}
.exemple p{
  max-width:485px;
}

plugins.min.js

/*!
 * Smooth Scroll - v1.5.0 - 2014-08-11
 * https://github.com/kswedberg/jquery-smooth-scroll
 * Copyright (c) 2014 Karl Swedberg
 * Licensed MIT (https://github.com/kswedberg/jquery-smooth-scroll/blob/master/LICENSE-MIT)
 */
(function(t){function e(t){return t.replace(/(:|\.)/g,"\\$1")}var l="1.5.0",o={},s={exclude:[],excludeWithin:[],offset:0,direction:"top",scrollElement:null,scrollTarget:null,beforeScroll:function(){},afterScroll:function(){},easing:"swing",speed:400,autoCoefficient:2,preventDefault:!0},n=function(e){var l=[],o=!1,s=e.dir&&"left"===e.dir?"scrollLeft":"scrollTop";return this.each(function(){if(this!==document&&this!==window){var e=t(this);e[s]()>0?l.push(this):(e[s](1),o=e[s]()>0,o&&l.push(this),e[s](0))}}),l.length||this.each(function(){"BODY"===this.nodeName&&(l=[this])}),"first"===e.el&&l.length>1&&(l=[l[0]]),l};t.fn.extend({scrollable:function(t){var e=n.call(this,{dir:t});return this.pushStack(e)},firstScrollable:function(t){var e=n.call(this,{el:"first",dir:t});return this.pushStack(e)},smoothScroll:function(l,o){if(l=l||{},"options"===l)return o?this.each(function(){var e=t(this),l=t.extend(e.data("ssOpts")||{},o);t(this).data("ssOpts",l)}):this.first().data("ssOpts");var s=t.extend({},t.fn.smoothScroll.defaults,l),n=t.smoothScroll.filterPath(location.pathname);return this.unbind("click.smoothscroll").bind("click.smoothscroll",function(l){var o=this,r=t(this),i=t.extend({},s,r.data("ssOpts")||{}),c=s.exclude,a=i.excludeWithin,f=0,h=0,u=!0,d={},p=location.hostname===o.hostname||!o.hostname,m=i.scrollTarget||(t.smoothScroll.filterPath(o.pathname)||n)===n,S=e(o.hash);if(i.scrollTarget||p&&m&&S){for(;u&&c.length>f;)r.is(e(c[f++]))&&(u=!1);for(;u&&a.length>h;)r.closest(a[h++]).length&&(u=!1)}else u=!1;u&&(i.preventDefault&&l.preventDefault(),t.extend(d,i,{scrollTarget:i.scrollTarget||S,link:o}),t.smoothScroll(d))}),this}}),t.smoothScroll=function(e,l){if("options"===e&&"object"==typeof l)return t.extend(o,l);var s,n,r,i,c,a=0,f="offset",h="scrollTop",u={},d={};"number"==typeof e?(s=t.extend({link:null},t.fn.smoothScroll.defaults,o),r=e):(s=t.extend({link:null},t.fn.smoothScroll.defaults,e||{},o),s.scrollElement&&(f="position","static"===s.scrollElement.css("position")&&s.scrollElement.css("position","relative"))),h="left"===s.direction?"scrollLeft":h,s.scrollElement?(n=s.scrollElement,/^(?:HTML|BODY)$/.test(n[0].nodeName)||(a=n[h]())):n=t("html, body").firstScrollable(s.direction),s.beforeScroll.call(n,s),r="number"==typeof e?e:l||t(s.scrollTarget)[f]()&&t(s.scrollTarget)[f]()[s.direction]||0,u[h]=r+a+s.offset,i=s.speed,"auto"===i&&(c=u[h]-n.scrollTop(),0>c&&(c*=-1),i=c/s.autoCoefficient),d={duration:i,easing:s.easing,complete:function(){s.afterScroll.call(s.link,s)}},s.step&&(d.step=s.step),n.length?n.stop().animate(u,d):s.afterScroll.call(s.link,s)},t.smoothScroll.version=l,t.smoothScroll.filterPath=function(t){return t=t||"",t.replace(/^\//,"").replace(/(?:index|default).[a-zA-Z]{3,4}$/,"").replace(/\/$/,"")},t.fn.smoothScroll.defaults=s})(jQuery);


/* =============================================================
 * bootstrap-scrollspy.js v2.1.1
 * http://twitter.github.com/bootstrap/javascript.html#scrollspy
 * =============================================================
 * Copyright 2012 Twitter, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============================================================== */
!function(t){"use strict";function s(s,e){var o,i=t.proxy(this.process,this),r=t(t(s).is("body")?window:s);this.options=t.extend({},t.fn.scrollspy.defaults,e),this.$scrollElement=r.on("scroll.scroll-spy.data-api",i),this.selector=(this.options.target||(o=t(s).attr("href"))&&o.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav > li > a",this.$body=t("body"),this.refresh(),this.process()}s.prototype={constructor:s,refresh:function(){var s,e=this;this.offsets=t([]),this.targets=t([]),s=this.$body.find(this.selector).map(function(){var s=t(this),e=s.data("target")||s.attr("href"),o=/^#\w/.test(e)&&t(e);return o&&o.length&&[[o.position().top,e]]||null}).sort(function(t,s){return t[0]-s[0]}).each(function(){e.offsets.push(this[0]),e.targets.push(this[1])})},process:function(){var t,s=this.$scrollElement.scrollTop()+this.options.offset,e=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,o=e-this.$scrollElement.height(),i=this.offsets,r=this.targets,a=this.activeTarget;if(s>=o)return a!=(t=r.last()[0])&&this.activate(t);for(t=i.length;t--;)a!=r[t]&&s>=i[t]&&(!i[t+1]||s<=i[t+1])&&this.activate(r[t])},activate:function(s){var e,o;this.activeTarget=s,t(this.selector).parent(".active").removeClass("active"),o=this.selector+'[data-target="'+s+'"],'+this.selector+'[href="'+s+'"]',e=t(o).parent("li").addClass("active"),e.parent(".dropdown-menu").length&&(e=e.closest("li.dropdown").addClass("active")),e.trigger("activate")}},t.fn.scrollspy=function(e){return this.each(function(){var o=t(this),i=o.data("scrollspy"),r="object"==typeof e&&e;i||o.data("scrollspy",i=new s(this,r)),"string"==typeof e&&i[e]()})},t.fn.scrollspy.Constructor=s,t.fn.scrollspy.defaults={offset:10},t(window).on("load",function(){t('[data-spy="scroll"]').each(function(){var s=t(this);s.scrollspy(s.data())})})}(window.jQuery);