Team:Heidelberg LSL/Notebook timeline

From 2012hs.igem.org

(Difference between revisions)

Revision as of 21:04, 21 May 2012

iGEM-2012HS - LSL-Heidelberg iGEM-2012HS - LSL-Heidelberg

John Doe/Millennium Magazine

The Main Timeline Headline

The main text goes here. You can have p tags or anything really.

John Doe/Millennium Magazine

Caption goes here.

May 11, 1978 — August 11, 1978

Headline Goes Here

The main text goes here. You can have p tags too.

John Doe/Millennium Magazine

Caption goes here.

May 13, 1978 — May 19, 1978

Headline Goes Here

The main text goes here. You can have p tags too.

John Doe/Millennium Magazine

Caption goes here.

May 16, 1978 — May 11, 1978

Headline Goes Here

The main text goes here. You can have p tags too.

May 11, 1978

Headline Goes Here

@@ Line 15: / Line 15: @@
 /-->
 <html>
+<link rel="stylesheet" href="../compiled/css/timeline.css"></link>
+<style>
 <style type="text/css">
@@ Line 20: / Line 22: @@
                          text-align: justify;
                          font-size: 12px;}
-      body {font: 10pt arial;}
 </style>
@@ Line 30: / Line 31: @@
 <div id="SubWrapper">
-    <div id="TimeBar"></div>
+<div id="timeline" class="vmm-timeline"><div class="container main"><div class="feature"><div class="slider" style="overflow-y: hidden;"><div class="slider-container-mask" style="height: 187px; width: 1440px;"><div class="slider-container" style="left: 130px;"><div class="slider-item-container" style="width: 10620px;"><div class="slider-item" style="width: 1180px; height: 187px; display: table; overflow-y: auto;"><div class="content"><div class="content-container layout-text-media pad-left" style="display: table;"><div class="media" style="float: left;"><div class="media-wrapper"><div class="media-container"><div class="media-image media-shadow"><img class="media-image" src="../taylor/final.jpg" style="max-height: 127px; max-width: 708px;"></div><div class="credit">John Doe/Millennium Magazine</div></div></div></div><div class="text" style="width: 40%; display: table-cell;"><div class="container" style="display: table-cell; width: auto;"><h2 class="start" style="width: 442px;">The Main Timeline Headline</h2><p>												<!-- Main Text -->
+						</p><p>The main text goes here. You can have p tags or anything really.</p>
+					</div></div></div></div></div><div class="slider-item" style="width: 1180px; height: 187px; display: table; overflow-y: auto; left: 1455px;"><div class="content"><div class="content-container layout-text-media pad-left" style="display: table;"><div class="media" style="float: left;"><div class="media-wrapper"><div class="media-container"><div class="media-image media-shadow"><img class="media-image" src="../taylor/final.jpg" style="max-height: 127px; max-width: 708px;"></div><div class="credit">John Doe/Millennium Magazine</div><div class="caption">Caption goes here.</div></div></div></div><div class="text" style="width: 40%; display: table-cell;"><div class="container" style="display: table-cell; width: auto;"><h2 class="date">May 11, 1978 &mdash; August 11, 1978</h2><h3>Headline Goes Here</h3><p>											<!-- Main Text -->
+							</p><p>The main text goes here. You can have p tags too.</p>
+						</div></div></div></div></div><div class="slider-item" style="width: 1180px; height: 187px; display: table; overflow-y: auto; left: 2910px;"><div class="content"><div class="content-container layout-text-media pad-left" style="display: table;"><div class="media" style="float: left;"><div class="media-wrapper"><div class="media-container"><div class="media-shadow"><iframe width="640" height="390" frameborder="0" allowfullscreen="" id="youtube_vjVfu8-Wp6s" class="media-frame video youtube" style="max-width: 708px; height: 127px; width: 226px;" title="YouTube video player" src="http://www.youtube.com/embed/vjVfu8-Wp6s?enablejsapi=1&amp;color=white&amp;showinfo=0&amp;theme=light&amp;rel=0"></iframe></div><div class="credit">John Doe/Millennium Magazine</div><div class="caption">Caption goes here.</div></div></div></div><div class="text" style="width: 40%; display: table-cell;"><div class="container" style="display: table-cell; width: auto;"><h2 class="date">May 13, 1978 &mdash; May 19, 1978</h2><h3>Headline Goes Here</h3><p>
+							</p><p>The main text goes here. You can have p tags too.</p>
+						</div></div></div></div></div><div class="slider-item" style="width: 1180px; height: 187px; display: table; overflow-y: auto; left: 4365px;"><div class="content"><div class="content-container layout-text-media pad-left" style="display: table;"><div class="media" style="float: left;"><div class="media-wrapper"><div class="media-container"><div class="media-image media-shadow"><img class="media-image" src="../taylor/final.jpg" style="max-height: 127px; max-width: 708px;"></div><div class="credit">John Doe/Millennium Magazine</div><div class="caption">Caption goes here.</div></div></div></div><div class="text" style="width: 40%; display: table-cell;"><div class="container" style="display: table-cell; width: auto;"><h2 class="date">May 16, 1978 &mdash; May 11, 1978</h2><h3>Headline Goes Here</h3><p>
+							</p><p>The main text goes here. You can have p tags too.</p>
+						</div></div></div></div></div><div class="slider-item" style="width: 1180px; height: 187px; display: table; overflow-y: auto; left: 5820px;"></div><div class="slider-item" style="width: 1180px; height: 187px; display: table; overflow-y: auto; left: 7275px;"></div><div class="slider-item" style="width: 1180px; height: 187px; display: table; overflow-y: auto; left: 8730px;"></div><div class="slider-item" style="width: 1180px; height: 187px; display: table; overflow-y: auto; left: 10185px;"></div><div class="slider-item" style="width: 1180px; height: 187px; display: table; overflow-y: auto; left: 11640px;"></div></div></div></div><div class="nav-next" style="left: 1340px; height: 187px;"><div class="nav-container" style="top: 53.5px;"><div class="icon">&nbsp;</div><div class="date">May 11, 1978</div><div class="title">Headline Goes Here</div></div></div><div class="nav-previous" style="height: 187px; display: none;"><div class="nav-container" style="top: 53.5px;"><div class="icon">&nbsp;</div><div class="date"></div><div class="title">Title Goes Here</div></div></div></div></div><div class="navigation"><div class="timenav" style="left: 720px;"><div class="content"><div class="marker start active" id="pQrS" style="left: 10px;"><div class="flag" style="top: 48px;"><div class="flag-content"><div class="thumbnail thumb-photo"></div><h3>The Main Timeline Headline</h3><h4>undefined</h4></div></div><div class="dot"></div><div class="line"><div class="event-line"></div></div></div><div class="marker" id="1978,5,11-0" style="left: 12px;"><div class="flag" style="top: 96px;"><div class="flag-content"><div class="thumbnail thumb-photo"></div><h3>Headline Goes Here</h3><h4>May 11, 1978</h4></div></div><div class="dot"></div><div class="line"><div class="event-line" style="height: 6px; width: 121px; top: 150px;"></div></div></div><div class="marker" id="1978,5,13-1" style="left: 14px;"><div class="flag" style="top: 1px;"><div class="flag-content"><div id="youtube_vjVfu8-Wp6s_thumb" class="thumbnail thumb-youtube"><img src="http://i.ytimg.com/vi/vjVfu8-Wp6s/default.jpg"></div><h3>Headline Goes Here</h3><h4>May 13, 1978</h4></div></div><div class="dot"></div><div class="line"><div class="event-line" style="height: 6px; width: 8px; top: 150px;"></div></div></div><div class="marker" id="1978,5,16-2" style="left: 18px;"><div class="flag" style="top: 48px;"><div class="flag-content"><div class="thumbnail thumb-photo"></div><h3>Headline Goes Here</h3><h4>May 16, 1978</h4></div></div><div class="dot"></div><div class="line"><div class="event-line"></div></div></div><div class="marker" id="1978,5,18-3" style="left: 21px;"><div class="flag" style="top: 96px;"><div class="flag-content"><div class="thumbnail thumb-photo"></div><h3>Headline Goes Here</h3><h4>May 18, 1978</h4></div></div><div class="dot"></div><div class="line"><div class="event-line"></div></div></div><div class="marker" id="1978,5,19-5" style="left: 22px;"><div class="flag" style="top: 1px;"><div class="flag-content"><div class="thumbnail thumb-photo"></div><h3>Headline Goes Here</h3><h4>May 19, 1978</h4></div></div><div class="dot"></div><div class="line"><div class="event-line"></div></div></div><div class="marker" id="1978,6,18-4" style="left: 62px;"><div class="flag" style="top: 48px;"><div class="flag-content"><div class="thumbnail thumb-photo"></div><h3>Headline Goes Here</h3><h4>June 18, 1978</h4></div></div><div class="dot"></div><div class="line"><div class="event-line"></div></div></div><div class="marker" id="1978,8,18-6" style="left: 142px;"><div class="flag" style="top: 96px;"><div class="flag-content"><div class="thumbnail thumb-photo"></div><h3>Headline Goes Here</h3><h4>August 18, 1978</h4></div></div><div class="dot"></div><div class="line"><div class="event-line"></div></div></div><div class="marker" id="1979,8,18-7" style="left: 622px;"><div class="flag" style="top: 48px;"><div class="flag-content"><div class="thumbnail thumb-photo"></div><h3>Headline Goes Here</h3><h4>August 18, 1979</h4></div></div><div class="dot"></div><div class="line"><div class="event-line"></div></div></div></div><div class="time"><div class="time-interval-minor"><div class="minor" style="width: 2082.14px; left: -720px;"></div></div><div class="time-interval-major"><div style="text-indent: -13.5px; opacity: 100; left: -157.425px;">1978</div><div style="text-indent: -13.5px; opacity: 0; left: -157.425px;">1978</div><div style="text-indent: -13.5px; opacity: 0; left: -157.425px;">1978</div></div><div class="time-interval"><div style="text-indent: -10.5px; opacity: 100; left: 0.383562px;">May</div><div style="text-indent: -13px; opacity: 0; left: 41.1507px;">June</div><div style="text-indent: -11.5px; opacity: 100; left: 80.6027px;">July</div><div style="text-indent: -12px; opacity: 0; left: 121.37px;">Aug.</div><div style="text-indent: -13px; opacity: 100; left: 162.137px;">Sept.</div><div style="text-indent: -11px; opacity: 0; left: 201.589px;">Oct.</div><div style="text-indent: -11px; opacity: 100; left: 242.356px;">Nov.</div><div style="text-indent: -11.5px; opacity: 0; left: 281.808px;">Dec.</div><div style="text-indent: -11px; opacity: 100; left: 322.575px;">1979</div><div style="text-indent: -10.5px; opacity: 0; left: 363.342px;">Feb.</div><div style="text-indent: -18px; opacity: 100; left: 400.164px;">March</div><div style="text-indent: -14px; opacity: 0; left: 440.932px;">April</div><div style="text-indent: -10.5px; opacity: 100; left: 480.384px;">May</div><div style="text-indent: -13px; opacity: 0; left: 521.151px;">June</div><div style="text-indent: -11.5px; opacity: 100; left: 560.603px;">July</div><div style="text-indent: -12px; opacity: 0; left: 601.37px;">Aug.</div><div style="text-indent: -13px; opacity: 100; left: 642.137px;">Sept.</div></div></div></div><div class="timenav-background"><div class="timenav-line" style="left: 722px;"></div><div class="timenav-indicator" style="left: 712px;"></div><div class="timenav-interval-background"><div class="top-highlight"></div></div></div><div class="toolbar" style="top: 27px;"><div class="back-home" title="Return to Title" rel="tooltip"><div class="icon"></div></div><div class="zoom-in" title="Expand Timeline" rel="tooltip"><div class="icon"></div></div><div class="zoom-out" title="Contract Timeline" rel="tooltip"><div class="icon"></div></div></div></div></div></div>
 </div><!-- end SubWrapper -->
@@ Line 36: / Line 45: @@
 </body>
-<script type="text/javascript" src="http://www.google.com/jsapi"></script>
+<script src="http://s.ytimg.com/yt/jsbin/www-widgetapi-vfl1_zC6X.js" async="">
-    <script type="text/javascript" src="../timeline.js"></script>
+</script>
-    <link rel="stylesheet" type="text/css" href="../timeline.css">
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
+</script>
-    <script type="text/javascript">
+<script src="../compiled/js/timeline-min.js" type="text/javascript">
-      google.load("visualization", "1");
+</script>
-      google.setOnLoadCallback(drawVisualization);
+<script>
-      function drawVisualization() {
-        var data = new google.visualization.DataTable();
-        data.addColumn('datetime', 'start');
-        data.addColumn('datetime', 'end');
-        data.addColumn('string', 'content');
-        data.addRows([
-          [new Date(2010,7,23), , 'Conversation<br>' +
-            '<img src="img/comments-icon.png" style="width:32px; height:32px;">'],
-          [new Date(2010,7,23,23,0,0), , 'Mail from boss<br>' +
-            '<img src="img/mail-icon.png" style="width:32px; height:32px;">'],
-          [new Date(2010,7,24,16,0,0), , 'Report'],
-          [new Date(2010,7,26), new Date(2010,8,2), 'Traject A'],
-          [new Date(2010,7,28), , 'Memo<br>' +
-            '<img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
-          [new Date(2010,7,29), , 'Phone call<br>' +
-            '<img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
-          [new Date(2010,7,31), new Date(2010,8,3), 'Traject B'],
-          [new Date(2010,8,4,12,0,0), , 'Report<br>' +
-            '<img src="img/attachment-icon.png" style="width:32px; height:32px;">']
-        ]);
-        options = {
-          "width":  "100%",
-          "height": "99%",
-          "style": "box"
-        };
-        var timeline = new links.Timeline(document.getElementById('TimeBar'));
-        timeline.draw(data, options);
-      }
-   </script>
 <script type="text/javascript">
+$(document).ready(function() {
+var timeline = new VMM.Timeline();
+timeline.init();
+});
 function setPageSize() {
 len = document.getElementById('super_main_wrapper').offsetHeight;