Team:Heidelberg LSL/Notebook timeline

From 2012hs.igem.org

(Difference between revisions)
 
(15 intermediate revisions not shown)
Line 15: Line 15:
/-->
/-->
<html>
<html>
-
 
-
<link href="../compiled/css/timeline.css" rel="stylesheet">
 
-
        <style>
 
-
            html, body {
 
-
                height:100%;
 
-
                padding: 0px;
 
-
                margin: 0px;
 
-
            }
 
-
        </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;}
+
-
</style>
+
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+
      .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;}
-
<script type="text/javascript" src="../compiled/js/timeline-min.js"></script>
+
-
        <script>
+
-
            $(document).ready(function() {
+
-
                var timeline = new VMM.Timeline();
+
-
                timeline.init();
+
-
            });
+
-
        </script>
+
-
<body id="home" onload="setPageSize()">
+
      .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>
 +
 +
 +
 +
<body id="home" onload="setPageSize()">
<div id="super_main_wrapper">
<div id="super_main_wrapper">
 +
<div id="SubWrapper">
<div id="SubWrapper">
-
<div id="timeline">
+
<table id="menue" cellPadding=0 cellSpacing=0>
-
               
+
 
-
                <section>                                                  <!-- Timeline Start Screen -->
+
      <tr  onclick="anzeigen('menue#1')";>
-
                    <time>1977,5,11</time>                                  <!-- Timeline Begins Date -->
+
<td valign=top class="bereich">
-
                    <h2>The Main Timeline Headline</h2>                    <!-- Main Headline -->
+
 
-
                    <article>                                              <!-- Main Text -->
+
  <div>
-
                        <p>The main text goes here. You can have p tags or anything really.</p>
+
 
-
                    </article>
+
      <a class="mainlink"> Planning and Developing </a>
-
                    <figure>                       
+
 
-
                        <img src="../taylor/final.jpg">             <!-- Media, can also be a link to youtube video etc (optional) -->
+
      <span id="menue#1" style="display: none;">
-
                        <cite>John Doe/Millennium Magazine</cite>          <!-- Credit for media (optional) -->
+
<a onclick="hideAll();setVisibility('info11','show');";>Date - 1st Meeting</a><br/>
-
                        <figcaption>Caption goes here.</figcaption>        <!-- Caption for media (optional) -->
+
<a onclick="hideAll();setVisibility('info12','show');";>Date - 2nd Meeting</a><br/>
-
                    </figure>
+
<a onclick="hideAll();setVisibility('info13','show');";>Date - 3rd Meeting</a><br/>
-
                </section>
+
<a onclick="hideAll();setVisibility('info14','show');";>Date - 4th Meeting</a><br/>
-
               
+
<a onclick="hideAll();setVisibility('info15','show');";>Date - 5th Meeting</a><br/>
-
                <ul>
+
      </span>
-
                   
+
 
-
                    <!-- Event -->
+
    </div>
-
                    <li>
+
 
-
                        <time>1978,5,11</time>                             <!-- Event Date -->
+
  </td>
-
                        <time>1978,8,11</time>                             <!-- End of Event (optional) -->
+
 
-
                        <h3>Headline Goes Here</h3>                        <!-- Headline -->
+
 
-
                        <article>                                          <!-- Main Text -->
+
<td valign=top class="bereich" onclick="anzeigen('menue#2')">
-
                            <p>The main text goes here. You can have p tags too.</p>
+
 
-
                        </article>
+
    <div>
-
                        <figure>                       
+
 
-
                            <img src="../taylor/final.jpg">        <!-- Media, can also be a link to youtube video etc (optional) -->
+
      <a class="mainlink" onclick="hideAll();setVisibility('info2', 'show');";> Laboratory </a>
-
                            <cite>John Doe/Millennium Magazine</cite>      <!-- Credit for media (optional) -->
+
 
-
                            <figcaption>Caption goes here.</figcaption>    <!-- Caption for media (optional) -->
+
      <span id="menue#2" style="display: none;">
-
                        </figure>
+
<p>jdowjdojo</p>
-
                    </li>
+
<p> sjhdowjdo</p>
-
                    <!-- / Event -->
+
      </span>
-
                   
+
 
-
                    <li>
+
    </div>
-
                        <time>1978,5,13</time>
+
 
-
                        <time>1978,5,19</time>
+
  </td>
-
                        <h3>Headline Goes Here</h3>
+
 
-
                        <article>
+
  <td valign="top" class="bereich" onclick="anzeigen('menue#3')">
-
                            <p>The main text goes here. You can have p tags too.</p>
+
 
-
                        </article>
+
    <div>
-
                        <figure>
+
 
-
                            <a href="http://youtu.be/vjVfu8-Wp6s">Anything</a>
+
    <a class="mainlink" onclick="hideAll();setVisibility('info3', 'show');";> Testing and Evaluation </a>
-
                            <cite>John Doe/Millennium Magazine</cite>
+
<span id="menue#3" style="display: none;">
-
                            <figcaption>Caption goes here.</figcaption>
+
<a onclick="hideAll();setVisibility('info31','show');";>Date - 1st Testing Session</a><br/>
-
                        </figure>
+
<a onclick="hideAll();setVisibility('info32','show');";>Date - 2nd Testing Session</a><br/>
-
                    </li>
+
<a onclick="hideAll();setVisibility('info33','show');";>Date - 3rd Testing Session</a><br/>
-
                    <li>
+
<a onclick="hideAll();setVisibility('info34','show');";>Date - 4th Testing Session</a><br/>
-
                        <time>1978,5,16</time>
+
<a onclick="hideAll();setVisibility('info35','show');";>Date - 5th Testing Session</a><br/>
-
                        <time>1978,5,11</time>
+
</span>
-
                        <h3>Headline Goes Here</h3>
+
</div>
-
                        <article>
+
</td>
-
                            <p>The main text goes here. You can have p tags too.</p>
+
 
-
                        </article>
+
  </tr>
-
                        <figure>
+
 
-
                            <img src="../taylor/final.jpg">
+
    </table>
-
                            <cite>John Doe/Millennium Magazine</cite>
+
 
-
                            <figcaption>Caption goes here.</figcaption>
+
</div><!-- end SubWrapper-->
-
                        </figure>
+
-
                    </li>
+
-
                    <li>
+
-
                        <time>1978,5,18</time>
+
-
                        <h3>Headline Goes Here</h3>
+
-
                        <article>
+
-
                            <p>The main text goes here. You can have p tags too.</p>
+
-
                        </article>
+
-
                        <figure>
+
-
                            <img src="../taylor/final.jpg">
+
-
                            <cite>John Doe/Millennium Magazine</cite>
+
-
                            <figcaption>Caption goes here.</figcaption>
+
-
                        </figure>
+
-
                    </li>
+
-
                    <li>
+
-
                        <time>1978,6,18</time>
+
-
                        <h3>Headline Goes Here</h3>
+
-
                        <article>
+
-
                            <p>The main text goes here. You can have p tags too.</p>
+
-
                        </article>
+
-
                        <figure>
+
-
                            <img src="../taylor/final.jpg">
+
-
                            <cite>John Doe/Millennium Magazine</cite>
+
-
                            <figcaption>Caption goes here.</figcaption>
+
-
                        </figure>
+
-
                    </li>
+
-
                    <li>
+
-
                        <time>1978,5,19</time>
+
-
                        <h3>Headline Goes Here</h3>
+
-
                        <article>
+
-
                            <p>The main text goes here. You can have p tags too.</p>
+
-
                        </article>
+
-
                        <figure>
+
-
                            <img src="../taylor/final.jpg">
+
-
                            <cite>John Doe/Millennium Magazine</cite>
+
-
                            <figcaption>Caption goes here.</figcaption>
+
-
                        </figure>
+
-
                    </li>
+
-
                    <li>
+
-
                        <time>1978,8,18</time>
+
-
                        <h3>Headline Goes Here</h3>
+
-
                        <article>
+
-
                            <p>The main text goes here. You can have p tags too.</p>
+
-
                        </article>
+
-
                        <figure>
+
-
                            <img src="../taylor/final.jpg">
+
-
                            <cite>John Doe/Millennium Magazine</cite>
+
-
                            <figcaption>Caption goes here.</figcaption>
+
-
                        </figure>
+
-
                    </li>
+
-
                    <li>
+
-
                        <time>1979,8,18</time>
+
-
                        <h3>Headline Goes Here</h3>
+
-
                        <article>
+
-
                            <p>The main text goes here. You can have p tags too.</p>
+
-
                        </article>
+
-
                        <figure>
+
-
                            <img src="../taylor/final.jpg">
+
-
                            <cite>John Doe/Millennium Magazine</cite>
+
-
                            <figcaption>Caption goes here.</figcaption>
+
-
                        </figure>
+
-
                    </li>
+
-
                </ul>
+
-
               
+
-
               
+
-
            </div>
+
-
</div><!-- end SubWrapper -->
 
</div><!-- end super_main_wrapper-->
</div><!-- end super_main_wrapper-->
</body>
</body>
 +
<script type="text/javascript">
<script type="text/javascript">
Line 180: Line 131:
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"