Difference between revisions of "Template:Pitt"

 
(72 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
<!-- Declare that you are going to use html code instead of wiki code -->
 
<!-- Declare that you are going to use html code instead of wiki code -->
 
<html>
 
<html>
 +
<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>
  
−
<!-- Start of CSS-->
+
<script>
−
<style type="text/css">
+
  
−
/* PAGE LAYOUT */
+
$(document).ready(function(){
  
−
/* Change Background color*/
+
(function($) {
−
body {
+
var defaults = {
−
                                background: url("https://static.igem.org/mediawiki/2015/7/7a/Bg_page.png") no-repeat center center fixed;
+
topSpacing: 0,
−
                                background-size: 100% 100%;
+
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;
  
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
+
for (var i = 0; i < sticked.length; i++) {
−
#mainContainer { 
+
var s = sticked[i],
−
width: 978px;
+
elementTop = s.stickyWrapper.offset().top,
−
overflow:hidden;
+
etse = elementTop - s.topSpacing - extra;
−
float:left;
+
−
margin-left:20px;
+
−
margin-bottom: 10px;
+
−
background-color: #fff;
+
−
border-bottom: 14px solid #565656;
+
−
border-right: 2px solid #565656;
+
−
border-left: 2px solid #565656;
+
−
border-top: 2px solid #565656;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
}
+
  
−
/* Creates the container for the menu */
+
if (scrollTop <= etse) {
−
#menuContainer  {  
+
if (s.currentTop !== null) {
−
float:left;
+
s.stickyElement.css('position', '').css('top', '');
−
width: 134px;
+
s.stickyElement.parent().removeClass(s.className);
−
padding: 20px 0px;
+
$("#menuContainer td").stop(true, false).animate({backgroundColor: '#000000'}, 250);
−
border-top: 14px solid #565656;
+
$("#menuContainer table").stop(true, false).animate({backgroundColor: '#000000'}, 250);
−
background-color: #E8E8E9;
+
$("#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);
  
−
/* Creates the container for the content */
+
stickyId = stickyElement.attr('id');
−
#contentContainer {
+
wrapper = $('<div></div>').attr('id', stickyId + '-sticky-wrapper').addClass(o.wrapperClassName);
−
padding-top:20px;
+
stickyElement.wrapAll(wrapper);
−
padding-right:10px;
+
−
margin-bottom: 20px;
+
−
width: 814px;
+
−
padding-left: 20px;
+
−
float: left;
+
−
background-color: #fff;
+
−
border-top: 14px solid #565656;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
                                background: url("https://static.igem.org/mediawiki/2015/4/4f/Bg_pitt.png") no-repeat center center fixed;
+
−
}
+
  
−
/*Set up height place holder for the banner*/
+
if (o.center) {
−
#bannerContainer {
+
stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
−
height:200px;
+
}
−
margin:auto;
+
−
text-align:center;
+
−
color: #24B694;
+
−
}
+
  
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
if (stickyElement.css("float") == "right") {
 +
stickyElement.css({"float":"none"}).parent().css({"float":"right"});
 +
}
  
−
/*Change the styling of text for everything inside main container*/
+
var stickyWrapper = stickyElement.parent();
−
#mainContainer p {
+
stickyWrapper.css('height', stickyElement.outerHeight());
−
font-size: 13px;
+
sticked.push({
−
color: #000000;
+
topSpacing: o.topSpacing,
−
}
+
bottomSpacing: o.bottomSpacing,
−
+
stickyElement: stickyElement,
−
/*This changes the color and font family */
+
currentTop: null,
−
#contentContainer h1, h2, h3, h4, h5, h6 {
+
stickyWrapper: stickyWrapper,
−
color: #565656;
+
className: o.className,
−
border-bottom: none;
+
getWidthFrom: o.getWidthFrom
−
font-weight: bold;
+
});
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
});
−
margin-top:10px;
+
},
−
}
+
update: scroller
 +
};
  
−
/*Style of the links - links are different inside the menu */
+
if (window.addEventListener) {
−
#contentContainer a {  
+
window.addEventListener('scroll', scroller, false);
−
font-weight: bold;
+
window.addEventListener('resize', resizer, false);
−
color: #23b593;
+
} else if (window.attachEvent) {
−
}
+
window.attachEvent('onscroll', scroller);
 +
window.attachEvent('onresize', resizer);
 +
}
  
−
  /* Styling links on hover- links are different inside the menu */
+
$.fn.sticky = function(method) {
−
#contentContainer a:hover {  
+
return methods.init.apply( this, arguments );
−
color: #59bf92;
+
};
−
}
+
$(function() {
 +
setTimeout(scroller, 0);
 +
});
 +
})(jQuery);
  
−
/*Change the styling of tables */
+
$("#menuContainer li, #menuContainer td").hover(
−
        #contentContainer table {
+
function(){
−
    border: 1px solid #565656;
+
$(this).children().stop(true, false).animate({color: '#eac638'}, 250);
−
    border-collapse: collapse;
+
},
−
    width: 90%
+
function(){
−
    margin: auto;
+
$(this).children().stop(true, false).animate({color: '#ffffff'}, 250);
−
    margin-bottom: 15px;
+
}
−
    margin-top: 15px;
+
);
−
    margin-right: 10px;
+
−
    margin-left: 10px;
+
−
    }
+
  
−
/*Change the styling of table cells*/
+
$("#menuContainer td:has(ul)").hover(
−
    #contentContainer  td {
+
function(){
−
    padding: 10px;
+
$(this).children("ul").stop().slideDown(200);
−
    border: 1px solid #565656;
+
},
−
    border-collapse: collapse;
+
function(){
−
    vertical-align: text-top;
+
$(this).children("ul").stop().slideUp(200);
−
    }
+
}
 +
);
  
−
/*Change the styling of table headers */
+
$("#menuContainer td:has(ul)").children("ul").each(function(){
−
    #contentContainer th {
+
var padding = parseInt($(this).parent().css("padding-left")) + parseInt($(this).parent().css("padding-right"));
−
    background-color: #E8E8E9;
+
var newWidth = parseInt($(this).parent().css("width")) + padding;
−
    padding: 10px;
+
$(this).css("width", newWidth + 'px');
−
    border: 1px solid #565656;
+
});
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
  
 +
$("#menuContainer").sticky({topSpacing:16});
 +
});
 +
</script>
 +
</head>
 +
<style type="text/css">
  
 +
* {
 +
margin: 0;
 +
padding: 0;
 +
}
  
−
/*MENU STYLING */
+
body {
 +
background-color: #ffeca0;
 +
}
  
−
/*Styling for the links in the menu */
 
−
#menuContainer a {
 
−
color: #565656;
 
−
text-decoration:none;
 
−
font-weight: bold;
 
−
}
 
  
−
/* Sets the style for lists inside menuContainer  */
+
#content {
−
#menuContainer ul {  
+
margin-left: 0px;
−
list-style: none;
+
margin-right: 0px;
−
margin-left:0px;
+
width: 100%;
−
}
+
top: -26px;
 +
}
  
−
/*Styles the list items to become menu buttons */
+
#menuContainer {  
−
#menuContainer ul li {  
+
float:top;
−
text-align: center;
+
width: 100%;
−
display: block;
+
height 200px;
−
width: 100%;
+
font-family: 'Nunito', sans-serif;​
−
height:30px;
+
font-size: 14px;
−
padding-top:10px;
+
}
−
}
+
  
−
/*For the menu buttons, changes the color when hovering*/
+
#contentContainer {
−
#menuContainer li:hover {
+
background-color: #FFECA0;
−
color: #FFF;
+
font-family: "Trebuchet MS", Helvetica, sans-serif;
−
background-color: #24B694;
+
padding-left: 15%;
−
}
+
padding-right: 15%;
 +
}
  
−
/*Submenus are not displayed as default*/
+
#bannerContainer {
−
#menuContainer li ul {
+
width: 100%;
−
display: none;
+
padding-bottom: 20.3%;
−
padding-top:15px;
+
position: relative;
−
margin-left: -19px;
+
text-align:center;
−
}
+
color: #24B694;
 +
}
  
−
/*Submenus are displayed when hovering the menu button */
+
#banner {
−
#menuContainer li:hover ul {
+
background: url("https://static.igem.org/mediawiki/2015/7/75/Pittbanner.png");
−
/*display: inline-block; */
+
background-size: 100%;
−
display: block;  
+
background-repeat: no-repeat;
−
position: absolute;  
+
position: absolute;
−
float:right;
+
top: 0;
−
margin-left: 134px;
+
bottom: 0;
−
margin-top:-42px;
+
left: 0;
−
}
+
right: 0;
 +
}
  
−
/*Style the submenu buttons*/
+
#mainContainer p {  
−
#menuContainer li ul li{
+
font-size: 13px;
−
background-color: #59BF92;  
+
color: #000000;
−
padding-left:20px;
+
}
−
padding-right:20px;
+
−
height:30px;
+
−
padding-top:10px;
+
−
margin-top:-2px;
+
−
color: #565656;
+
−
width: 150px;
+
−
}
+
  
−
/*CLASSES */
+
#contentContainer h1, h2, h3, h4, h5, h6 {
 +
color: #565656;
 +
border-bottom: none;
 +
font-weight: bold;
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
}
  
−
/*Clear class for all the pages, adds spacing too*/
+
#contentContainer a {  
−
.clear{
+
font-weight: bold;
−
clear:both;
+
color: #00043D;
−
height: 10px;
+
text-decoration:underline;
−
}
+
}
  
 +
#contentContainer a:hover {
 +
color: #59bf92;
 +
}
  
−
/* highlight box for special messages */
+
#menuContainer a {
−
    .highlightBox {
+
color: #ffffff;
−
        width:500px;
+
text-decoration:none;
−
        margin:auto;
+
font-weight: bold;
−
        background-color: #E8E8E9;  
+
line-height: 40px;
−
margin-bottom: 15px;
+
cursor: pointer;
−
margin-top: 15px;
+
}
−
padding: 15px;
+
−
padding-top: 5px;
+
−
    }
+
  
 +
#menuContainer ul {
 +
background-color: #000000;
 +
color: #ffffff;
 +
list-style:none;
 +
cursor: pointer;
 +
display: inline-flex;
 +
margin:0;
 +
}
  
−
</style>
+
#menuContainer td {
−
<!-- End of CSS -->
+
position: relative;
 +
text-align: center;
 +
background-color: #000000;
 +
color: #ffffff;
 +
margin: 0px;
 +
white-space: nowrap;
 +
width:12.5%;
 +
}
  
 +
#menuContainer table {
 +
background-color: #000000;
 +
width: 100%;
 +
}
  
−
<!-- Start of the template html elements. -->
+
#menuContainer ul {
−
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
+
position:absolute;
 +
left:0;
 +
top:40px;
 +
list-style: none;
 +
display: none;
 +
opacity: 0.8;
 +
}
  
 +
#bannerCanvas {
 +
position: fixed;
 +
width: 100%;
 +
z-index:-1;
 +
height: 100%;
 +
left: 0;
 +
top: 0;
 +
}
  
−
<div id="bannerContainer">
+
#menuContainer {
−
<br><br>
+
z-index: 10;
−
<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>
+
  
−
<!-- Start of menu -->
+
#menuContainer li {
−
<div id="menuContainer">
+
background-color: #000000;
 +
color: #ffffff;
 +
margin: 0px;
 +
white-space: nowrap;
 +
}
  
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
+
.clear{
−
<ul>
+
clear: both;
−
<a href="https://2015.igem.org/Team:Pitt"><li>HOME</li></a>
+
height: 10px;
 +
}
  
−
<a href="https://2015.igem.org/Team:Pitt/Team"><li>TEAM</li></a>
+
.highlightBox {
 +
width:500px;
 +
margin:auto;
 +
background-color: #E8E8E9;
 +
margin-bottom: 15px;
 +
margin-top: 15px;
 +
padding: 15px;
 +
padding-top: 5px;
 +
}
  
−
<a href="#"><li>PROJECT
+
</style>
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:Pitt/Description"><li>Description</li></a>
+
−
<a href="https://2015.igem.org/Team:Pitt/Experiments"><li>Experiments &amp; Protocols</li></a> 
+
−
<a href="https://2015.igem.org/Team:Pitt/Results"><li>Results</li></a> 
+
−
<a href="https://2015.igem.org/Team:Pitt/Design"><li>Design</li></a>
+
−
</ul>
+
−
</li></a>
+
  
−
<a href="#"><li>PARTS
+
<div id="bannerContainer">
−
            <ul>
+
<div id="banner"></div>
−
<a href="https://2015.igem.org/Team:Pitt/Parts"><li>Team Parts</li></a>
+
</div>
−
<a href="https://2015.igem.org/Team:Pitt/Basic_Part"><li>Basic Parts</li></a> 
+
−
<a href="https://2015.igem.org/Team:Pitt/Composite_Part"><li>Composite Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:Pitt/Part_Collection"><li>Part Collection</li></a> 
+
−
</ul>
+
−
</li></a>
+
  
−
<a href="https://2015.igem.org/Team:Pitt/Notebook"><li>NOTEBOOK</li></a>
+
<div id="menuContainer" class="floatyMenu">
−
     
+
<table><tr>
−
<a href="https://2015.igem.org/Team:Pitt/Attributions"><li>ATTRIBUTIONS</li></a>
+
<td>
 +
<a href="https://2015.igem.org/Team:Pitt">Home</a>
 +
</td>
 +
 +
<td>
 +
<a href="https://2015.igem.org/Team:Pitt/Description">Project</a>
  
−
<a href="https://2015.igem.org/Team:Pitt/Collaborations"><li>COLLABORATIONS</li></a>
+
<ul>
 +
<li>
 +
<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>
 +
<a href="https://2015.igem.org/Team:Pitt/Protease/Project">Protease Sensor</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:Pitt/3-hybrid/Project">Three-Hybrid Versatile Sensor</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:Pitt/Amplification/Project">Amplification and Quenching</a>
 +
</li>
 +
 +
</ul>
 +
</td>
  
−
<a href="https://2015.igem.org/Team:Pitt/Practices"><li>HUMAN PRACTICES</li></a>
+
<td>
 +
<a href="https://2015.igem.org/Team:Pitt/Notebook">Notebook</a>
  
−
<a href="https://2015.igem.org/Team:Pitt/Safety"><li>SAFETY</li></a>
+
<ul>
 +
<li>
 +
<a href="https://2015.igem.org/Team:Pitt/Protocols">Sensor Extract Protocol</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:Pitt/Notebook">Daily Notebook</a>
 +
</li>
 +
</ul>
 +
</td>
  
−
<a href="https://2015.igem.org/Team:Pitt/Modeling"><li>MODELING</li></a>
+
<td>
 +
<a href="https://2015.igem.org/Team:Pitt/Parts">Parts</a>
  
−
<a href="https://2015.igem.org/Team:Pitt/Measurement"><li>MEASUREMENT</li></a>
+
</td>
 +
<td>
 +
<a href="https://2015.igem.org/Team:Pitt/Practices">Human Practices</a>
 +
</td>
  
−
<a href="https://2015.igem.org/Team:Pitt/Software"><li>SOFTWARE</li></a>
+
<td>
 +
<a href="https://2015.igem.org/Team:Pitt/Team">Team</a>
 +
<ul>
 +
<li>
 +
<a href="https://2015.igem.org/Team:Pitt/Team">Meet us!</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:Pitt/Attributions">Attributions</a>
 +
</li>
  
−
<a href="https://2015.igem.org/Team:Pitt/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
</ul>
 +
</td>
  
−
</ul>
+
<td>
−
</div>
+
<a href="https://2015.igem.org/Team:Pitt/Sponsors">Sponsors</a>
−
<!-- End of menu  -->
+
</td>
  
−
<!-- Start of content -->
+
<td>
−
<div id="contentContainer"><!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
+
<a href="https://igem.org/Main_Page">2015 iGEM Home</a>
 +
</td>
 +
</tr></table>
 +
 +
</div>
 +
<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