Template:Team:Calgary Entrepreneurial/Header

From 2013.igem.org

(Difference between revisions)
 
(16 intermediate revisions not shown)
Line 2: Line 2:
<head>
<head>
-
<!--
 
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
-
-->
 
<!--Fonts-->
<!--Fonts-->
Line 30: Line 28:
//only activates if JS is active: removes the notice
//only activates if JS is active: removes the notice
$('#jsnotice').css('display', 'none');
$('#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
Line 36: Line 36:
$('#maincontent').css('z-index', '3');
$('#maincontent').css('z-index', '3');
}
}
-
else{
+
else{
-
var ems = $("#em").height(); //em ruler
+
navlist.css('display', 'none');
-
+
$('#navbutton').addClass('active');
-
//lightweight alternative from http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element
+
-
var navbutton = document.getElementById("navbutton");
+
-
navbutton.className = navbutton.className + " active";
+
-
+
-
//change css of #maincontent and #blackheader to fixed states
+
-
$("#blackheader").addClass("active");
+
-
$("#whiteheader").addClass("active");
+
-
+
-
var padding = 6 * ems;
+
-
var pad = padding.toString();
+
-
+
-
$("#maincontent").css('padding-top', pad); //activates header switch earlier
+
-
+
}
}
 +
 +
$('#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');
 +
}
 +
});
});
});
Line 85: Line 107:
});
});
}
}
 +
}
 +
else{
 +
//show only the black header otherwise
 +
white.hide();
 +
black.show();
}
}
});
});
Line 118: Line 145:
<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">Sources</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 135: Line 162:
<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">Sources</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>

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"