Template:Team:Calgary Entrepreneurial/Header

From 2013.igem.org

(Difference between revisions)
 
(41 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>
-
$(document).ready(function(){
+
//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
+
//fades in the white header when the white portion hits the top
-
if(window.pageYOffset > pos.top){
+
if(window.pageYOffset > pos.top){
-
white.fadeIn(250,function(){
+
white.fadeIn(250,function(){
-
white.css('display', 'block');
+
white.css('display', 'block');
-
});
+
});
-
black.fadeOut(250,function(){
+
black.fadeOut(250,function(){
-
black.css('display', 'none');
+
black.css('display', 'none');
-
});
+
});
 +
}
 +
//fade out otherwise
 +
else{
 +
white.fadeOut(250,function(){
 +
white.css('display', 'none');
 +
});
 +
black.fadeIn(250,function(){
 +
black.css('display', 'block');
 +
});
 +
}
}
}
-
//fade out otherwise
 
else{
else{
-
white.fadeOut(250,function(){
+
//show only the black header otherwise
-
white.css('display', 'none');
+
white.hide();
-
});
+
black.show();
-
black.fadeIn(250,function(){
+
-
black.css('display', 'block');
+
-
});
+
}
}
-
 
});
});
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="#">Project</a></li>
+
<li><a class="project" href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Project">Project</a></li>
-
<li><a href="#">Source Data</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/Project/HumanPractices">Human Practices</a></li>
+
<li><a class="contact" href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Contact">Contact</a></li>
-
<li><a href="#">Contact</a></li>
+
<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="#"><img class="logo" src="https://static.igem.org/mediawiki/2013/1/10/CalgaryE_Logo_green_low.png"></img></a>
+
<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="#">Project</a></li>
+
<li><a class="project" href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Project">Project</a></li>
-
<li><a href="#">Source Data</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/Project/HumanPractices">Human Practices</a></li>
+
<li><a class="contact" href="https://2013.igem.org/Team:Calgary_Entrepreneurial/Contact">Contact</a></li>
-
<li><a href="#">Contact</a></li>
+
<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> <!--Just in case floating elements in the header mess up-->
+
<!--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.

Retrieved from "http://2013.igem.org/Template:Team:Calgary_Entrepreneurial/Header"