Template:Team:Calgary Entrepreneurial/Header
From 2013.igem.org
(Difference between revisions)
(39 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<head> | <head> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<!--Fonts--> | <!--Fonts--> | ||
Line 14: | Line 15: | ||
<script> | <script> | ||
- | + | //from http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ | |
+ | function viewport() { | ||
+ | var e = window, a = 'inner'; | ||
+ | if (!('innerWidth' in window )) { | ||
+ | a = 'client'; | ||
+ | e = document.documentElement || document.body; | ||
+ | } | ||
+ | return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; | ||
+ | } | ||
+ | $(document).ready(function(){ | ||
+ | //only activates if JS is active: removes the notice | ||
+ | $('#jsnotice').css('display', 'none'); | ||
+ | |||
+ | var navlist = $('#blackheader nav'); | ||
+ | |||
//only activates if JS is active: changes z-index of the maincontent box to | //only activates if JS is active: changes z-index of the maincontent box to | ||
//go over the blackheader instead of the default value (2) | //go over the blackheader instead of the default value (2) | ||
- | $('#maincontent').css('z-index', '3'); | + | if(viewport().width > 768){ |
- | + | $('#maincontent').css('z-index', '3'); | |
+ | } | ||
+ | else{ | ||
+ | navlist.css('display', 'none'); | ||
+ | $('#navbutton').addClass('active'); | ||
+ | } | ||
+ | |||
+ | $('#navbutton').click(function(){ | ||
+ | if(navlist.is(':visible')){ | ||
+ | navlist.slideUp(300, function(){ | ||
+ | navlist.hide(); | ||
+ | }); | ||
+ | $('#navbutton').fadeIn(300, function(){ | ||
+ | $('#navbutton').css('background', 'transparent'); | ||
+ | }); | ||
+ | } | ||
+ | else{ | ||
+ | navlist.slideDown(300, function(){ | ||
+ | navlist.show(); | ||
+ | }); | ||
+ | $('#navbutton').fadeIn(300, function(){ | ||
+ | $('#navbutton').css('background', '#7cb83d'); | ||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | //resets navigation states for window resizing (e.g. iPad orientation flip) | ||
+ | $(window).resize(function(){ | ||
+ | if(viewport().width > 768){ | ||
+ | if(navlist.is(':hidden')){ | ||
+ | navlist.show(); | ||
+ | } | ||
+ | } | ||
+ | else{ | ||
+ | $('#blackheader').show(); | ||
+ | $('#whiteheader').hide(); | ||
+ | navlist.hide(); | ||
+ | $('#navbutton').css('background', 'transparent'); | ||
+ | $('#navbutton').addClass('active'); | ||
+ | } | ||
+ | }); | ||
+ | |||
}); | }); | ||
//slower, but necessary to have all images already in place prior to calculating fixadent | //slower, but necessary to have all images already in place prior to calculating fixadent | ||
$(window).load(function(){ | $(window).load(function(){ | ||
+ | |||
//initialize values for headers so that the whiteheader can appear on sufficient scroll | //initialize values for headers so that the whiteheader can appear on sufficient scroll | ||
var fixadent = $("#maincontent"), | var fixadent = $("#maincontent"), | ||
Line 31: | Line 88: | ||
$(window).scroll(function(){ | $(window).scroll(function(){ | ||
- | + | if(viewport().width > 768){ | |
- | + | //fades in the white header when the white portion hits the top | |
- | + | if(window.pageYOffset > pos.top){ | |
- | + | white.fadeIn(250,function(){ | |
- | + | white.css('display', 'block'); | |
- | + | }); | |
- | + | black.fadeOut(250,function(){ | |
- | + | black.css('display', 'none'); | |
- | }); | + | }); |
+ | } | ||
+ | //fade out otherwise | ||
+ | else{ | ||
+ | white.fadeOut(250,function(){ | ||
+ | white.css('display', 'none'); | ||
+ | }); | ||
+ | black.fadeIn(250,function(){ | ||
+ | black.css('display', 'block'); | ||
+ | }); | ||
+ | } | ||
} | } | ||
- | |||
else{ | else{ | ||
- | + | //show only the black header otherwise | |
- | + | white.hide(); | |
- | + | black.show(); | |
- | black. | + | |
- | + | ||
- | + | ||
} | } | ||
- | |||
}); | }); | ||
Line 69: | Line 131: | ||
<body> | <body> | ||
- | |||
<header id="blackheader"> | <header id="blackheader"> | ||
<!--Home logo, along with a mobile version--> | <!--Home logo, along with a mobile version--> | ||
- | <a class="logolink" href=" | + | <a class="logolink" href="https://2013.igem.org/Team:Calgary_Entrepreneurial"> |
<img class="logo" src="https://static.igem.org/mediawiki/2013/f/f9/CalgaryE_Logo_white_green_low.png"></img> | <img class="logo" src="https://static.igem.org/mediawiki/2013/f/f9/CalgaryE_Logo_white_green_low.png"></img> | ||
</a> | </a> | ||
- | <a class="logolink" href=" | + | <a class="logolink" href="https://2013.igem.org/Team:Calgary_Entrepreneurial"> |
<img class="logo" id="mobilelogo" src="https://static.igem.org/mediawiki/2013/c/cf/CalgaryE_Logo_white_green_mini.png"></img> | <img class="logo" id="mobilelogo" src="https://static.igem.org/mediawiki/2013/c/cf/CalgaryE_Logo_white_green_mini.png"></img> | ||
</a> | </a> | ||
+ | |||
+ | <div id="navbutton"><img src="https://static.igem.org/mediawiki/2013/6/6e/2013CalgaryE_Menubutton.png"></img></div> | ||
<!--Nav menu--> | <!--Nav menu--> | ||
<nav> | <nav> | ||
<ul> | <ul> | ||
- | <li><a href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Team">Team</a></li> | + | <li><a class="team" href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Team">Team</a></li> |
- | <li><a href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Project">Project</a></li> | + | <li><a class="project" href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Project">Project</a></li> |
- | <li><a href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Project/HumanPractices">Human Practices</a></li> | + | <li><a class="hp" href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Project/HumanPractices">Human Practices</a></li> |
- | <li><a href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Contact">Contact</a></li> | + | <li><a class="contact" href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Contact">Contact</a></li> |
- | <li><a href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Data"> | + | <li><a class="sources" href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Data">Sources</a></li> |
- | <li><a href="https://2013.igem.org" target="_blank">iGEM</a></li> | + | <li><a class="igem" href="https://2013.igem.org" target="_blank">iGEM</a></li> |
</ul> | </ul> | ||
</nav> | </nav> | ||
Line 94: | Line 157: | ||
<header id="whiteheader"> | <header id="whiteheader"> | ||
<!--Home logo--> | <!--Home logo--> | ||
- | <a href=" | + | <a href="https://2013.igem.org/Team:Calgary_Entrepreneurial"><img class="logo" src="https://static.igem.org/mediawiki/2013/1/10/CalgaryE_Logo_green_low.png"></img></a> |
<!--Nav menu--> | <!--Nav menu--> | ||
<nav> | <nav> | ||
<ul> | <ul> | ||
- | <li><a href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Team">Team</a></li> | + | <li><a class="team" href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Team">Team</a></li> |
- | <li><a href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Project">Project</a></li> | + | <li><a class="project" href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Project">Project</a></li> |
- | <li><a href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Project/HumanPractices">Human Practices</a></li> | + | <li><a class="hp" href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Project/HumanPractices">Human Practices</a></li> |
- | <li><a href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Contact">Contact</a></li> | + | <li><a class="contact" href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Contact">Contact</a></li> |
- | <li><a href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Data"> | + | <li><a class="sources" href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Data">Sources</a></li> |
- | <li><a href="https://2013.igem.org" target="_blank">iGEM</a></li> | + | <li><a class="igem" href="https://2013.igem.org" target="_blank">iGEM</a></li> |
</ul> | </ul> | ||
</nav> | </nav> | ||
</header> | </header> | ||
- | <div id="em" class="clear"></div> <!-- | + | <!--In case floating elements in the header mess up, and also acts as a ruler for ems with JS--> |
- | + | <div id="em" class="clear"></div> | |
+ | |||
+ | <!--Not removed if JS is disabled, removed otherwise--> | ||
+ | <div id="jsnotice"> | ||
+ | <p>FREDsense's website works best with Javascript enabled, especially on mobile devices. Please enable Javascript for optimal viewing.</p> | ||
+ | </div> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 18:09, 28 October 2013
FREDsense's website works best with Javascript enabled, especially on mobile devices. Please enable Javascript for optimal viewing.