Difference between revisions of "Template:Pitt"

m
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);
+
$("#top_menu_14").removeClass("opaque");
−
    $("#menuContainer li").css({backgroundColor: '#000000'});
+
$("#top_menu_14").not(".mouseOver").stop().fadeTo(250, 0.2);
−
    $("#top_menu_14").removeClass("opaque");
+
s.currentTop = null;
−
    $("#top_menu_14").not(".mouseOver").stop().fadeTo(250, 0.2);
+
}
−
            s.currentTop = null;
+
} else {
−
          }
+
var newTop = documentHeight - s.stickyElement.outerHeight() - s.topSpacing - s.bottomSpacing - scrollTop - extra;
−
        }
+
if (newTop < 0) {
−
        else {
+
newTop = newTop + s.topSpacing;
−
          var newTop = documentHeight - s.stickyElement.outerHeight()
+
} else {
−
            - s.topSpacing - s.bottomSpacing - scrollTop - extra;
+
newTop = s.topSpacing;
−
          if (newTop < 0) {
+
}
−
            newTop = newTop + s.topSpacing;
+
if (s.currentTop != newTop) {
−
          } else {
+
s.stickyElement.css('position', 'fixed').css('top', newTop);
−
            newTop = s.topSpacing;
+
if (typeof s.getWidthFrom !== 'undefined') {
−
          }
+
s.stickyElement.css('width', $(s.getWidthFrom).width());
−
          if (s.currentTop != newTop) {
+
}
−
            s.stickyElement
+
$("#menuContainer td").stop(true, false).animate({backgroundColor: '#00043d'}, 250);
−
              .css('position', 'fixed')
+
$("#menuContainer table").stop(true, false).animate({backgroundColor: '#00043d'}, 250);
−
              .css('top', newTop);
+
$("#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);
  
−
            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 252: Line 242:
 
</div>\
 
</div>\
 
");
 
");
−
 
−
 
−
$("#bannerContainer").mousemove(function(event){
 
  
 
var c = document.getElementById("bannerCanvas");
 
var c = document.getElementById("bannerCanvas");
−
c.height = $(window).height();
+
c.height = $(document).height() / 10;
−
c.width = $(window).width();
+
c.width = $(document).width() / 10;
−
var ctx = c.getContext("2d");
+
var ctx = c.getContext('2d');
  
−
// Create gradient
+
ctx.fillRect(0, 0, c.width, c.height);
−
var radius = 50;
+
−
radius = radius * 0.90;
+
−
var grd = ctx.createRadialGradient(event.clientX - document.body.scrollLeft,event.clientY - document.body.scrollTop,0,event.clientX - document.body.scrollLeft,event.clientY - document.body.scrollTop,radius);
+
−
grd.addColorStop(0,"yellow");
+
−
grd.addColorStop(1,"black");
+
  
−
// Fill with gradient
+
$("#bannerContainer").mousemove(function(event){
−
ctx.fillStyle = grd;
+
var c = document.getElementById("bannerCanvas");
 +
var ctx = c.getContext('2d');
 +
var iD= ctx.getImageData(0, 0, c.width, c.height);
 +
var data = iD.data;
 +
var x, y, color;
  
−
ctx.arc(event.clientX - document.body.scrollLeft,event.clientY - document.body.scrollTop, radius, 0 , 2*Math.PI);
+
for(y = 0; y < c.height; y++) {
−
ctx.fill();
+
for(x = 0; x < c.width; x++) {
 +
color = 50 / c.width * Math.max(0, 2 * c.width - (10 * x - event.pageX) * (10 * x - event.pageX) - (10 * y - event.pageY) * (10 * y - event.pageY)) - 10;
 +
data[((c.width * y) + x) * 4] += color;
 +
data[((c.width * y) + x) * 4 + 1] += color;
 +
data[((c.width * y) + x) * 4 + 2] += color;
 +
}
 +
}
 +
ctx.putImageData(iD, 0, 0);
  
 
});
 
});
Line 282: Line 275:
  
 
* {  
 
* {  
−
margin: 0;  
+
margin: 0;  
−
padding: 0;  
+
padding: 0;  
 
}
 
}
  
Line 370: Line 363:
  
 
#banner {
 
#banner {
−
background: url("https://static.igem.org/mediawiki/2015/7/75/Pittbanner.png");
+
aaaaabackground: url("https://static.igem.org/mediawiki/2015/7/75/Pittbanner.png");
 
background-size: 100%;
 
background-size: 100%;
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
Line 420: Line 413:
 
position: relative;
 
position: relative;
 
text-align: center;
 
text-align: center;
−
background-color: #000000;
+
background-color: #000000;
 
color: #ffffff;
 
color: #ffffff;
 
margin: 0px;
 
margin: 0px;
Line 427: Line 420:
  
 
#menuContainer table {
 
#menuContainer table {
−
background-color: #000000;
+
background-color: #000000;
−
width: 100%;
+
width: 100%;
 
}
 
}
  
Line 441: Line 434:
  
 
#bannerCanvas {
 
#bannerCanvas {
−
  position: fixed;
+
position: absolute;
−
  width: 100%;
+
width: 100%;
−
z-index:-1;
+
z-index:-1;
−
height: 100%;
+
height: 100%;
−
left: 0;
+
left: 0;
−
top: 0;
+
top: 0;
 
}
 
}
  

Revision as of 23:54, 4 June 2015