Difference between revisions of "Team:Aalto-Helsinki/Attributions"
(navbar text color changes if you are on this page) |
(modified the site navigation to be responsive and took the sponsor template away) |
||
Line 23: | Line 23: | ||
position: fixed; | position: fixed; | ||
left: 0; | left: 0; | ||
− | + | bottom: 3%; | |
width: 10%; | width: 10%; | ||
z-index: 2; | z-index: 2; | ||
Line 34: | Line 34: | ||
#sidenav > li > a > h3 { | #sidenav > li > a > h3 { | ||
− | margin-top: | + | margin-top:1px; |
padding-top: 1px; | padding-top: 1px; | ||
padding-bottom: 1px; | padding-bottom: 1px; | ||
} | } | ||
− | #sidenav | + | #sidenav a:hover, |
− | + | #sidenav a.active { | |
− | + | color: black !important; | |
− | + | ||
} | } | ||
Line 63: | Line 62: | ||
<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="#supporters"><h3>Supporters</h3></a></li> | + | <li><a href="#" data-scroll="supporters"><h3>Supporters</h3></a></li> |
− | <li><a href="#">< | + | <li><a href="#" data-scroll="sponsors"><h3>Sponsors</h3></a></li> |
− | <li><a href="# | + | <li><a href="#"><h3 style="border-top:solid;">To the Top</h3></a></li> |
− | + | ||
</ul> | </ul> | ||
Line 72: | Line 70: | ||
<div class = "inner-container" > | <div class = "inner-container" > | ||
+ | <!-- Supporters --> | ||
+ | <section id="supporters" data-anchor="supporters"> | ||
<h1 id="supporters"> Our Supporters</h1> | <h1 id="supporters"> Our Supporters</h1> | ||
− | < | + | </section> |
+ | <!-- Supporters end --> | ||
+ | |||
+ | |||
+ | <!-- Sponsors --> | ||
+ | <section id="sponsors" data-anchor="sponsors"> | ||
+ | <h1 > Our Sponsors</h1> | ||
<!-- Aalto science --> | <!-- Aalto science --> | ||
Line 256: | Line 262: | ||
</div><!-- end row --> | </div><!-- end row --> | ||
− | + | </section> | |
− | </ | + | <!-- Sponsors end --> |
− | + | ||
− | + | ||
− | + | ||
</div><!-- end inner-container--> | </div><!-- end inner-container--> | ||
Line 267: | Line 272: | ||
</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. --> | ||
+ | <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> | ||
+ | |||
+ | |||
+ | |||
+ | |||
</html> | </html> |
Revision as of 08:11, 19 August 2015