Difference between revisions of "Team:Aalto-Helsinki/InterLabBook"
m (z-index not defined here) |
(trying to add responsive navigation, doesn't work yet for some reason..) |
||
| Line 35: | Line 35: | ||
position: fixed; | position: fixed; | ||
left: 0; | left: 0; | ||
| − | + | bottom: 3%; | |
width: 10%; | width: 10%; | ||
} | } | ||
| Line 49: | Line 49: | ||
padding-bottom: 1px; | padding-bottom: 1px; | ||
} | } | ||
| + | #sidenav a:hover, | ||
| + | #sidenav a.active { | ||
| + | color: black !important; | ||
| + | } | ||
| + | |||
/* styling the background */ | /* styling the background */ | ||
.plasmids { | .plasmids { | ||
| Line 55: | Line 60: | ||
background-size: 100%; | background-size: 100%; | ||
} | } | ||
| + | |||
</style> | </style> | ||
</p></div> | </p></div> | ||
| − | <ul id="sidenav" class="nav nav-stacked" | + | <ul id="sidenav" class="nav nav-stacked"> |
| − | <li><a href="#week1"><h4>Week 1</h4></a></li> | + | <li><a href="#" data-scroll="week1"><h4>Week 1</h4></a></li> |
| − | <li><a href="#week2"><h4>Week 2</h4></a></li> | + | <li><a href="#" data-scroll="week2"><h4>Week 2</h4></a></li> |
| − | <li><a href="#week3"><h4> | + | <li><a href="#" data-scroll="week3"><h4>Weeks 3 & 4</h4></a></li> |
| − | <li><a href="# | + | <li><a href="#" data-scroll="week5"><h4>Week 5</h4></a></li> |
| − | <li><a href="# | + | <li><a href="#" data-scroll="week6"><h4>Week 6</h4></a></li> |
| − | <li><a href="# | + | <li><a href="#" ><h4 style="border-top:solid;">To the top</h4></a></li> |
</ul> | </ul> | ||
| + | |||
<div class="plasmids" style="margin-bottom:0;"> | <div class="plasmids" style="margin-bottom:0;"> | ||
| − | |||
| − | < | + | <div class = "inner-container" > |
| + | <h1 style="text-align:center">Interlab Measurement Study 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 > | ||
<tr> | <tr> | ||
| Line 119: | Line 127: | ||
</td> | </td> | ||
</tr> | </tr> | ||
| − | |||
</table> | </table> | ||
| − | < | + | </section> |
| + | <!-- Week 1 above --> | ||
| + | |||
| + | |||
| + | <!-- Week 2 below --> | ||
| + | <section id="week2" data-anchor="week2"> | ||
| + | <h2>Week 2</h2> | ||
<table > | <table > | ||
| Line 205: | Line 218: | ||
</table> | </table> | ||
| − | < | + | </section> |
| + | <!-- Week 2 above --> | ||
| + | |||
| + | |||
| + | <!-- Weeks 3 and 4 below --> | ||
| + | <section id="week3" data-anchor="week3"> | ||
| + | <h2>Week 3 & Week 4</h2> | ||
<table> | <table> | ||
| Line 239: | Line 258: | ||
</table> | </table> | ||
| + | </section> | ||
| + | <!-- Weeks 3 and 4 above --> | ||
| − | < | + | |
| + | <!-- Week 5 below --> | ||
| + | <section id="week5" data-anchor="week5"> | ||
| + | <h2>Week 5</h2> | ||
<table> | <table> | ||
| Line 306: | Line 330: | ||
</table> | </table> | ||
| − | < | + | </section> |
| + | <!-- Week 5 above --> | ||
| + | |||
| + | |||
| + | <!-- Week 6 below --> | ||
| + | <section id="week6" data-anchor="week6"> | ||
| + | <h2>Week 6</h2> | ||
| Line 369: | Line 399: | ||
</tr> | </tr> | ||
</table> | </table> | ||
| + | |||
| + | </section> | ||
| + | <!-- Week 6 above --> | ||
| + | |||
<div class="inner-container" style="margin:5% 20% 0% 25%;padding-bottom:10%;"> | <div class="inner-container" style="margin:5% 20% 0% 25%;padding-bottom:10%;"> | ||
| Line 374: | Line 408: | ||
</div><!-- Background end--> | </div><!-- Background end--> | ||
| + | |||
| + | <!-- here scripts to make the site navigation beautiful and responsive. --> | ||
| + | <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) { | ||
| + | $('.inner-container section').each(function(i) { | ||
| + | if ($(this).position().top <= windscroll + 20) { | ||
| + | $('#sidenav a.active').removeClass('active'); | ||
| + | $('#sidenav a').eq(i).addClass('active'); | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | } else { | ||
| + | |||
| + | $('#sidenav a.active').removeClass('active'); | ||
| + | $('#sidenav a:first').addClass('active'); | ||
| + | } | ||
| + | |||
| + | }).scroll(); | ||
| + | |||
| + | </script> | ||
| + | |||
| + | |||
| + | |||
| + | |||
</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;"> | ||
| + | |||
</html> | </html> | ||
Revision as of 07:23, 25 August 2015
