Difference between revisions of "Template:Pitt"

 
(65 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
<html>
 
<html>
 
<head>
 
<head>
 +
<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
 
<script type="text/javascript" src="https://static.igem.org/mediawiki/2015/8/87/Jquery.animate-colors.txt"></script>
 
<script type="text/javascript" src="https://static.igem.org/mediawiki/2015/8/87/Jquery.animate-colors.txt"></script>
  
 
<script>
 
<script>
 +
 
$(document).ready(function(){
 
$(document).ready(function(){
  
−
$("#menuContainer li").hover(
+
(function($) {
 +
var defaults = {
 +
topSpacing: 0,
 +
bottomSpacing: 0,
 +
className: 'is-sticky',
 +
wrapperClassName: 'sticky-wrapper',
 +
center: false,
 +
getWidthFrom: ''
 +
},
 +
$window = $(window),
 +
$document = $(document),
 +
sticked = [],
 +
windowHeight = $window.height(),
 +
scroller = function() {
 +
var scrollTop = $window.scrollTop(),
 +
documentHeight = $document.height(),
 +
dwh = documentHeight - windowHeight,
 +
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
 +
 
 +
for (var i = 0; i < sticked.length; i++) {
 +
var s = sticked[i],
 +
elementTop = s.stickyWrapper.offset().top,
 +
etse = elementTop - s.topSpacing - extra;
 +
 
 +
if (scrollTop <= etse) {
 +
if (s.currentTop !== null) {
 +
s.stickyElement.css('position', '').css('top', '');
 +
s.stickyElement.parent().removeClass(s.className);
 +
$("#menuContainer td").stop(true, false).animate({backgroundColor: '#000000'}, 250);
 +
$("#menuContainer table").stop(true, false).animate({backgroundColor: '#000000'}, 250);
 +
$("#menuContainer li").css({backgroundColor: '#000000'});
 +
s.currentTop = null;
 +
}
 +
} else {
 +
var newTop = documentHeight - s.stickyElement.outerHeight() - s.topSpacing - s.bottomSpacing - scrollTop - extra;
 +
if (newTop < 0) {
 +
newTop = newTop + s.topSpacing;
 +
} else {
 +
newTop = s.topSpacing;
 +
}
 +
if (s.currentTop != newTop) {
 +
s.stickyElement.css('position', 'fixed').css('top', newTop);
 +
if (typeof s.getWidthFrom !== 'undefined') {
 +
s.stickyElement.css('width', $(s.getWidthFrom).width());
 +
}
 +
$("#menuContainer td").stop(true, false).animate({backgroundColor: '#383838'}, 250);
 +
$("#menuContainer table").stop(true, false).animate({backgroundColor: '#383838'}, 250);
 +
$("#menuContainer li").css({backgroundColor: '#383838'});
 +
s.stickyElement.parent().addClass(s.className);
 +
s.currentTop = newTop;
 +
}
 +
}
 +
}
 +
},
 +
resizer = function() {
 +
windowHeight = $window.height();
 +
$("#menuContainer td:has(ul)").children("ul").each(function(){
 +
var padding = parseInt($(this).parent().css("padding-left")) + parseInt($(this).parent().css("padding-right"));
 +
var newWidth = parseInt($(this).parent().css("width")) + padding;
 +
$(this).css("width", newWidth + 'px');
 +
});
 +
    },
 +
    methods = {
 +
init: function(options) {
 +
var o = $.extend(defaults, options);
 +
return this.each(function() {
 +
var stickyElement = $(this);
 +
 
 +
stickyId = stickyElement.attr('id');
 +
wrapper = $('<div></div>').attr('id', stickyId + '-sticky-wrapper').addClass(o.wrapperClassName);
 +
stickyElement.wrapAll(wrapper);
 +
 
 +
if (o.center) {
 +
stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
 +
}
 +
 
 +
if (stickyElement.css("float") == "right") {
 +
stickyElement.css({"float":"none"}).parent().css({"float":"right"});
 +
}
 +
 
 +
var stickyWrapper = stickyElement.parent();
 +
stickyWrapper.css('height', stickyElement.outerHeight());
 +
sticked.push({
 +
topSpacing: o.topSpacing,
 +
bottomSpacing: o.bottomSpacing,
 +
stickyElement: stickyElement,
 +
currentTop: null,
 +
stickyWrapper: stickyWrapper,
 +
className: o.className,
 +
getWidthFrom: o.getWidthFrom
 +
});
 +
});
 +
},
 +
update: scroller
 +
};
 +
 
 +
if (window.addEventListener) {
 +
window.addEventListener('scroll', scroller, false);
 +
window.addEventListener('resize', resizer, false);
 +
} else if (window.attachEvent) {
 +
window.attachEvent('onscroll', scroller);
 +
window.attachEvent('onresize', resizer);
 +
}
 +
 
 +
$.fn.sticky = function(method) {
 +
return methods.init.apply( this, arguments );
 +
};
 +
$(function() {
 +
setTimeout(scroller, 0);
 +
});
 +
})(jQuery);
 +
 
 +
$("#menuContainer li, #menuContainer td").hover(
 
function(){
 
function(){
 
$(this).children().stop(true, false).animate({color: '#eac638'}, 250);
 
$(this).children().stop(true, false).animate({color: '#eac638'}, 250);
Line 18: Line 132:
 
);
 
);
  
−
$("#menuContainer > ul > li:has(ul)").hover(
+
$("#menuContainer td:has(ul)").hover(
 
function(){
 
function(){
 
$(this).children("ul").stop().slideDown(200);
 
$(this).children("ul").stop().slideDown(200);
Line 27: Line 141:
 
);
 
);
  
−
$("#menuContainer > ul > li:has(ul)").children("ul").each(function(){
+
$("#menuContainer td:has(ul)").children("ul").each(function(){
−
var newWidth = parseInt($(this).parent().css("width")) + parseInt($(this).parent().css("padding-left")) + parseInt($(this).parent().css("padding-right"));
+
var padding = parseInt($(this).parent().css("padding-left")) + parseInt($(this).parent().css("padding-right"));
−
if (newWidth > parseInt($(this).css("width"))){
+
var newWidth = parseInt($(this).parent().css("width")) + padding;
−
$(this).css("width", newWidth + 'px');
+
$(this).css("width", newWidth + 'px');
−
}
+
−
});
+
−
 
+
−
$(window).scroll(function(){
+
−
var menuOffset = $("#menuContainer").offset().top;
+
−
if($(window).scrollTop() > menuOffset){
+
−
$("menuContainer").removeClass("floatyMenu").addClass("staticMenu");
+
−
}
+
−
if($(window).scrollTop() < menuOffset){
+
−
$("menuContainer").removeClass("staticMenu").addClass("floatyMenu");
+
−
}
+
−
});
+
−
 
+
−
$("#top-section").fadeTo("fast", 0.2);
+
−
 
+
−
$("#top-section").mouseenter(function(e){
+
−
$("#top-section").fadeTo("fast", 1);
+
−
});
+
−
 
+
−
$("#top-section").mouseleave(function(){
+
−
$("#top-section").fadeTo("fast", 0.2);
+
 
});
 
});
  
 +
$("#menuContainer").sticky({topSpacing:16});
 
});
 
});
 
</script>
 
</script>
 
</head>
 
</head>
 
<style type="text/css">
 
<style type="text/css">
 +
 +
* {
 +
margin: 0;
 +
padding: 0;
 +
}
  
 
body {
 
body {
 
background-color: #ffeca0;
 
background-color: #ffeca0;
 
}
 
}
 +
  
 
#content {
 
#content {
Line 67: Line 167:
 
margin-right: 0px;
 
margin-right: 0px;
 
width: 100%;
 
width: 100%;
 +
top: -26px;
 
}
 
}
  
Line 73: Line 174:
 
width: 100%;
 
width: 100%;
 
height 200px;
 
height 200px;
−
background-color: #E8E8E9;
+
font-family: 'Nunito', sans-serif;​
 +
font-size: 14px;
 
}
 
}
  
 
#contentContainer {
 
#contentContainer {
−
width: 70%;
+
background-color: #FFECA0;
−
background-color: #dddddd;
+
 
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
font-family: "Trebuchet MS", Helvetica, sans-serif;
−
margin-left:15%;
+
padding-left: 15%;
 +
padding-right: 15%;
 
}
 
}
  
 
#bannerContainer {
 
#bannerContainer {
−
height:200px;
+
width: 100%;
−
margin:auto;
+
padding-bottom: 20.3%;
 +
position: relative;
 
text-align:center;
 
text-align:center;
 
color: #24B694;
 
color: #24B694;
 +
}
 +
 +
#banner {
 +
background: url("https://static.igem.org/mediawiki/2015/7/75/Pittbanner.png");
 +
background-size: 100%;
 +
background-repeat: no-repeat;
 +
position: absolute;
 +
top: 0;
 +
bottom: 0;
 +
left: 0;
 +
right: 0;
 
}
 
}
  
Line 100: Line 214:
 
font-weight: bold;
 
font-weight: bold;
 
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
font-family: "Trebuchet MS", Helvetica, sans-serif;
−
margin-top:10px;
 
 
}
 
}
  
 
#contentContainer a {  
 
#contentContainer a {  
 
font-weight: bold;
 
font-weight: bold;
−
color: #23b593;
+
color: #00043D;
 +
text-decoration:underline;
 
}
 
}
  
 
#contentContainer a:hover {  
 
#contentContainer a:hover {  
−
color: #59bf92;
+
color: #59bf92;
 
}
 
}
  
Line 117: Line 231:
 
font-weight: bold;
 
font-weight: bold;
 
line-height: 40px;
 
line-height: 40px;
 +
cursor: pointer;
 
}
 
}
  
 
#menuContainer ul {
 
#menuContainer ul {
−
background-color: #172368;
+
background-color: #000000;
 
color: #ffffff;
 
color: #ffffff;
 
list-style:none;
 
list-style:none;
 
cursor: pointer;
 
cursor: pointer;
 +
display: inline-flex;
 
margin:0;
 
margin:0;
 
}
 
}
  
−
#menuContainer > ul > li {
+
#menuContainer td {
−
display:inline-block;
+
 
position: relative;
 
position: relative;
 
text-align: center;
 
text-align: center;
 +
background-color: #000000;
 +
color: #ffffff;
 +
margin: 0px;
 +
white-space: nowrap;
 +
width:12.5%;
 
}
 
}
  
−
#menuContainer > ul > li > ul {
+
#menuContainer table {
 +
background-color: #000000;
 +
width: 100%;
 +
}
 +
 
 +
#menuContainer ul {
 
position:absolute;
 
position:absolute;
 
left:0;
 
left:0;
Line 139: Line 264:
 
list-style: none;
 
list-style: none;
 
display: none;
 
display: none;
 +
opacity: 0.8;
 +
}
 +
 +
#bannerCanvas {
 +
position: fixed;
 +
width: 100%;
 +
z-index:-1;
 +
height: 100%;
 +
left: 0;
 +
top: 0;
 +
}
 +
 +
#menuContainer {
 +
z-index: 10;
 
}
 
}
  
 
#menuContainer li {
 
#menuContainer li {
−
background-color: #172368;
+
background-color: #000000;
 
color: #ffffff;
 
color: #ffffff;
 
margin: 0px;
 
margin: 0px;
−
padding: 0px 50px;
 
 
white-space: nowrap;
 
white-space: nowrap;
 
}
 
}
Line 162: Line 300:
 
padding: 15px;
 
padding: 15px;
 
padding-top: 5px;
 
padding-top: 5px;
−
}
 
−
 
−
.floatyMenu {
 
−
position: static;
 
−
}
 
−
 
−
.staticMenu {
 
−
position: fixed;
 
−
left: 0;
 
−
top: 0;
 
 
}
 
}
  
Line 177: Line 305:
  
 
<div id="bannerContainer">
 
<div id="bannerContainer">
−
<br><br>
+
<div id="banner"></div>
−
<h2> Add a banner to your wiki! </h2>
+
−
+
−
<p>You can make the image 980px  by  200px</p>
+
−
<p> Remember to call the file: "<i>Team_Pitt_banner.jpg</i>" </p>
+
 
</div>
 
</div>
  
 
<div id="menuContainer" class="floatyMenu">
 
<div id="menuContainer" class="floatyMenu">
−
<ul>
+
<table><tr>
−
<li>
+
<td>
−
<a href="https://2015.igem.org/Team:Pitt">HOME</a>
+
<a href="https://2015.igem.org/Team:Pitt">Home</a>
−
</li>
+
</td>
 
 
−
<li>
+
<td>
−
<a href="#">Project</a>
+
<a href="https://2015.igem.org/Team:Pitt/Description">Project</a>
  
 
<ul>
 
<ul>
 
<li>
 
<li>
−
<a href="https://2015.igem.org/Team:Pitt/Project">assdf</a>
+
<a href="https://2015.igem.org/Team:Pitt/Description">Overview</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:Pitt/Estrogen/Project">Estrogen Sensor</a>
 
</li>
 
</li>
 
<li>
 
<li>
−
<a>assdf</a>
+
<a href="https://2015.igem.org/Team:Pitt/Protease/Project">Protease Sensor</a>
 
</li>
 
</li>
−
</ul>
 
−
</li>
 
−
 
−
<li>
 
−
<a href="#">Notebook</a>
 
−
 
−
<ul>
 
 
<li>
 
<li>
−
<a href="https://2015.igem.org/Team:Pitt/Project">assdf</a>
+
<a href="https://2015.igem.org/Team:Pitt/3-hybrid/Project">Three-Hybrid Versatile Sensor</a>
 
</li>
 
</li>
 
<li>
 
<li>
−
<a>assdf</a>
+
<a href="https://2015.igem.org/Team:Pitt/Amplification/Project">Amplification and Quenching</a>
 
</li>
 
</li>
 +
 
</ul>
 
</ul>
−
</li>
+
</td>
  
−
<li>
+
<td>
−
<a href="#">Team</a>
+
<a href="https://2015.igem.org/Team:Pitt/Notebook">Notebook</a>
  
 
<ul>
 
<ul>
 
<li>
 
<li>
−
<a href="https://2015.igem.org/Team:Pitt/Project">assdf</a>
+
<a href="https://2015.igem.org/Team:Pitt/Protocols">Sensor Extract Protocol</a>
 
</li>
 
</li>
 
<li>
 
<li>
−
<a>assdf</a>
+
<a href="https://2015.igem.org/Team:Pitt/Notebook">Daily Notebook</a>
 
</li>
 
</li>
 
</ul>
 
</ul>
−
</li>
+
</td>
  
−
<li>
+
<td>
−
<a href="#">Achievements</a>
+
<a href="https://2015.igem.org/Team:Pitt/Parts">Parts</a>
  
−
<ul>
+
</td>
−
<li>
+
<td>
−
<a href="https://2015.igem.org/Team:Pitt/Project">assdf</a>
+
<a href="https://2015.igem.org/Team:Pitt/Practices">Human Practices</a>
−
</li>
+
</td>
−
<li>
+
−
<a>assdf</a>
+
−
</li>
+
−
</ul>
+
−
</li>
+
  
−
<li>
+
<td>
−
<a href="#">Other</a>
+
<a href="https://2015.igem.org/Team:Pitt/Team">Team</a>
−
 
+
<ul>
−
<ul>
+
 
<li>
 
<li>
−
<a href="https://2015.igem.org/Team:Pitt/Project">asasdfas dfsdf</a>
+
<a href="https://2015.igem.org/Team:Pitt/Team">Meet us!</a>
 
</li>
 
</li>
 
<li>
 
<li>
−
<a>assdf</a>
+
<a href="https://2015.igem.org/Team:Pitt/Attributions">Attributions</a>
 
</li>
 
</li>
−
</ul>
 
−
</li>
 
  
−
<li>
 
−
<a href="#">Twitter</a>
 
−
 
−
<ul>
 
−
<li>
 
−
<a href="https://2015.igem.org/Team:Pitt/Project">assdf</a>
 
−
</li>
 
−
<li>
 
−
<a>assdf</a>
 
−
</li>
 
 
</ul>
 
</ul>
−
</li>
+
</td>
  
−
<li>
+
<td>
−
<a href="#">iGEM Home</a>
+
<a href="https://2015.igem.org/Team:Pitt/Sponsors">Sponsors</a>
 +
</td>
  
−
<ul>
+
<td>
−
<li>
+
<a href="https://igem.org/Main_Page">2015 iGEM Home</a>
−
<a href="https://2015.igem.org/Team:Pitt/Project">assdf</a>
+
</td>
−
</li>
+
</tr></table>
−
<li>
+
−
<a>assdf</a>
+
−
</li>
+
−
</ul>
+
−
</li>
+
−
</ul>
+
 
 
 
</div>
 
</div>
−
 
 
<div id="contentContainer"><!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
 
<div id="contentContainer"><!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
−
 
 
</html>
 
</html>

Latest revision as of 03:15, 19 September 2015