Difference between revisions of "Team:iTesla-SoundBio/Outreach"
JimmyZhong (Talk | contribs) |
JimmyZhong (Talk | contribs) |
||
| (14 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
<html> | <html> | ||
| + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | ||
| + | <script> | ||
| + | $(document).ready(function(){ | ||
| + | // Add smooth scrolling to all links | ||
| + | $("a").on('click', function(event) { | ||
| + | |||
| + | // Make sure this.hash has a value before overriding default behavior | ||
| + | if (this.hash !== "") { | ||
| + | // Prevent default anchor click behavior | ||
| + | event.preventDefault(); | ||
| + | |||
| + | // Store hash | ||
| + | var hash = this.hash; | ||
| + | |||
| + | // Using jQuery's animate() method to add smooth page scroll | ||
| + | // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area | ||
| + | $('html, body').animate({ | ||
| + | scrollTop: $(hash).offset().top | ||
| + | }, 800, function(){ | ||
| + | |||
| + | // Add hash (#) to URL when done scrolling (default click behavior) | ||
| + | window.location.hash = hash; | ||
| + | }); | ||
| + | } // End if | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
<style> | <style> | ||
body { | body { | ||
| Line 8: | Line 35: | ||
.sidenav { | .sidenav { | ||
| − | height: | + | height: 100%; |
width: 180px; | width: 180px; | ||
position: fixed; | position: fixed; | ||
| Line 16: | Line 43: | ||
background-color: #111; | background-color: #111; | ||
overflow-x: hidden; | overflow-x: hidden; | ||
| − | padding-top: | + | padding-top: 100px; |
} | } | ||
.sidenav a { | .sidenav a { | ||
| − | padding: 5px 5px 5px 5px; | + | padding-top: 5px 5px 5px 5px; |
text-decoration: none; | text-decoration: none; | ||
font-size: 20px; | font-size: 20px; | ||
| Line 46: | Line 73: | ||
<div class="sidenav"> | <div class="sidenav"> | ||
| + | <a href="https://2018.igem.org/Team:iTesla-SoundBio">Main Page</a> | ||
| + | <br> | ||
<a href=#top>Top</a> | <a href=#top>Top</a> | ||
<br> | <br> | ||
| − | <a href=# | + | <a href=#Research><img src="https://static.igem.org/mediawiki/2018/d/d8/T--iTesla-Soundbio--Researchpic.png" alt="Research" style="width:100%"></a> |
<br> | <br> | ||
<a href=#Education><img src="https://static.igem.org/mediawiki/2018/6/6b/T--itesla-soundbio--educationpic.png" alt="Education" style="width:100%"></a> | <a href=#Education><img src="https://static.igem.org/mediawiki/2018/6/6b/T--itesla-soundbio--educationpic.png" alt="Education" style="width:100%"></a> | ||
<br> | <br> | ||
| − | <a href=# | + | <a href=#Design><img src="https://static.igem.org/mediawiki/2018/3/3e/T--iTesla-Soundbio--Designpic.png" alt="Design" style="width:100%"></a> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
<script> | <script> | ||
$("#title").text("Human Practices") | $("#title").text("Human Practices") | ||
</script> | </script> | ||
| − | </ | + | <div class="main"> |
| + | <div id="top"></div> | ||
| + | <div id="Research"> | ||
| + | <h1><strong>Research</strong></h1> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div id="Education"> | ||
| + | <h1><strong>Education</strong></h1> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div id="Design"> | ||
| + | <h1><strong>Design</strong></h1> | ||
| + | </div> | ||
| + | </div> | ||
</html> | </html> | ||
Latest revision as of 00:57, 23 September 2018
