HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<section id="timeline">
<div class="section-wrapper">
<div class="line">
<div class="year XVe dot complete js-mobile-default" data-mobiletext="XVe/XXe" data-timelinelabel="Incidents sporadiques" data-index="2"></div>
<div class="quarter q4 yXVe dot" data-mobiletext="" data-index="3"></div>
<div class="year y1505 dot" data-mobiletext="1505" data-timelinelabel="Contrôle partiel du Portugal" data-index="4"></div>
<div class="year y1658 dot" data-mobiletext="1658" data-timelinelabel="Contrôle partiel des Pays-bas" data-index="5"></div>
<div class="year y1796 dot" data-mobiletext="1796" data-timelinelabel="Colonisation Britanique (Ceylan)" data-index="6"></div>
<div class="year y1911 dot" data-mobiletext="1911" data-timelinelabel="Catégorisation par langue/religion" data-index="7"></div>
<div class="year y1948 dot" data-mobiletext="1948" data-timelinelabel="Indépendance" data-index="8"></div>
<div class="quarter q4 yXVe dot" data-mobiletext="0" data-index="3"></div>
<div class="year y1956 dot" data-mobiletext="1956" data-timelinelabel="Sinhala Only Actn, premières émeutes" data-index="9"></div>
<div class="year y1958 dot" data-mobiletext="1958" data-timelinelabel="Émeutes" data-index="10"></div>
<div class="year y1970 dot" data-mobiletext="70’" data-timelinelabel="Insurrection, émeutes, répression" data-index="11"></div>
<div class="quarter q4 y70 dot" data-mobiletext="70" data-index="11"></div>
<div class="year y1981 dot" data-mobiletext="1981" data-timelinelabel="Exactions de l'UNP" data-index="12"></div>
<div class="year y1983 dot" data-mobiletext="1983" data-timelinelabel="Le pogrom de juillet noir " data-index="13"></div>
<div class="year y1987 dot" data-mobiletext="1987" data-timelinelabel="Intervention Indienne" data-index="14">
</div>
<div class="year y1990 dot" data-mobiletext="1990" data-timelinelabel="Retrait des troupes indiennes" data-index="15">
</div>
<div class="year y2002 dot" data-mobiletext="2002" data-timelinelabel="Cessez-le-feu" data-index="16">
</div>
<div class="year y2009 dot" data-mobiletext="2009" data-timelinelabel="Fin du conflit armé" data-index="17">
</div>
</div> <!--fin section-wrapper-->
</section>
<section id="description">
<div class="section-wrapper">
<p id="p1" class="title"> <a href="https://www.lacor.info/film/demons_in_paradise/texte/goreau-ponceaud/note_4/" style="font-size:2em;">SRI LANKA </a></p>
<div data-index="1">
<p>XV<sup>e</sup> ▹ milieu du XX<sup>e</sup></p>
<p>Il est courant de décrire le conflit séparatiste comme l’expression de tensions millénaires. C’est oublier que les identités ne se sont cristallisées sous leur forme actuelle qu’assez tardivement. </p>
<p>Les relations entre Tamouls et Cinghalais n’ont pris de caractère conflictuel que lors de brèves périodes historiques : à part quelques incidents sporadiques dans les régions kandyennes, du XV<sup>e</sup> au milieu du XX<sup>e</sup> siècles, aucune tension ne les a opposés.</p>
</div>
<div class="text-default" data-index="2">
<p>XV<sup>e</sup> ▹ milieu du XX<sup>e</sup></p>
<p>Il est courant de décrire le conflit séparatiste comme l’expression de tensions millénaires. C’est oublier que les identités ne se sont cristallisées sous leur forme actuelle qu’assez tardivement. </p>
<p><br/>Les relations entre Tamouls et Cinghalais n’ont pris de caractère conflictuel que lors de brèves périodes historiques : à part quelques incidents sporadiques dans les régions kandyennes, du XV<sup>e</sup> au milieu du XX<sup>e</sup> siècles, aucune tension ne les a opposés.</p>
</div>
<div data-index="3">
<p>XV<sup>e</sup> ▹ milieu du XX<sup>e</sup></p>
<p>Il est courant de décrire le conflit séparatiste comme l’expression de tensions millénaires. C’est oublier que les identités ne se sont cristallisées sous leur forme actuelle qu’assez tardivement. </p>
<p><br/>Les relations entre Tamouls et Cinghalais n’ont pris de caractère conflictuel que lors de brèves périodes historiques : à part quelques incidents sporadiques dans les régions kandyennes, du XV<sup>e</sup> au milieu du XX<sup>e</sup> siècles, aucune tension ne les a opposés.</p>
</div>
<div data-index="4">
<p>Lorsque les Portugais prirent le contrôle des régions côtières de Sri Lanka en 1505, ils trouvèrent trois royaumes dans l’île : un royaume hindou dans la péninsule de Jaffna, un royaume cinghalais à Kandy et un deuxième royaume cinghalais sur la côte occidentale.</p>
</div>
<div data-index="5">
<p>En 1658, les Pays-Bas chassèrent les Portugais et occupèrent les zones côtières du pays.</p>
</div>
<div data-index="6">
<p>De 1796 à 1948, L’île est administrée par les britaniques. </p>
<p>Les Britanniques s’approprièrent des possessions hollandaises en 1796. En 1802, Ceylan devient colonie de la couronne.<br/><br/></p>
<p>En conquérant Kandy en 1815, les Britaniques complétèrent la colonisation de l’ensemble du territoire sri lankais. Il s’agit du premier contrôle unifié de l’île par un pays européen.<br/><br/></p>
<p>Les nationalistes cinghalais et certains historiens voient dans le processus de colonisation et de décolonisation les facteurs principaux initiant la crise sri-lankaise. Il faut dire que les politiques des administrateurs britanniques eurent un impact considérable sur la construction des identités : elles ne les inventèrent pas, mais donnèrent vie à l’épanouissement des politiques identitaires. Ces derniers sont alors fréquemment tenus comme responsables du renforcement de l'hostilité entre les deux peuples. Traditionnellement, l'administration du pays était partagée entre les royaumes cinghalais et tamouls et l'arrivée des Britanniques sera l'occasion de la première mise en place dans l'histoire de l'île d'une administration unifiée.<br/><br/></p>
</div>
<div data-index="7">
<p>En 1911, le choix est fait de regrouper dans une catégorie unique toutes les personnes qui ont pour langue maternelle le cinghalais (à l’exception des Musulmans cingalophones).</p>
<p>Les populations qui partagent comme langue maternelle le tamoul continuent d’être divisées, elles, en quatre catégories (« Tamouls ceylanais », « Tamouls indiens », « Musulmans ceylanais », « Musulmans indiens »). L’appartenance religieuse est prise en compte afin de distinguer les Musulmans tamoulophones des Tamouls hindouistes et chrétiens qui sont seuls à être considérés comme Tamouls. Enfin, les catégories « Musulman » et « Tamoul » sont chacune scindées en deux avec une distinction entre les personnes considérées comme « fils du sol » (« Tamouls sri lankais » et « Musulmans sri lankais ») et celles considérées comme ayant immigré d’Inde à la suite de l’arrivée des Européens.<br/><br/></p>
<p>La question est complexe mais très importante sur le plan social et politique car elle joue sur la notion d’identité et est à la source des luttes pour le pouvoir.<br/><br/></p>
</div>
<div data-index="8">
<p>En 1948, c'est l'indépendance. Le bouddhisme devient religion d’État.</p>
<p> </p>
</div>
<div data-index="9">
<p id="p3">Jusqu’à l’indépendance, les leaders politiques tamouls étaient unanimement en faveur d’un État sri-lankais unitaire. C’est seulement avec le
<a href="https://fr.wikipedia.org/wiki/%C3%89lections_l%C3%A9gislatives_ceylanaises_de_1956"> <i><em>Sinhala Only Act</em></i></a> de 1956 que les Tamouls sri-lankais commencèrent à réclamer une organisation fédérale du pays. Des positions sécessionnistes naquirent, mais elles resteront nettement minoritaires jusqu’à la moitié des années 1970.</p>
<p>Dans les années 1950 la formation politique tamoule dominante, le <i><em>Federal Party</em></i> organisa des manifestations contre le <em>Sinhala Only Act</em> et les programmes de colonisation des terres agricoles. Ces démonstrations publiques furent contestées et attaquées violemment par des bandes cinghalaises en 1956 et en 1958 : ce sont les premières émeutes contre les Tamouls.</p>
</div>
<div data-index="10">
<p>Pendant les émeutes de 1958, les plus violentes, de 150 à 200 Tamouls furent tués, et nombre de leurs propriétés saccagées. </p>
<p>Suite à ces événements et aux mesures discriminatoires, les facteurs unissant les Tamouls « <em>sri lankais</em> » sur le domaine politique gagnèrent du terrain sur les éléments centrifuges, comme par exemple les castes. Néanmoins, les frontières culturelles et les différends politiques subsistant entre Tamouls «<em> sri lankais</em> », Tamouls « <em> des plantations</em> » et Musulmans n’ont pas permis l’union politique de ces trois communautés. </p>
</div>
<div data-index="11">
<p></p>
<p><i>1970 ▹</i> Retour au pouvoir du SLFP </em> (<em>Sri Lanka Freedom Party</em>), avec des objectifs axés sur la primauté de la culture et de la langue cinghalaise ainsi que de la religion bouddhiste).<br/><br/></p>
<p><i>1971 ▹</i> Insurrection des jeunes Cinghalais marxistes-léninistes du <em>Janatha Vimukthi Peramuna</em> (JVP ou front de libération du peuple).<br/><br/></p>
<p><i>1972 ▹</i> Le pays devient officiellement Sri Lanka avec l’adoption d’une constitution républicaine.<br/><br/></p>
<p><i>1976 ▹ </i> C'est le tournant : le TUF, dans la résolution de Vaddukkodai, explicita sa demande à l’autodétermination. La même année, il ajouta à son nom le mot « libération », devenant ainsi <em>Tamil United Liberation Front</em> (TULF). Toujours en 1976, un groupe d’étudiants fonde les <em>Tamil New Tigers (TNT)</em> qui deviendra le <em> Liberation Tigers of Tamil Eelam</em> (LTTE), tandis que dans la foulée sont créés une multitude d’autres groupes, les plus importants étant le <em>People’s Liberation Organisation of Tamil Eelam</em> (PLOTE), le <em>Tamil Eelam Liberation Organisation</em> (TELO) et l’<em>Eelam People’s Revolutionnary Liberation Front</em> (EPRLF).<br/><br/></p>
<p><i>1977 ▹</i> Le TULF sollicite le vote des électeurs Tamouls et Musulmans pour un mandat visant à établir l’« <span style="font-style:italic">État indépendant, souverain, socialiste de l’Eelam tamoul</span>. » Il devint le principal parti d’opposition et revendiqua l’indépendance de l’Eelam tamoul, et ce jusqu’en 1983. Des émeutes ont lieu au moment des élections : dans les régions à majorité cinghalaise, des Tamouls furent attaqués, et certains tués, par des Cinghalais.<br/></p>
<p><i>1978 ▹</i> Les actions s’intensifient. L’État d’urgence est proclamé à Jaffna où l’armée est dotée des pleins pouvoirs, une loi anti-terroriste est votée. <br/><br/><br/><br/></p>
</div>
<div data-index="12-0">
<p>La guerre à Sri Lanka s’est officiellement déclenchée en 1983, intensifiée dans les années 1990, un cessez-le-feu a été conclu de 2002 à 2005, pour se solder par une fin de partie militaire meurtrière en 2009. </p>
</div>
<div data-index="12">
<p>En 1981, des groupes d’hommes de main de l’UNP (<em>United National Party</em>), commettent une série d’exactions.</p>
<p>Suite à l’assassinat de deux policiers cinghalais, la police et des groupes paramilitaires tuèrent des civils Tamouls, saccagèrent et incendièrent des édifices de la ville. Ce fut le cas, notamment de la bibliothèque, qui, avec ses 97.000 volumes, dont de nombreux manuscrits irremplaçables, était l’une des plus grandes de toute l’Asie. Elle fut complètement détruite. Ce fait fut interprété par les Tamouls comme une attaque intentionnelle contre leur culture et leur histoire.</p>
</div>
<div data-index="13">
<p>Le 23 juillet 1983, dans les environs de Jaffna, les LTTE tendirent une embuscade à un convoi militaire et tuèrent quinze soldats ; ils revendiquèrent l’attentat.</p>
<p> Le lendemain, dans la nuit, après les funérailles des militaires à Colombo, des bandes armées s’attaquèrent aux Tamouls résidant dans la capitale, saccagèrent et incendièrent leurs maisons et leurs biens et firent de nombreuses victimes. Le 25 juillet les violences s’étendirent à d’autres parties du pays où résidaient des minorités tamoules : Kandy, Matale, Nawalapitiya, Badulla et Nuwara Eliya. Nombre de Tamouls furent assassinés à l’arme blanche. Divergeant nettement des chiffres annoncés par les autorités, faisant état de 250 Tamouls tués, les ONG estiment que le nombre de morts fut de 400 à 3.000 et qu’environ 18.000 propriétés et maisons tamoules furent détruites. </p>
<p><br/>Le pogrom de 1983 constitua un passage décisif dans la descente vers la guerre civile : il poussa des milliers de jeunes à s’enrôler dans les groupes armés. Le conflit change de dimension et atteint un point de non-retour, il s’étend au Sud de l’île et s’internationalise.</p>
</div>
<div data-index="14">
<p>C’est l’intervention indienne de juillet 1987 et son échec, patent deux ans plus tard, qui donnent aux LTTE un quasi-monopole de la lutte armée.</p>
</div>
<div data-index="15">
<p> Aussitôt élu, le président Premadasa cherche à désamorcer les deux conflits qui menacent son autorité, en demandant à l’Inde de retirer ses troupes pour ôter à la fois au JVP et aux Tigres un argument décisif en faveur de la lutte.
<p><br/>Alors qu’il parvient à maîtriser puis annihiler le JVP, Premadasa offre aux Tigres l’occasion de se réinstaller en maîtres à Jaffna après le retrait indien effectif en mars 1990, leur donnant même accès à un approvisionnement en armes.</p>
<p><br/>Les LTTE éliminent aussitôt les groupes tamouls concurrents qui avaient collaboré avec les Indiens. Seule le TULF qui est un parti politique garde une certaine autonomie et une influence manifeste auprès de la population tamoule de la province orientale et de celle qui réside dans la région de Colombo. </p>
<p><br/>Cette guerre, officiellement déclenchée en 1983, s'est intensifiée dans les années 1990.<br/><br/></p>
</div>
<div data-index="16">
<p> Un cessez-le-feu est conclu de 2002 à 2005. </p>
</div>
<div data-index="17">
<p > La guerre se solde par une fin de partie militaire meurtrière en 2009.
<p id="p2"><br/>Entre 1983 et 2009, l’émigration sri-lankaise temporaire ou durable a concerné 8% à 10% de la population de l’île, et <a href="https://www.lacor.info/film/demons_in_paradise/texte/goreau-ponceaud/diaspora/" > les diasporas </a> principalement tamoules représentent plus d’un million de personnes si l’on compte les descendants des migrants. Le rôle de ces diasporas dans le conflit est passé sous silence.</p>
</div>
</section><!--fin section-description-->
<p class="note"><a href="https://www.lacor.info/film/demons_in_paradise/texte/goreau-ponceaud/index.html"><em>Les démons qui agitent Sri Lanka</em>, par Anthony Goreau-Ponceaud © ACOR, 2018</a></p>
$num= 12
$mq--mobile = 480px
$mq--tablet = 600px
$mq--desktop = 1280px
$acorcolor = orangered
// breakpoints (not used here for the moment) (eg @media break-S)
break-S = "screen and (max-width $mq--mobile)"
break-M = "screen and (min-width $mq--tablet)"
break-L = "screen and (min-width $mq--desktop)"
// font-size
font($scale-min, $scale-max)
font-size $scale-min
@media screen and (min-width $mq--mobile)
font-size "calc(%s + %s * ((100vw - %s) / %s))" % ($scale-min unit($scale-max - $scale-min, '') $mq--mobile unit($mq--desktop - $mq--mobile, ''))
html
font(11px,20px)
border 10px double darken(#ece2c6,10)
min-height 120%
body
background-color #477985
font-family "Open sans condensed", sans-serif
color #ece2c6
text-align justify
line-height 1.7
width 97%
margin auto
overflow-x hidden
-webkit-font-smoothing antialiased
font-smoothing antialiased
::-webkit-scrollbar-track
-webkit-box-shadow inset 0 0 1px hsla(100,80%,100%,.51)
background-color hsla(100,80%,10%,.51)
border-radius 10px
::-webkit-scrollbar
width 5px
background-color rgba(white,.2)
::-webkit-scrollbar-thumb
border-radius 10px
background-color #111
background-image -webkit-gradient(linear,
40% 0%,
75% 84%,
from(hsl(41, 83%, 50%)),
to(hsl(28, 93%, 39%)),
color-stop(.6,hsl(344, 84%, 52%)))
sup
vertical-align super
font-size smaller
em
font-style:italic
color:gold
i
color:black
font-weight:bold
font-size:1.2em
a
text-decoration none !important
color black !important
.note
display block
background-color #477985
font-size:.7em
width 100%
border-top #365c66
position fixed
color cornsilk
padding 1em
bottom 0
left 50%
transform translateX(-50%)
text-align center
letter-spacing:1px
.note a
text-decoration none
color cornsilk
section
width 100%
box-sizing border-box
min-height 40vh
section .section-wrapper
padding:20px
box-sizing border-box
height 100%
.line
width 90%
height 4px
background #ece2c6
margin-top 15vh
left 5%
position:absolute
.line:hover
cursor pointer
.line .year
background-color #ece2c6
border-radius 50%
float left
position relative
left 5.3%
box-sizing border-box
margin-right calc(2.3% - 10px)
margin-left calc(2.3% - 10px)
width 20px
height 20px
top -8px
.line .year::before
content attr(data-timelinelabel)
position absolute
top -110px
left -25px
width 250px
transform rotateZ(-45deg)
display block
font-size 0.8em
font-weight bold
.line .year::after
content attr(data-mobiletext)
position absolute
top 23px
left -15px
padding 10px
font-size 0.8em
text-align center
.line .quarter
background-color transparent !important
border-radius 50%
float left
position relative
left 2.3%
box-sizing border-box
margin-right calc(2% - 5px)
margin-left calc(2% - 5px)
width 10px
height 10px
top -2px
.line .complete
background-color gold
.line .dot.active
background-color #ff4433
cursor pointer
#timeline
padding-top 50px
padding-bottom 50px
background-color #ccb800
color black
#description
min-height 50vh
background-color #477985
#description
padding:1em 6em
#p1, #p2
a
text-decoration :none
color black
font-weight bold
#description .section-wrapper > div
display none
#description .section-wrapper > div.text-default
display block
#description p:first-child
font-size 1.2em
font-weight bold
padding-bottom 0.5em
@media all and (max-width:600px)
.line .year
width 20px
height 20px
margin-right calc(2.65% - 10px)
margin-left calc(2.65% - 10px)
top -8px
.line .quarter
width 10px
height 10px
margin-right calc(2.65% - 5px)
margin-left calc(2.65% - 5px)
top -3px
@media all and (min-width:481px)
.quarter.q1
display none
.dot:hover
background-color #477985
cursor pointer
@media all and (max-width:480px)
#timeline
padding-bottom 10px
padding-top 0
#section-wrapper
//min-height 60vh
#description
margin-top 60vh
min-height 60vh
padding 1em 3em
.line
height auto
background transparent
margin-top 10px
.line .year, .line .quarter
border-radius 0
float none
position static
margin-right 0
margin-left 0
box-sizing border-box
width 100%
height auto
text-align center
transition background-color 500ms
.line .year::after, .line .quarter::after
content attr(data-mobiletext)
display block
padding-top 12px
.line .year.complete, .line .quarter.complete
background-color #34495E
color #FBFCFC
.line .year.active, .line .year.complete.active, .line .quarter.active, .line .quarter.complete.active
background-color tomato
color #FBFCFC
.line .year
display block
.line .year::before
display none
.line .year::after
position static
.line .quarter
display none !important
.line .quarter.y2017
display block
//
.mini-preview-anchor
display inline-block
position relative
white-space nowrap
&:hover
.mini-preview-wrapper
z-index 4
opacity 1
margin-top 6px
transition opacity .3s, margin-top .3s
.mini-preview-wrapper
-moz-box-sizing content-box
box-sizing content-box
position absolute
overflow hidden
z-index -1
opacity 0
margin-top -18px
border none
box-shadow 4px 4px 6px rgba(0, 0, 0, .3)
transition z-index steps(1) .3s, opacity .3s, margin-top .3s
.mini-preview-loading, .mini-preview-cover
position absolute
top 0
bottom 0
right 0
left 0
.mini-preview-loading
display table
height 100%
width 100%
font-size 1.25rem
text-align center
color #f5ead4
background-color #59513f
&::before
content 'Loading...'
display table-cell
text-align center
vertical-align middle
.mini-preview-cover
background-color rgba(0, 0, 0, 0)
.mini-preview-frame
border none
-webkit-transform-origin 0 0
transform-origin 0 0
//position absolute
/* JS will not correctly work when switching between desktop and mobile unless in debug mode */
$(function(){
var timeline = $('#timeline').find('.line');
var timelineDot = $(timeline).find('.dot');
var numDots = $(timeline).find('.year.dot').length * 4 + 1;
var mobileYear = $(timeline).find('.year.dot');
var mobileDefault = $(timeline).find('.dot.js-mobile-default');
$(mobileDefault).addClass('active');
// CONTENT SWITCH
$(timelineDot).each(function(){
$(this).click(function(){
var currentDesc = $('#description').find('.section-wrapper > div');
$(currentDesc).hide();
matchContent($(this)).fadeIn();
});
});
var resizeTimer;
var initialSize = $(window).width();
$(window).resize(function(){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function(){
var delayedSize = $(window).width();
// if we resize but not enough to change layout, proceed as usual
if ((initialSize > 480 && delayedSize > 480) || (initialSize < 481 && delayedSize < 481)) {
if (initialSize > 480 && delayedSize > 480) {
desktopTimeline();
} else if (initialSize < 481 && delayedSize < 481) {
mobileTimeline();
}
}
// if we resize the page and switch between desktop and mobile layouts, reload the page
else {
location.reload();
}
initialSize = delayedSize;
}, 250);
});
// DESKTOP FUNCTIONALITY
function desktopTimeline(){
$(timelineDot).each(function(){
// highlight the appropriate portion of the line as you click the dots
var ind = Number(findIndex($(this)));
var x = round((0.9 / numDots) * ind * 100, 4);
var y = round(((0.9 / numDots) * 100 / 2), 4);
var z = x + y;
$(this).click(function(){
$(timelineDot).removeClass('active complete');
$(this).addClass('active');
$(this).prevAll('.dot').addClass('complete');
$(timeline).css({
background: 'linear-gradient(to right, ' +
' ' + z + '%, ' +
' ' + z + '%)'
});
});
});
}
// MOBILE FUNCTIONALITY
function mobileTimeline() {
$(timelineDot).click(function(){
var mobileQuarter = $(this).nextUntil('.year.dot');
if ($(this).hasClass('year')) {
$(timelineDot).not($(this)).removeClass('active complete');
$(this).addClass('complete');
$(this).next().addClass('active');
$(this).prevAll('.dot.year').addClass('complete');
$('.dot.quarter').not(mobileQuarter).slideUp(500);
$(mobileQuarter).slideDown(500);
} else if ($(this).hasClass('quarter')) {
var parentYear = $(this).prevUntil('.dot.year');
$(this).addClass('active');
$(timelineDot).not($(this)).removeClass('active');
$(mobileQuarter).add(mobileYear).removeClass('complete');
$(parentYear).add($(this)).add($(this).prevAll('.dot.year')).addClass('complete');
}
});
}
// RETRIEVE ELEMENT'S INDEX AMONG VISIBLE DOTS
function findIndex(dataInd) {
return $(dataInd).attr('data-index');
}
// FIND MATCHING CONTENT
function matchContent(matchedContent){
return $('#description').find('.section-wrapper > div[data-index="' + $(matchedContent).attr("data-index") + '"]');
}
// ROUND DECIMALS
function round(value, decimals) {
return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
}
$(window).resize();
});
/////
$(function() {
$('#p1 a').miniPreview({ prefetch: 'pageload' });
$('#p2 a').miniPreview({ prefetch: 'parenthover' });
$('#p3 a').miniPreview({ prefetch: 'pageload' });
});
/*
* MiniPreview v0.9
*
* @author Will Boyd
* @github https://github.com/lonekorean/mini-preview
*/
(function($) {
var PREFIX = 'mini-preview';
// implemented as a jQuery plugin
$.fn.miniPreview = function(options) {
return this.each(function() {
var $this = $(this);
var miniPreview = $this.data(PREFIX);
if (miniPreview) {
miniPreview.destroy();
}
miniPreview = new MiniPreview($this, options);
miniPreview.generate();
$this.data(PREFIX, miniPreview);
});
};
var MiniPreview = function($el, options) {
this.$el = $el;
this.$el.addClass(PREFIX + '-anchor');
this.options = $.extend({}, this.defaultOptions, options);
this.counter = MiniPreview.prototype.sharedCounter++;
};
MiniPreview.prototype = {
sharedCounter: 0,
defaultOptions: {
width: 307,
height: 216,
scale: .50,
prefetch: 'pageload'
},
generate: function() {
this.createElements();
this.setPrefetch();
},
createElements: function() {
var $wrapper = $('<div>', { class: PREFIX + '-wrapper' });
var $loading = $('<div>', { class: PREFIX + '-loading' });
var $frame = $('<iframe>', { class: PREFIX + '-frame' });
var $cover = $('<div>', { class: PREFIX + '-cover' });
$wrapper.appendTo(this.$el).append($loading, $frame, $cover);
// sizing
$wrapper.css({
width: this.options.width + 'px',
height: this.options.height + 'px'
});
// scaling
var inversePercent = 100 / this.options.scale;
$frame.css({
width: inversePercent + '%',
height: inversePercent + '%',
transform: 'scale(' + this.options.scale + ')'
});
// positioning
var fontSize = parseInt(this.$el.css('font-size').replace('px', ''), 10)
var top = (this.$el.height() + fontSize) / 2;
var left = (this.$el.width() - $wrapper.outerWidth()) / 2;
$wrapper.css({
top: top + 'px',
left: left + 'px'
});
},
setPrefetch: function() {
switch (this.options.prefetch) {
case 'pageload':
this.loadPreview();
break;
case 'parenthover':
this.$el.parent().one(this.getNamespacedEvent('mouseenter'),
this.loadPreview.bind(this));
break;
case 'none':
this.$el.one(this.getNamespacedEvent('mouseenter'),
this.loadPreview.bind(this));
break;
default:
throw 'Prefetch setting not recognized: ' + this.options.prefetch;
break;
}
},
loadPreview: function() {
this.$el.find('.' + PREFIX + '-frame')
.attr('src', this.$el.attr('href'))
.on('load', function() {
// some sites don't set their background color
$(this).css('background-color', '#fff');
});
},
getNamespacedEvent: function(event) {
return event + '.' + PREFIX + '_' + this.counter;
},
destroy: function() {
this.$el.removeClass(PREFIX + '-anchor');
this.$el.parent().off(this.getNamespacedEvent('mouseenter'));
this.$el.off(this.getNamespacedEvent('mouseenter'));
this.$el.find('.' + PREFIX + '-wrapper').remove();
}
};
})(jQuery);
Also see: Tab Triggers