Difference between revisions of "Template:Pitt"

 
(47 intermediate revisions by the same user not shown)
Line 12: Line 12:
  
 
(function($) {
 
(function($) {
−
  var defaults = {
+
var defaults = {
−
      topSpacing: 0,
+
topSpacing: 0,
−
      bottomSpacing: 0,
+
bottomSpacing: 0,
−
      className: 'is-sticky',
+
className: 'is-sticky',
−
      wrapperClassName: 'sticky-wrapper',
+
wrapperClassName: 'sticky-wrapper',
−
      center: false,
+
center: false,
−
      getWidthFrom: ''
+
getWidthFrom: ''
−
    },
+
},
−
    $window = $(window),
+
$window = $(window),
−
    $document = $(document),
+
$document = $(document),
−
    sticked = [],
+
sticked = [],
−
    windowHeight = $window.height(),
+
windowHeight = $window.height(),
−
    scroller = function() {
+
scroller = function() {
−
      var scrollTop = $window.scrollTop(),
+
var scrollTop = $window.scrollTop(),
−
        documentHeight = $document.height(),
+
documentHeight = $document.height(),
−
        dwh = documentHeight - windowHeight,
+
dwh = documentHeight - windowHeight,
−
        extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
+
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
  
−
      for (var i = 0; i < sticked.length; i++) {
+
for (var i = 0; i < sticked.length; i++) {
−
        var s = sticked[i],
+
var s = sticked[i],
−
          elementTop = s.stickyWrapper.offset().top,
+
elementTop = s.stickyWrapper.offset().top,
−
          etse = elementTop - s.topSpacing - extra;
+
etse = elementTop - s.topSpacing - extra;
  
−
        if (scrollTop <= etse) {
+
if (scrollTop <= etse) {
−
          if (s.currentTop !== null) {
+
if (s.currentTop !== null) {
−
            s.stickyElement
+
s.stickyElement.css('position', '').css('top', '');
−
              .css('position', '')
+
s.stickyElement.parent().removeClass(s.className);
−
              .css('top', '');
+
$("#menuContainer td").stop(true, false).animate({backgroundColor: '#000000'}, 250);
−
            s.stickyElement.parent().removeClass(s.className);
+
$("#menuContainer table").stop(true, false).animate({backgroundColor: '#000000'}, 250);
−
    $("#menuContainer td").stop(true, false).animate({backgroundColor: '#000000'}, 250);
+
$("#menuContainer li").css({backgroundColor: '#000000'});
−
    $("#menuContainer table").stop(true, false).animate({backgroundColor: '#000000'}, 250);
+
s.currentTop = null;
−
    $("#menuContainer li").css({backgroundColor: '#000000'});
+
}
−
    $("#top_menu_14").removeClass("opaque");
+
} else {
−
    $("#top_menu_14").not(".mouseOver").stop().fadeTo(250, 0.2);
+
var newTop = documentHeight - s.stickyElement.outerHeight() - s.topSpacing - s.bottomSpacing - scrollTop - extra;
−
            s.currentTop = null;
+
if (newTop < 0) {
−
          }
+
newTop = newTop + s.topSpacing;
−
        }
+
} else {
−
        else {
+
newTop = s.topSpacing;
−
          var newTop = documentHeight - s.stickyElement.outerHeight()
+
}
−
            - s.topSpacing - s.bottomSpacing - scrollTop - extra;
+
if (s.currentTop != newTop) {
−
          if (newTop < 0) {
+
s.stickyElement.css('position', 'fixed').css('top', newTop);
−
            newTop = newTop + s.topSpacing;
+
if (typeof s.getWidthFrom !== 'undefined') {
−
          } else {
+
s.stickyElement.css('width', $(s.getWidthFrom).width());
−
            newTop = s.topSpacing;
+
}
−
          }
+
$("#menuContainer td").stop(true, false).animate({backgroundColor: '#383838'}, 250);
−
          if (s.currentTop != newTop) {
+
$("#menuContainer table").stop(true, false).animate({backgroundColor: '#383838'}, 250);
−
            s.stickyElement
+
$("#menuContainer li").css({backgroundColor: '#383838'});
−
              .css('position', 'fixed')
+
s.stickyElement.parent().addClass(s.className);
−
              .css('top', newTop);
+
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);
  
−
            if (typeof s.getWidthFrom !== 'undefined') {
+
stickyId = stickyElement.attr('id');
−
              s.stickyElement.css('width', $(s.getWidthFrom).width());
+
wrapper = $('<div></div>').attr('id', stickyId + '-sticky-wrapper').addClass(o.wrapperClassName);
−
            }
+
stickyElement.wrapAll(wrapper);
−
            $("#menuContainer td").stop(true, false).animate({backgroundColor: '#00043d'}, 250);
+
−
    $("#menuContainer table").stop(true, false).animate({backgroundColor: '#00043d'}, 250);
+
−
    $("#menuContainer li").css({backgroundColor: '#00043d'});
+
−
            s.stickyElement.parent().addClass(s.className);
+
−
    $("#top_menu_14").addClass("opaque");
+
−
    $("#top_menu_14").stop().fadeTo(250, 1);
+
−
            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');
+
if (o.center) {
−
          wrapper = $('<div></div>')
+
stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
−
            .attr('id', stickyId + '-sticky-wrapper')
+
}
−
            .addClass(o.wrapperClassName);
+
−
          stickyElement.wrapAll(wrapper);
+
  
−
          if (o.center) {
+
if (stickyElement.css("float") == "right") {
−
            stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
+
stickyElement.css({"float":"none"}).parent().css({"float":"right"});
−
          }
+
}
  
−
          if (stickyElement.css("float") == "right") {
+
var stickyWrapper = stickyElement.parent();
−
            stickyElement.css({"float":"none"}).parent().css({"float":"right"});
+
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
 +
};
  
−
          var stickyWrapper = stickyElement.parent();
+
if (window.addEventListener) {
−
          stickyWrapper.css('height', stickyElement.outerHeight());
+
window.addEventListener('scroll', scroller, false);
−
          sticked.push({
+
window.addEventListener('resize', resizer, false);
−
            topSpacing: o.topSpacing,
+
} else if (window.attachEvent) {
−
            bottomSpacing: o.bottomSpacing,
+
window.attachEvent('onscroll', scroller);
−
            stickyElement: stickyElement,
+
window.attachEvent('onresize', resizer);
−
            currentTop: null,
+
}
−
            stickyWrapper: stickyWrapper,
+
−
            className: o.className,
+
−
            getWidthFrom: o.getWidthFrom
+
−
          });
+
−
        });
+
−
      },
+
−
      update: scroller
+
−
    };
+
−
 
+
−
  // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
+
−
  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) {
+
$.fn.sticky = function(method) {
−
      return methods.init.apply( this, arguments );
+
return methods.init.apply( this, arguments );
−
  };
+
};
−
  $(function() {
+
$(function() {
−
    setTimeout(scroller, 0);
+
setTimeout(scroller, 0);
−
  });
+
});
 
})(jQuery);
 
})(jQuery);
  
Line 158: Line 144:
 
var padding = 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"));
 
var newWidth = parseInt($(this).parent().css("width")) + padding;
 
var newWidth = parseInt($(this).parent().css("width")) + padding;
−
if (newWidth > parseInt($(this).css("width"))){
+
$(this).css("width", newWidth + 'px');
−
$(this).css("width", newWidth + 'px');
+
−
} else {
+
−
$(this).parent().css("width", (parseInt($(this).css("width")) - padding) +'px');
+
−
}
+
 
});
 
});
  
 
$("#menuContainer").sticky({topSpacing:16});
 
$("#menuContainer").sticky({topSpacing:16});
−
 
−
$("#top_menu_14").mouseenter(function(e){
 
−
$(this).addClass("mouseOver");
 
−
$(this).not(".opaque").stop().fadeTo(500, 1);
 
−
});
 
−
 
−
$("#top_menu_14").mouseleave(function(){
 
−
$(this).removeClass("mouseOver");
 
−
$(this).not(".opaque").stop().fadeTo(500, 0.2);
 
−
});
 
−
 
−
$("#contentContainer").after("\
 
−
<div id='bottomContainer'>\
 
−
<table><tr>\
 
−
<td>\
 
−
<a href='https://2015.igem.org/Team:Pitt'>Home</a>\
 
−
</td>\
 
−
\
 
−
<td>\
 
−
<a href='#'>Project</a>\
 
−
\
 
−
<ul>\
 
−
<li>\
 
−
<a href='https://2015.igem.org/Team:Pitt/Project'>Description</a>\
 
−
</li>\
 
−
<li>\
 
−
<a href='https://2015.igem.org/Team:Pitt/Experiments'>Experiments and Protocols</a>\
 
−
</li>\
 
−
</ul>\
 
−
</td>\
 
−
\
 
−
<td>\
 
−
<a href='https://2015.igem.org/Team:Pitt/Notebook'>Notebooks</a>\
 
−
<td>\
 
−
<a href='#'>Team</a>\
 
−
\
 
−
<ul>\
 
−
<li>\
 
−
<a href='https://2015.igem.org/Team:Pitt/Members'>Members</a>\
 
−
</li>\
 
−
<li>\
 
−
<a href='https://2015.igem.org/Team:Pitt/Collaborators'>Collaborators</a>\
 
−
</li>\
 
−
<li>\
 
−
<a href=''https://2015.igem.org/Team:Pitt/Sponsors'>Sponsors</a>\
 
−
</li>\
 
−
</ul>\
 
−
</td>\
 
−
\
 
−
<td>\
 
−
<a href='#'>Achievements</a>\
 
−
\
 
−
<ul>\
 
−
<li>\
 
−
<a href='https://2015.igem.org/Team:Pitt/Parts'>Parts</a>\
 
−
</li>\
 
−
<li>\
 
−
<a href='https://2015.igem.org/Team:Pitt/Awards'>Awards</a>\
 
−
</li>\
 
−
</ul>\
 
−
</td>\
 
−
\
 
−
<td>\
 
−
<a href='#'>Other</a>\
 
−
\
 
−
<ul>\
 
−
<li>\
 
−
<a href='https://2015.igem.org/Team:Pitt/wtf'>Human Food</a>\
 
−
</li>\
 
−
<li>\
 
−
<a href=''https://2015.igem.org/Team:Pitt/Safety'>Safety</a>\
 
−
</li>\
 
−
<li>\
 
−
<a href=''https://2015.igem.org/Team:Pitt/Contact'>Contact Us</a>\
 
−
</li>\
 
−
</ul>\
 
−
</td>\
 
−
\
 
−
<td>\
 
−
<a href='#'>Useful Links</a>\
 
−
\
 
−
<ul>\
 
−
<li>\
 
−
<a href='https://2015.igem.org/'>iGEM Home</a>\
 
−
</li>\
 
−
</ul>\
 
−
</td>\
 
−
</tr></table\
 
−
</div>\
 
−
");
 
−
 
 
});
 
});
 
</script>
 
</script>
Line 263: Line 154:
  
 
* {  
 
* {  
−
margin: 0;  
+
margin: 0;  
−
padding: 0;  
+
padding: 0;  
 
}
 
}
  
Line 271: Line 162:
 
}
 
}
  
−
#bottomContainer {
 
−
background-color: #00043d;
 
−
width: 100%;
 
−
color: #ffffff;
 
−
font-family: 'Nunito', sans-serif;​
 
−
font-size: 14px;
 
−
}
 
−
 
−
#bottomContainer a {
 
−
text-decoration:none;
 
−
font-weight: bold;
 
−
line-height: 40px;
 
−
}
 
−
 
−
#bottomContainer tr {
 
−
vertical-align: top;
 
−
}
 
−
 
−
#bottomContainer td > a {
 
−
font-size: 16px;
 
−
margin-bottom: 10px;
 
−
color: #ffffff;
 
−
}
 
−
 
−
#bottomContainer table {
 
−
background-color: #00043d;
 
−
width: 100%;
 
−
text-align: center;
 
−
}
 
−
 
−
#bottomContainer ul {
 
−
background-color: #00043d;
 
−
list-style:none;
 
−
cursor: pointer;
 
−
margin:0;
 
−
}
 
−
 
−
#bottomContainer ul a {
 
−
color: #ffeca0;
 
−
}
 
−
 
−
#top_menu_14 {
 
−
border: none;
 
−
opacity: .2;
 
−
}
 
−
 
−
#top_menu_under {
 
−
border:none;
 
−
}
 
  
 
#content {
 
#content {
Line 325: Line 167:
 
margin-right: 0px;
 
margin-right: 0px;
 
width: 100%;
 
width: 100%;
 +
top: -26px;
 
}
 
}
  
Line 336: Line 179:
  
 
#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%;
 
}
 
}
  
Line 375: Line 218:
 
#contentContainer a {  
 
#contentContainer a {  
 
font-weight: bold;
 
font-weight: bold;
−
color: #23b593;
+
color: #00043D;
 +
text-decoration:underline;
 
}
 
}
  
Line 387: Line 231:
 
font-weight: bold;
 
font-weight: bold;
 
line-height: 40px;
 
line-height: 40px;
 +
cursor: pointer;
 
}
 
}
  
Line 401: Line 246:
 
position: relative;
 
position: relative;
 
text-align: center;
 
text-align: center;
−
background-color: #000000;
+
background-color: #000000;
 
color: #ffffff;
 
color: #ffffff;
 
margin: 0px;
 
margin: 0px;
 
white-space: nowrap;
 
white-space: nowrap;
 +
width:12.5%;
 
}
 
}
  
 
#menuContainer table {
 
#menuContainer table {
−
background-color: #000000;
+
background-color: #000000;
−
width: 100%;
+
width: 100%;
 
}
 
}
  
Line 419: Line 265:
 
display: none;
 
display: none;
 
opacity: 0.8;
 
opacity: 0.8;
 +
}
 +
 +
#bannerCanvas {
 +
position: fixed;
 +
width: 100%;
 +
z-index:-1;
 +
height: 100%;
 +
left: 0;
 +
top: 0;
 +
}
 +
 +
#menuContainer {
 +
z-index: 10;
 
}
 
}
  
Line 456: Line 315:
 
 
 
<td>
 
<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>
 
−
</td>
 
−
 
−
<td>
 
−
<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>
 
</td>
 
</td>
  
 
<td>
 
<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>
Line 495: Line 351:
  
 
<td>
 
<td>
−
<a href="#">Achievements</a>
+
<a href="https://2015.igem.org/Team:Pitt/Parts">Parts</a>
  
−
<ul>
 
−
<li>
 
−
<a href="https://2015.igem.org/Team:Pitt/Project">assdf</a>
 
−
</li>
 
−
<li>
 
−
<a>assdf</a>
 
−
</li>
 
−
</ul>
 
 
</td>
 
</td>
 +
<td>
 +
<a href="https://2015.igem.org/Team:Pitt/Practices">Human Practices</a>
 +
</td>
  
 
<td>
 
<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>
 
</ul>
 
</td>
 
</td>
  
 
<td>
 
<td>
−
<a href="#">Twitter</a>
+
<a href="https://2015.igem.org/Team:Pitt/Sponsors">Sponsors</a>
−
 
+
−
<ul>
+
−
<li>
+
−
<a href="https://2015.igem.org/Team:Pitt/Project">assdf</a>
+
−
</li>
+
−
<li>
+
−
<a>assdf</a>
+
−
</li>
+
−
</ul>
+
 
</td>
 
</td>
  
 
<td>
 
<td>
−
<a href="#">iGEM Home</a>
+
<a href="https://igem.org/Main_Page">2015 iGEM Home</a>
−
 
+
−
<ul>
+
−
<li>
+
−
<a href="https://2015.igem.org/Team:Pitt/Project">assdf</a>
+
−
</li>
+
−
<li>
+
−
<a>assdf</a>
+
−
</li>
+
−
</ul>
+
 
</td>
 
</td>
 
</tr></table>
 
</tr></table>
 
 
 
</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