Difference between revisions of "Team:Aalto-Helsinki/LabBook"
m |
(changed site navigation to be responsive and took the example table away) |
||
Line 38: | Line 38: | ||
width: 10%; | width: 10%; | ||
} | } | ||
− | |||
#sidenav > li > a { | #sidenav > li > a { | ||
padding-top: 1px; | padding-top: 1px; | ||
padding-bottom: 0px; | padding-bottom: 0px; | ||
} | } | ||
− | |||
#sidenav > li > a > h4 { | #sidenav > li > a > h4 { | ||
+ | font-size: 15px; | ||
margin-top:1px; | margin-top:1px; | ||
padding-top: 0px; | padding-top: 0px; | ||
padding-bottom: 0px; | padding-bottom: 0px; | ||
} | } | ||
+ | #sidenav a:hover, | ||
+ | #sidenav a.active { | ||
+ | color: black !important; | ||
+ | } | ||
+ | |||
/* Background pic */ | /* Background pic */ | ||
.plasmids { | .plasmids { | ||
Line 55: | Line 59: | ||
background-size: 100%; | background-size: 100%; | ||
} | } | ||
+ | |||
/* Fonts */ | /* Fonts */ | ||
.h3 { | .h3 { | ||
font-size:25px; | font-size:25px; | ||
} | } | ||
+ | |||
</style> | </style> | ||
Line 64: | Line 70: | ||
<ul id="sidenav" class="nav nav-stacked"><!-- nav-pills if we want rounded corners --> | <ul id="sidenav" class="nav nav-stacked"><!-- nav-pills if we want rounded corners --> | ||
− | <li><a href="#week1"><h4>Week 1</h4></a></li> | + | <li><a href="#week1" data-scroll="week1"><h4>Week 1</h4></a></li> |
− | <li><a href="#week2"><h4>Week 2</h4></a></li> | + | <li><a href="#week2" data-scroll="week2"><h4>Week 2</h4></a></li> |
− | <li><a href="#week3"><h4>Week 3</h4></a></li> | + | <li><a href="#week3" data-scroll="week3"><h4>Week 3</h4></a></li> |
− | <li><a href="#week4"><h4>Week 4</h4></a></li> | + | <li><a href="#week4" data-scroll="week4"><h4>Week 4</h4></a></li> |
− | <li><a href="#week5"><h4>Week 5</h4></a></li> | + | <li><a href="#week5" data-scroll="week5"><h4>Week 5</h4></a></li> |
− | <li><a href="#week6"><h4>Week 6</h4></a></li> | + | <li><a href="#week6" data-scroll="week6"><h4>Week 6</h4></a></li> |
− | <li><a href="#week7"><h4>Week 7</h4></a></li> | + | <li><a href="#week7" data-scroll="week7"><h4>Week 7</h4></a></li> |
− | <li><a href="#week8"><h4>Week 8</h4></a></li> | + | <li><a href="#week8" data-scroll="week8"><h4>Week 8</h4></a></li> |
− | <li><a href="#week9"><h4>Week 9</h4></a></li> | + | <li><a href="#week9" data-scroll="week9"><h4>Week 9</h4></a></li> |
− | <li><a href="#week10"><h4>Week 10</h4></a></li> | + | <li><a href="#week10" data-scroll="week10"><h4>Week 10</h4></a></li> |
− | <li><a href="#week11"><h4>Week 11</h4></a></li> | + | <li><a href="#week11" data-scroll="week11"><h4>Week 11</h4></a></li> |
− | <li><a href="#week12"><h4>Week 12</h4></a></li> | + | <li><a href="#week12" data-scroll="week12"><h4>Week 12</h4></a></li> |
− | <li><a href="#week13"><h4>Week 13</h4></a></li> | + | <li><a href="#week13" data-scroll="week13"><h4>Week 13</h4></a></li> |
− | <li><a href="#week14"><h4>Week 14</h4></a></li> | + | <li><a href="#week14" data-scroll="week14"><h4>Week 14</h4></a></li> |
− | <li><a href="#week15"><h4>Week 15</h4></a></li> | + | <li><a href="#week15" data-scroll="week15"><h4>Week 15</h4></a></li> |
− | <li><a href="#week16"><h4>Week 16</h4></a></li> | + | <li><a href="#week16" data-scroll="week16"><h4>Week 16</h4></a></li> |
− | <li><a href="#week17"><h4>Week 17</h4></a></li> | + | <li><a href="#week17" data-scroll="week17"><h4>Week 17</h4></a></li> |
− | <li><a href="#week18"><h4>Week 18</h4></a></li> | + | <li><a href="#week18" data-scroll="week18"><h4>Week 18</h4></a></li> |
− | + | <li><a href="#"><h4 style="border-top:solid;">To the Top</h4></a></li> | |
+ | </ul> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<div class="plasmids"> | <div class="plasmids"> | ||
− | |||
+ | <div class = "inner-container" > | ||
<h1>Lab Book</h1> | <h1>Lab Book</h1> | ||
− | |||
</div><!-- end inner-container--> | </div><!-- end inner-container--> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | < | + | <!-- Week 1 below --> |
+ | <section id="week1" class="active" data-anchor="week1"> | ||
+ | <h2>Week 1</h2> | ||
<table > | <table > | ||
Line 299: | Line 185: | ||
</table> | </table> | ||
+ | </section> | ||
+ | <!-- Week 1 above --> | ||
+ | |||
− | < | + | <!-- Week 2 below --> |
+ | <section id="week2" data-anchor="week2"> | ||
+ | <h2>Week 2</h2> | ||
Line 447: | Line 338: | ||
</table> | </table> | ||
− | < | + | </section> |
+ | <!-- Week 2 above --> | ||
+ | |||
+ | |||
+ | <!-- Week 3 below --> | ||
+ | <section id="week3" data-anchor="week3"> | ||
+ | <h2>Week 3</h2> | ||
<table > | <table > | ||
Line 526: | Line 423: | ||
</table> | </table> | ||
− | < | + | </section> |
+ | <!-- Week 3 above --> | ||
+ | |||
+ | |||
+ | <!-- Week 4 below --> | ||
+ | <section id="week4" data-anchor="week4"> | ||
+ | |||
+ | <h2>Week 4</h2> | ||
<table > | <table > | ||
Line 591: | Line 495: | ||
</table> | </table> | ||
+ | </section> | ||
+ | <!-- Week 4 above --> | ||
− | < | + | |
+ | <!-- Week 5 below --> | ||
+ | <section id="week5" data-anchor="week5"> | ||
+ | <h2>Week 5</h2> | ||
<table> | <table> | ||
Line 705: | Line 614: | ||
</td> | </td> | ||
</tr> | </tr> | ||
+ | </table> | ||
+ | |||
+ | </section> | ||
+ | <!-- Week 5 above --> | ||
+ | <!-- Week 6 above --> | ||
+ | <section id="week6" data-anchor="week6"> | ||
− | + | <h2>Week 6</h2> | |
− | + | ||
− | <h2 | + | |
<table > | <table > | ||
Line 797: | Line 710: | ||
</table> | </table> | ||
+ | </section> | ||
+ | <!-- Week 6 above --> | ||
− | < | + | |
+ | <!-- Week 7 below --> | ||
+ | <section id="week7" data-anchor="week7"> | ||
+ | |||
+ | <h2>Week 7</h2> | ||
Line 886: | Line 805: | ||
</table> | </table> | ||
+ | </section> | ||
+ | <!-- Week 7 above --> | ||
− | < | + | |
+ | |||
+ | <!-- Week 8 below --> | ||
+ | <section id="week8" data-anchor="week8"> | ||
+ | |||
+ | <h2>Week 8</h2> | ||
<table > | <table > | ||
Line 963: | Line 889: | ||
</table> | </table> | ||
+ | </section> | ||
+ | <!-- Week 8 above --> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- Week 9 below --> | ||
+ | <section id="week9" data-anchor="week9"> | ||
− | <h2 | + | <h2>Week 9</h2> |
<table > | <table > | ||
Line 1,091: | Line 1,024: | ||
</table> | </table> | ||
− | < | + | </section> |
+ | <!-- Week 9 above --> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- Week 10 below --> | ||
+ | <section id="week10" data-anchor="week10"> | ||
+ | |||
+ | <h2>Week 10</h2> | ||
<table> | <table> | ||
<tr> | <tr> | ||
Line 1,206: | Line 1,147: | ||
</table> | </table> | ||
− | < | + | </section> |
+ | <!-- Week 10 above --> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- Week 11 below --> | ||
+ | <section id="week11" data-anchor="week11"> | ||
+ | |||
+ | <h2>Week 11</h2> | ||
Line 1,397: | Line 1,346: | ||
</table> | </table> | ||
+ | </section> | ||
+ | <!-- Week 11 above --> | ||
− | < | + | |
+ | |||
+ | <!-- Week 12 below --> | ||
+ | <section id="week12" data-anchor="week12"> | ||
+ | |||
+ | <h2>Week 12</h2> | ||
<table > | <table > | ||
Line 1,576: | Line 1,532: | ||
</table> | </table> | ||
− | < | + | </section> |
+ | <!-- Week 12 above --> | ||
+ | |||
+ | |||
+ | <!-- Week 13 below --> | ||
+ | <section id="week13" data-anchor="week13"> | ||
+ | |||
+ | <h2>Week 13</h2> | ||
<table > | <table > | ||
Line 1,756: | Line 1,719: | ||
</table> | </table> | ||
+ | |||
+ | </section> | ||
+ | <!-- Week 13 above --> | ||
+ | |||
+ | |||
+ | <!-- Week 14 below --> | ||
+ | <section id="week14" data-anchor="week14"> | ||
<h2 id="week14">Week 14</h2> | <h2 id="week14">Week 14</h2> | ||
+ | |||
+ | </section> | ||
+ | <!-- Week 14 above --> | ||
+ | |||
+ | |||
+ | <!-- Week 15 below --> | ||
+ | <section id="week15" data-anchor="week15"> | ||
+ | |||
<h2 id="week15">Week 15</h2> | <h2 id="week15">Week 15</h2> | ||
+ | |||
+ | </section> | ||
+ | <!-- Week 15 above --> | ||
+ | |||
+ | |||
+ | <!-- Week 16 below --> | ||
+ | <section id="week16" data-anchor="week16"> | ||
+ | |||
<h2 id="week16">Week 16</h2> | <h2 id="week16">Week 16</h2> | ||
+ | |||
+ | </section> | ||
+ | <!-- Week 16 above --> | ||
+ | |||
+ | |||
+ | <!-- Week 17 below --> | ||
+ | <section id="week17" data-anchor="week17"> | ||
+ | |||
<h2 id="week17">Week 17</h2> | <h2 id="week17">Week 17</h2> | ||
+ | |||
+ | </section> | ||
+ | <!-- Week 17 above --> | ||
+ | |||
+ | |||
+ | <!-- Week 18 below --> | ||
+ | <section id="week18" data-anchor="week18"> | ||
+ | |||
<h2 id="week18">Week 18</h2> | <h2 id="week18">Week 18</h2> | ||
+ | |||
+ | </section> | ||
+ | <!-- Week 18 above --> | ||
Line 1,767: | Line 1,772: | ||
</div></div></body> <!--These are the closing tags for div id="mainContainer" and div id="contentContainer". The corresponding opening tags appear in the template that is {{included}} at the top of this page.--> | </div></div></body> <!--These are the closing tags for div id="mainContainer" and div id="contentContainer". The corresponding opening tags appear in the template that is {{included}} at the top of this page.--> | ||
<!-- The next starting p is to get rid of the annoying gap at the bottom of the page. There is a closing /p at some kind of ready footer, that can be seen when looking at the page source --><p style="margin:0;"> | <!-- The next starting p is to get rid of the annoying gap at the bottom of the page. There is a closing /p at some kind of ready footer, that can be seen when looking at the page source --><p style="margin:0;"> | ||
− | < | + | |
+ | |||
+ | |||
+ | <!-- here scripts to make the site navigation beautiful and responsive. --> | ||
+ | <!-- NOTE: if you copy this script to other pages you'll likely have to modify it to have .inner-container instead of .plasmids in the lower function!! --> | ||
+ | <script> | ||
+ | |||
+ | $('#sidenav a').on('click', function() { | ||
+ | |||
+ | var scrollAnchor = $(this).attr('data-scroll'), | ||
+ | scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28; | ||
+ | |||
+ | $('body,html').animate({ | ||
+ | scrollTop: scrollPoint | ||
+ | }, 500); | ||
+ | |||
+ | return false; | ||
+ | |||
+ | }) | ||
+ | |||
+ | |||
+ | $(window).scroll(function() { | ||
+ | var windscroll = $(window).scrollTop(); | ||
+ | if (windscroll >= 100) { | ||
+ | $('.plasmids section').each(function(i) { | ||
+ | if ($(this).position().top <= windscroll + 140) { | ||
+ | $('#sidenav a.active').removeClass('active'); | ||
+ | $('#sidenav a').eq(i).addClass('active'); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | } else { | ||
+ | |||
+ | $('#sidenav a.active').removeClass('active'); | ||
+ | $('#sidenav a:first').addClass('active'); | ||
+ | } | ||
+ | |||
+ | }).scroll(); | ||
+ | |||
+ | </script> |
Revision as of 11:43, 25 August 2015