Team:Heidelberg LSL/Notebook timeline

From 2012hs.igem.org

(Difference between revisions)
 
(16 intermediate revisions not shown)
Line 15: Line 15:
/-->
/-->
<html>
<html>
-
<link rel="stylesheet" href="../compiled/css/timeline.css"></link>
 
-
<style>
 
<style type="text/css">
<style type="text/css">
-
.gallery p  {padding: 0 20px;
+
#menue {position: relative; top: 20px; left: 20px; z-index: 20; font-color: #FFFFFF;}
-
                        text-align: justify;
+
 
-
                        font-size: 12px;}
+
      .bereich {position: relative; top: 0px; font-size: 90%; text-decoration: None; width: 300px; text-align: center; display: block; padding-top: 5px; padding-bottom: 4px; border: 1px solid #555555; border-left: 0.5px solid #555555;}
 +
 
 +
      .bereich:hover {position: relative; top: 0px; font-size: 90%; text-decoration: None; width: 300px; text-align: center; display: block; padding-top: 5px; padding-bottom: 4px; border: 1px solid #555555; border-left: 0.5px solid #555555;}
 +
 
 +
      a.mainlink {text-decoration: None; color: #000000; font-family: Verdana, Arial;}
 +
 
 +
      a.link {
 +
      display: block;
 +
      color: #FFFFFF;
 +
      font-color: #FFFFFF;
 +
      font-family: Verdana, Arial;
 +
      font-size: 10px;
 +
      text-decoration: None;
 +
      border: 1px solid #555555;
 +
      border-bottom: 0.5px solid #555555;
 +
      padding-top: 8px;
 +
      padding-bottom: 7px;
 +
      position: relative;
 +
      top: 4px;
 +
      left: -1px;
 +
      width: 128px;
 +
      }
 +
 
 +
      a.link.bereich {
 +
      display: block;
 +
      text-decoration: None;
 +
      }
 +
 
 +
      a.link:hover {
 +
      display: block;
 +
      color: #000000;
 +
      text-decoration: None;
 +
      }
 +
 
 +
#text_wrapper {position: relative; top: 50px; left: 50px; z-index: 20; font-color: #FFFFFF;}
</style>
</style>
-
<body id="home" onload="setPageSize()">
 
 +
<body id="home" onload="setPageSize()">
<div id="super_main_wrapper">
<div id="super_main_wrapper">
 +
<div id="SubWrapper">
<div id="SubWrapper">
-
<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 -->
+
<table id="menue" cellPadding=0 cellSpacing=0>
-
</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 -->
+
      <tr  onclick="anzeigen('menue#1')";>
-
</p><p>The main text goes here. You can have p tags too.</p>
+
<td valign=top class="bereich">
-
</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><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>
+
      <a class="mainlink"> Planning and Developing </a>
-
</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>
+
 
 +
      <span id="menue#1" style="display: none;">
 +
<a onclick="hideAll();setVisibility('info11','show');";>Date - 1st Meeting</a><br/>
 +
<a onclick="hideAll();setVisibility('info12','show');";>Date - 2nd Meeting</a><br/>
 +
<a onclick="hideAll();setVisibility('info13','show');";>Date - 3rd Meeting</a><br/>
 +
<a onclick="hideAll();setVisibility('info14','show');";>Date - 4th Meeting</a><br/>
 +
<a onclick="hideAll();setVisibility('info15','show');";>Date - 5th Meeting</a><br/>
 +
      </span>
 +
 
 +
    </div>
 +
 
 +
  </td>
 +
 
 +
 
 +
<td valign=top class="bereich" onclick="anzeigen('menue#2')">
 +
 
 +
    <div>
 +
 
 +
      <a class="mainlink" onclick="hideAll();setVisibility('info2', 'show');";> Laboratory </a>
 +
 
 +
      <span id="menue#2" style="display: none;">
 +
<p>jdowjdojo</p>
 +
<p> sjhdowjdo</p>
 +
      </span>
 +
 
 +
    </div>
 +
 
 +
  </td>
 +
 
 +
  <td valign="top" class="bereich" onclick="anzeigen('menue#3')">
 +
 
 +
    <div>
 +
 
 +
    <a class="mainlink" onclick="hideAll();setVisibility('info3', 'show');";> Testing and Evaluation </a>
 +
<span id="menue#3" style="display: none;">
 +
<a onclick="hideAll();setVisibility('info31','show');";>Date - 1st Testing Session</a><br/>
 +
<a onclick="hideAll();setVisibility('info32','show');";>Date - 2nd Testing Session</a><br/>
 +
<a onclick="hideAll();setVisibility('info33','show');";>Date - 3rd Testing Session</a><br/>
 +
<a onclick="hideAll();setVisibility('info34','show');";>Date - 4th Testing Session</a><br/>
 +
<a onclick="hideAll();setVisibility('info35','show');";>Date - 5th Testing Session</a><br/>
 +
</span>
 +
</div>
 +
</td>
 +
 
 +
  </tr>
 +
 
 +
    </table>
 +
 
 +
</div><!-- end SubWrapper-->
-
</div><!-- end SubWrapper -->
 
</div><!-- end super_main_wrapper-->
</div><!-- end super_main_wrapper-->
</body>
</body>
-
<script src="http://s.ytimg.com/yt/jsbin/www-widgetapi-vfl1_zC6X.js" async="">
 
-
</script>
 
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
 
-
</script>
 
-
<script src="../compiled/js/timeline-min.js" type="text/javascript">
 
-
</script>
 
-
<script>
 
<script type="text/javascript">
<script type="text/javascript">
-
$(document).ready(function() {
 
-
3 var timeline = new VMM.Timeline();
 
-
4 timeline.init();
 
-
5 });
 
function setPageSize() {
function setPageSize() {
len = document.getElementById('super_main_wrapper').offsetHeight;
len = document.getElementById('super_main_wrapper').offsetHeight;
document.getElementById('bodyContent').style.height = len + 'px';
document.getElementById('bodyContent').style.height = len + 'px';
document.getElementById('SupWrapper').style.height = len + 'px';
document.getElementById('SupWrapper').style.height = len + 'px';
-
document.getElementById('news').style.height = len + 'px';
 
}
}
 +
</script>
 +
 +
<script type='text/javascript'>
 +
function anzeigen(das){
 +
if(document.getElementById(das).style.display=='none')
 +
document.getElementById(das).style.display='block';
 +
else document.getElementById(das).style.display='none';}
 +
function setVisibility(id, visibility) {
 +
document.getElementById(id).style.display = visibility;
 +
}
 +
</script>
</script>
</html>
</html>

Latest revision as of 16:41, 11 June 2012

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

Retrieved from "http://2012hs.igem.org/Team:Heidelberg_LSL/Notebook_timeline"