Team:SYSU-Software/notebook2

From 2013.igem.org

(Difference between revisions)

Latest revision as of 14:54, 26 September 2013

Team:SYSU-Software

10th Mar.
1st Apr.
1st May.
1st Jun.
1st July.
1st Aug.
5th Aug.
1st Sep.
21st Sep.

@@ Line 15: / Line 15: @@
 <script src="https://2013.igem.org/Team:SYSU-Software/bootstrap.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
 <script src="https://2013.igem.org/Team:SYSU-Software/prefix.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
+<script src="https://2013.igem.org/Team:SYSU-Software/notebook.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
 </head>
@@ Line 27: / Line 27: @@
          <div id="notebook-container" class="container">
              <div class="scrollblock" id="overview">
                  <img id="file-folder" src="https://static.igem.org/mediawiki/2013/d/d7/File-folder.png" alt="folder">
                  <ul id="overview-timeline">
                      <li class="line">
-                         <img src="https://static.igem.org/mediawiki/2013/6/67/List.png" alt="time-line">
+                         <img src="https://static.igem.org/mediawiki/2013/6/67/List.png" alt="time-line"></li>
-                    </li>
-                     <li class="right">20th Apr.</li>
+                     <li class="right"><a href="#time-0">10th Mar.</a></li>
-                     <li class="left" style="top: 15px">29th Apr.</li>
+                     <li class="left" style="top: 30px"><a href="#time-1">1st Apr.</a></li>
-                     <li class="right" style="top: 45px">19th May.</li>
+                     <li class="right" style="top: 60px"><a href="#time-2">1st May.</a></li>
-                     <li class="left" style="top: 90px">20th Jun.</li>
+                     <li class="left" style="top: 120px"><a href="#time-3">1st Jun.</a></li>
-                     <li class="right" style="top: 135px">20th Jul.</li>
+                     <li class="right" style="top: 165px"><a href="#time-4">1st July.</a></li>
-                     <li class="left" style="top: 165px">29th Jul.</li>
+                     <li class="left" style="top: 225px"><a href="#time-5">1st Aug.</a></li>
-                     <li class="right" style="top: 225px">31th Aug.</li>
+                     <li class="right" style="top: 295px"><a href="#time-6">5th Aug.</a></li>
-                     <li class="left" style="top: 290px">10th Sep.</li>
+                     <li class="left" style="top: 375px"><a href="#time-7">1st Sep.</a></li>
-                     <li class="right" style="top: 375px">1st Oct.</li>
+                     <li class="right" style="top: 460px"><a href="#time-8">21st Sep.</a></li>
-                    <li class="left" style="top: 445px">12th Oct.</li>
                  </ul>
-                 <img id="notebook" src="https://static.igem.org/mediawiki/2013/b/bd/Notebook2.png" alt="notebook" style="position:fixed; top: 150px">
+                 <img id="notebook" src="https://static.igem.org/mediawiki/2013/b/bd/Notebook2.png" alt="notebook" style="position:fixed; top: 150px"></div>
-            </div>
              <div class="scrollblock" id="detail">
                  <ul id="detail-timeline">
                      <li class="line">
-                         <img src="https://static.igem.org/mediawiki/2013/6/67/List.png" alt="time-line">
+                         <img src="https://static.igem.org/mediawiki/2013/6/67/List.png" alt="time-line"></li>
-                    </li>
+                     <!-- <li class="right">20th Apr.</li>
-                     <li class="right">20th Apr.</li>
                      <li class="right" style="top: 15px">29th Apr.</li>
                      <li class="right" style="top: 45px">19th May.</li>
@@ Line 62: / Line 58: @@
                      <li class="right" style="top: 290px">10th Sep.</li>
                      <li class="right" style="top: 375px">1st Oct.</li>
-                     <li class="right" style="top: 445px">12th Oct.</li>
+                     <li class="right" style="top: 445px">12th Oct.</li> -->
                  </ul>
                  <ul id="detail-block">
-                    <li>
-                        <div class="left-part">
-                            <img src="https://static.igem.org/mediawiki/2013/b/bb/Photo1.png" alt="photo">
-                        </div>
-                        <div class="right-part">
-                            <h5>20th Apr.</h5>
-                            <span>Team Leader of SYSU-Software,IGEM 2013.Taking charge of the design and progress of the whole project.</span>
-                        </div>
-                    </li>
-                     <li>
+                     <!-- <li>
                          <div class="left-part">
-                             <img src="https://static.igem.org/mediawiki/2013/b/bb/Photo1.png" alt="photo">
+                             <img src="https://static.igem.org/mediawiki/2013/b/bb/Photo1.png" alt="photo"></div>
-                        </div>
                          <div class="right-part">
                              <h5>20th Apr.</h5>
-                             <span>Team Leader of SYSU-Software,IGEM 2013.Taking charge of the design and progress of the whole project.</span>
+                             <span>
-                        </div>
+                                Team Leader of SYSU-Software,IGEM 2013.Taking charge of the design and progress of the whole project.
-                    </li>
+                             </span>
-                    <li>
-                        <div class="left-part">
-                             <img src="https://static.igem.org/mediawiki/2013/b/bb/Photo1.png" alt="photo">
                          </div>
-                        <div class="right-part">
+                    </li> -->
-                            <h5>20th Apr.</h5>
-                            <span>Team Leader of SYSU-Software,IGEM 2013.Taking charge of the design and progress of the whole project.</span>
-                        </div>
-                    </li>
-                    <li>
-                        <div class="left-part">
-                            <img src="https://static.igem.org/mediawiki/2013/b/bb/Photo1.png" alt="photo">
-                        </div>
-                        <div class="right-part">
-                            <h5>20th Apr.</h5>
-                            <span>Team Leader of SYSU-Software,IGEM 2013.Taking charge of the design and progress of the whole project.</span>
-                        </div>
-                    </li>
-                    <li>
-                        <div class="left-part">
-                            <img src="https://static.igem.org/mediawiki/2013/b/bb/Photo1.png" alt="photo">
-                        </div>
-                        <div class="right-part">
-                            <h5>20th Apr.</h5>
-                            <span>Team Leader of SYSU-Software,IGEM 2013.Taking charge of the design and progress of the whole project.</span>
-                        </div>
-                    </li>
-                    <li>
-                        <div class="left-part">
-                            <img src=https://static.igem.org/mediawiki/2013/b/bb/Photo1.png" alt="photo">
-                        </div>
-                        <div class="right-part">
-                            <h5>20th Apr.</h5>
-                            <span>Team Leader of SYSU-Software,IGEM 2013.Taking charge of the design and progress of the whole project.</span>
-                        </div>
-                    </li>
                  </ul>
              </div>
          </div>
      </div>
-    <script>
-        $(document).ready(function() {
-            $("#detail > #detail-block > li").css('height', $(window).height() + 'px');
-            $(window).scroll(function() {
-                var scrollTop = $(window).scrollTop();
-                console.log(scrollTop);
-                if (scrollTop <= 900) {
-                    $("#notebook").css({'position': 'fixed', 'top': '150px'});
-                } else if (scrollTop > 900 && scrollTop <= 1140) {
-                    $("#notebook").css({'position': 'relative'});
-                    $("#detail-timeline").css({'position': 'relative'});
-                } else if (scrollTop > 1140) {
-                    $("#detail-timeline").css({'position': 'fixed', 'top': '50%', 'margin-top': '-301px'});
-                }
-             });
-        });
-    </script>
 </body>
 </html>