<html>
<body>

<link rel="stylesheet" href="css/lifetime.css" type="text/css">

<div id='lifetime'>

   <a href="javascript:lifetime.scrollToEvent('1882')"><div id="Albert">Albert</div></a>
   <a href="javascript:lifetime.scrollToEvent('1882')"><div id="Einstein">Einstein</div></a>
   
   <?php
      /* use a .php extension in webpages with php code */
   
      /* header lines */
      $left=330;
      $width=5;
      for($i=0; $i<50; $i++){
         echo "<div class='header_line' style='left: ".$left."px; width: ".$width."px'></div>";
         $left+=$width+10;
         $width++;
      }
      
      /* punch holes */
      for($i=0; $i<2; $i++){
         echo "<div class='punch_hole' style='top: ".(55+$i*50)."px; '></div>";
      }
   ?>

</div>
<div id="shadow"></div>

<script>
   var lifetime = new Timeline ( "lifetime", "xml/lifetime.xml" );
</script>


</body>
</html>

 

 

 

HTML




/* main timeline div (background) =================================== */

#lifetime {
   position: relative;
   left: 0;
   top: 0;
   width: 100%;
   max-width: 1800px;
   height: 13cm;

   font-family: "Trebuchet MS", "Helvetica", "Sans-Serif";
   
   background: rgba(188, 205, 221, .5); /* For browsers that do not support gradients */
   background: -webkit-linear-gradient(to bottom right, rgba(188, 205, 221, .5), rgba(188, 205, 221, .9));
   background: -moz-linear-gradient(to bottom right, rgba(188, 205, 221, .5), rgba(188, 205, 221, .9));
   background: -ms-linear-gradient(to bottom right, rgba(188, 205, 221, .5), rgba(188, 205, 221, .9));
   background: -o-linear-gradient(to bottom right, rgba(188, 205, 221, .5), rgba(188, 205, 221, .9));
   background: linear-gradient(to bottom right, rgba(188, 205, 221, .5), rgba(188, 205, 221, .9));


   border-radius: 1.3cm;
   border: .05cm solid white;
   
   -moz-box-shadow: 0 .05cm .1cm rgba(0, 0, 0, .2);
   -webkit-box-shadow: 0 .05cm .1cm rgba(0, 0, 0, .2);
   box-shadow: 0 .05cm .1cm rgba(0, 0, 0, .2);
}

#shadow {
   width: 100%;
   max-width: 1800px;
   height: 20px;
   opacity: .5;
   background-image: url('../images/shadow.png');
   background-size: 95% 100%;
   background-repeat: no-repeat;
   background-position: center;
   
   /* fix faint box-shadow in firefox */
   -moz-box-shadow: 0 0 0 #fff;
-webkit-box-shadow: 0 0 0 #fff;
box-shadow: 0 0 0 #fff;
}



/* custom header and background elements =================================== */

#Albert {
   position: absolute;
   z-index: 1;
   color: #fff;
   left: 5.7cm;
   top: 1.47cm;
   
   font-size: .79cm;
   color: rgba(188, 205, 221, .75);
   font-weight: bold;
}


#Einstein {
   position: absolute;
   z-index: 1;
   color: #fff;
   left: 2.1cm;
   top: 1.84cm;
   
   font-size: 1.58cm;
   color: rgba(255, 100, 0, 1);
   font-weight: bold;
   text-shadow: 0 .13cm .24cm rgba(0, 0, 0, .25);
}

.header_line {
   position: absolute;
   z-index: 1;
   background: rgba(188, 205, 221, .5);
   top: 2.1cm;
   height: 1.3cm;
   
   pointer-events: none; /* avoid conflicts with the timeline's UI */
}

.punch_hole {
   position: absolute;
   z-index: 1;
   background: rgba(255, 255, 255, 1);
   left: .79cm;
   width: .79cm;
   height: .79cm;
   
   border-radius: 50%;
   -moz-box-shadow: inset .07cm .07cm .14cm rgba(0, 0, 0, .5);
   -webkit-box-shadow: inset .07cm .07cm .14cm rgba(0, 0, 0, .5);
   box-shadow: inset .07cm .07cm .14cm rgba(0, 0, 0, .5);
   
   pointer-events: none; /* avoid conflicts with the timeline's UI */
}



/* == ruler =================================== */

#ruler_container {
   display: block;
   top: 3.42cm;
   height: 7.9cm; /* used to anchor the ruler's elements to the bottom (flipping the ruler vertically) */
   z-index: 11;
}


.ruler_long_tick {
   bottom: 0;
   width: .05cm;
   height: 6.6cm;
   background: rgba(0, 0, 0, .3);
}

.ruler_long_label {
   bottom: 6.65cm;
   font-size: .4cm;
   color: rgba(255, 100, 0, 1);
   font-weight: bold;
   white-space: nowrap;
}


.ruler_medium_tick {
   bottom: 0;
   width: .02cm;
   height: 6.4cm;
   background: rgba(0, 0, 0, .2);
}

.ruler_medium_label {
   bottom: 6.45cm;
   font-size: .35cm;
   color: rgba(255, 255, 255, 1);
   font-weight: normal;
   white-space: nowrap;
}


.ruler_short_tick {
   bottom: 0;
   width: 0;
   height: 6.2cm;
   
   border-left-style: dashed;
   border-left-width: .04cm;
   border-left-color: rgba(0, 0, 0, .2);
}

.ruler_short_label {
   visibility: hidden;
}



/* timeline bar =================================== */

#bar_container {
   display: block;
   top: 10.5cm;
   z-index: 11;
}

#bar_past {
   visibility: visible;
   height: .2cm;
   
   background: rgba(0, 0, 0, 1);
         
   -moz-box-shadow: 0 .05cm .26cm rgba(0, 0, 0, .25);
   -webkit-box-shadow: 0 .05cm .26cm rgba(0, 0, 0, .25);
   box-shadow: 0 .05cm .26cm rgba(0, 0, 0, .25);
}

#bar_future {
   visibility: hidden;
}

#bar_cap_left {
   visibility: visible;
   top: -.1cm;
   width: 1cm;
   height: .4cm;
   
   border-top-left-radius: .2cm;
   border-bottom-left-radius: .2cm;
   background: rgba(0, 0, 0, 1);
         
   -moz-box-shadow: 0 .05cm .26cm rgba(0, 0, 0, .25);
   -webkit-box-shadow: 0 .05cm .26cm rgba(0, 0, 0, .25);
   box-shadow: 0 .05cm .26cm rgba(0, 0, 0, .25);
}

#bar_cap_right {
   visibility: visible;
   top: -.1cm;
   width: 1cm;
   height: .4cm;
   
   border-top-right-radius: .2cm;
   border-bottom-right-radius: .2cm;
   background: rgba(0, 0, 0, 1);
         
   -moz-box-shadow: 0 .05cm .26cm rgba(0, 0, 0, .25);
   -webkit-box-shadow: 0 .05cm .26cm rgba(0, 0, 0, .25);
   box-shadow: 0 .05cm .26cm rgba(0, 0, 0, .25);
}

#bar_present {
   visibility: hidden;
}



/* timeline indicator =================================== */

#indicator_container {
   display: none;
}



/* connectors =================================== */

#connectors_container {
   display: none;
   top: 4cm;
   height: 11cm;
   z-index: 13;
}

.event_connector {
   height: 0cm;
   opacity: 1;
   border-width: .04cm;
   border-style: solid;
}



/* date events =================================== */

#date_events_container {
   visibility: visible;
   top: 11cm;
   height: 0;
   z-index: 14;
}

/* default background */
.event_background {
   width: 5.4cm;
   background: rgba(255, 255, 255, 1);
   padding: .26cm .2cm .2cm .2cm;
   -moz-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .75);
   -webkit-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .75);
   box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .75);
      
   -webkit-transition: -webkit-box-shadow .1s ease-out;
-o-transition: -o-box-shadow .1s ease-out;
-moz-transition: -moz-box-shadow .1s ease-out;
-ms-transition: -ms-box-shadow .1s ease-out;
-kthtml-transition: -kthtml-box-shadow .1s ease-out;
transition: box-shadow .1s ease-out;
}

/* round corner background for four events only */
#lifetimeBirthofEinstein,
#lifetimeDeathofEinstein,
#lifetimeSpecialRelativity,
#lifetimeGeneralRelativity {
   border-radius: .25cm;
   padding: .26cm .2cm .2cm .3cm;
}

.event_background:hover {
   -moz-box-shadow: 0 .13cm .39cm rgba(0, 0, 0, .9);
   -webkit-box-shadow: 0 .13cm .39cm rgba(0, 0, 0, .9);
   box-shadow: 0 .13cm .39cm rgba(0, 0, 0, .9);
   
   -webkit-transition: -webkit-box-shadow .1s ease-out;
-o-transition: -o-box-shadow .1s ease-out;
-moz-transition: -moz-box-shadow .1s ease-out;
-ms-transition: -ms-box-shadow .1s ease-out;
-kthtml-transition: -kthtml-box-shadow .1s ease-out;
transition: box-shadow .1s ease-out;
}

/* default rotated event titles */
.event_title {
   display: block;
   font-size: .79cm;
   color: #444;
   font-weight: bold;
   text-shadow: -.05cm 0 .1cm rgba(0, 0, 0, .35);
   margin: 0cm 0cm .05cm 0cm;
   
   -ms-transform: rotate(-90deg);
   -ms-transform-origin: 20% 230%;
   -webkit-transform: rotate(-90deg);
   -webkit-transform-origin: 20% 230%;
   transform: rotate(-90deg);
   transform-origin: 20% 230%;
}

/* horizontal titles for four events only */
#lifetimeBirthofEinstein .event_title,
#lifetimeDeathofEinstein .event_title,
#lifetimeSpecialRelativity .event_title,
#lifetimeGeneralRelativity .event_title {
   font-size: .6cm;
   color: #444;
   text-shadow: 0 .05cm .1cm rgba(0, 0, 0, .25);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
}

/* default hidden dates */
.event_date {
   display: none;
}

/* visible dates for 2 events only */
#lifetimeBirthofEinstein .event_date,
#lifetimeDeathofEinstein .event_date {
   display: block;
   font-size: .3cm;
   color: #888888;
   font-weight: bold;
   margin: 0cm 0cm .25cm 0cm;
}
   
.event_notes {
   display: block;
   font-size: .4cm;
   color: #444444;
   margin: .2cm 0cm .3cm 0cm;
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.event_image {
   display: block;
}



/* period events =================================== */

#period_events_container {
   display: block;
   top: 11.84cm;
   height: 0;
   z-index: 0;
}

.period_background {
   /* top: specified programmatically */
   /* left: specified programmatically */
   /* width: specified programmatically */
   height: 7.9cm; /* period event height */
   
   /* The background color of period events is specified by their categories, or */
   /* by the color XML attribute of each individual period event. */
   /* background: NA */   
}

.period_title {
   display: none;
}



/* user interface buttons =================================== */

#button_prev {
   display: block;
   position: absolute;
   left: .2cm;
   top: 50%;
   width: 2cm;
   height: 2cm;
   border-radius: 50%;
   
   border: .07cm solid rgba(255, 255, 255, .5);
   background: rgba(214, 238, 178, 1);
   background-image: url('../images/button_prev.png');
   background-size: 40%;
   background-repeat: no-repeat;
   background-position: center;
   
   -moz-box-shadow: inset .07cm .08cm .16cm rgba(0, 0, 0, .35);
   -webkit-box-shadow: inset .07cm .08cm .16cm rgba(0, 0, 0, .35);
   box-shadow: inset .07cm .08cm .16cm rgba(0, 0, 0, .35);

}

#button_next {
   display: block;
   position: absolute;
   right: .2cm;
   top: 50%;
   width: 2cm;
   height: 2cm;
   border-radius: 50%;
   
   border: .07cm solid rgba(255, 255, 255, .5);
   background: rgba(214, 238, 178, 1);
   background-image: url('../images/button_next.png');
   background-size: 40%;
   background-repeat: no-repeat;
   background-position: center;
   
   -moz-box-shadow: inset .07cm .08cm .16cm rgba(0, 0, 0, .35);
   -webkit-box-shadow: inset .07cm .08cm .16cm rgba(0, 0, 0, .35);
   box-shadow: inset .07cm .08cm .16cm rgba(0, 0, 0, .35);
}

#button_zoom_out {
   display: none;
}

#button_zoom_in {
   display: none;
}

#button_goto_year {
   display: none;
}



.button {
   cursor: pointer;
   z-index: 100;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-touch-callout: none;
   outline: 0;
}

#button_prev:hover, #button_next:hover {
   background-size: 43%;
   -moz-box-shadow: inset .03cm .03cm .06cm rgba(0, 0, 0, .35);
   -webkit-box-shadow: inset .03cm .03cm .06cm rgba(0, 0, 0, .35);
   box-shadow: inset .03cm .03cm .06cm rgba(0, 0, 0, .35);
      
   -webkit-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-kthtml-transition: all .1s ease-out;
transition: all .1s ease-out;
}

#button_prev:active, #button_next:active {
   background-size: 40%;
   -moz-box-shadow: inset .1cm .1cm .2cm rgba(0, 0, 0, .25);
   -webkit-box-shadow: inset .1cm .1cm .2cm rgba(0, 0, 0, .25);
   box-shadow: inset .1cm .1cm .2cm rgba(0, 0, 0, .25);
      
   -webkit-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-kthtml-transition: all .1s ease-out;
transition: all .1s ease-out;
}



/* == startup screen =================================== */

#startup_screen {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   background: rgba(255, 255, 255, 1);
   border-radius: 1.3cm;
}



/* lightbox screen =================================== */

#lightbox_background {
   position: absolute;
   height: 100%;
   width: 100%;
   background: rgba(50, 50, 50, 1);
   z-index: 1000;
   border-radius: 1.3cm;
}

#lightbox_title {
   position: absolute;
   top: 0;
   width: 100%;
   font-size: .6cm;
   font-weight: bold;
   text-align: center;
   color: rgba(255, 255, 255, 1);
}

#lightbox_image {
   position: absolute;
   left: 10%;
   top: 10%;
   height: 80%;
   width: 80%;
   
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

#lightbox_video {
   position: absolute;
   left: 20%;
   top: 20%;
   width: 60%;
   height: 60%;
   text-align: center;
}

#lightbox_credit {
   position: absolute;
   right: 1.3cm;
   bottom: 0;
   width: 100%;
   font-size: .3cm;
   text-align: right;
   color: rgba(255, 255, 255, .5);
   margin: .2cm;
}

#lightbox_exit {
   display: block;
   position: absolute;
   right: .5cm;
   top: .4cm;
   width: 1.5cm;
   height: 1.5cm;
   border-radius: 50%;
   opacity: .5;
   
   background: rgba(255, 255, 255, 1);
   background-image: url('../images/button_x.png');
   background-size: 60%;
   background-repeat: no-repeat;
   background-position: center;
}


/* =================================== */

 

 

 

CSS



<timeline>   

   <!-- events without photos -->
   <date title="Birth of Einstein" year="1879" month="3" day="14" />
   <date title="Death of Einstein" year="1955" month="4" day="18" />
   <date title='Special Relativity' notes="At the age of 26, Albert Einstein published his special theory of relativity, which leads to the equivalence of energy and mass (E=mc²), and combines space and time into a single continuum (spacetime)." year="1905" />
   <date title="General Relativity" notes="Following his special theory of relativity, Albert Einstein published the general theory of relativity, providing a unified description of gravity as a geometric property of spacetime." year="1916" month='3' day='20' />
   
   <!-- events with photos -->
   <date title="1882" image="images/1882.jpg" preload_delay="5" year="1882" />
   <date title="1894" image="images/1894.jpg" preload_delay="0" year="1894" />
   <date title="1896" image="images/1896.jpg" preload_delay="0" year="1896" />
   <date title="1898" image="images/1898.jpg" preload_delay="0" year="1898" />
   <date title="1905" image="images/1905.jpg" preload_delay="0" year="1905" />
   <date title="1912" image="images/1912.jpg" preload_delay="0" year="1912" />
   <date title="1916" image="images/1916.jpg" preload_delay="0" year="1916" />
   <date title="1920" image="images/1920.jpg" preload_delay="0" year="1920" />
   <date title="1921" image="images/1921.jpg" preload_delay="0" year="1921" />
   <date title="1925" image="images/1925.jpg" preload_delay="0" year="1925" credit="Bundesarchiv, Bild 183-19000-1918 / CC-BY-SA 3.0" />
   <date title="1929" image="images/1929.jpg" preload_delay="0" year="1929" credit="Bundesarchiv, Bild 102-00487A / CC-BY-SA 3.0" />
   <date title="1935" image="images/1935.jpg" preload_delay="0" year="1935" credit="Sophie Delar" />
   <date title="1947" image="images/1947.jpg" preload_delay="0" year="1947" credit="Oren Jack Turner, Princeton, N.J." />
   <date title="1948" image="images/1948.jpg" preload_delay="0" year="1948" credit="Nationaal Archief" />
   <date title="1950" image="images/1950.jpg" preload_delay="0" year="1950" credit="John D. Schiff" />
   
   <period title="Background Period" color="rgba(188, 205, 221, .75)" start_year="1879" start_month="3" start_day="14" end_year="1955" end_month="4" end_day="18" />
   
   <settings interactive_bar="false" interactive_period="false" vertical_scroll="false" launch_event="1882" period_gradient="false" periods_push_dates="false" date_fill_direction="up" period_fill_direction="up" />

</timeline>

 

 

 

XML