Template:Team:Calgary/Test

From 2013.igem.org

(Difference between revisions)
 
(46 intermediate revisions not shown)
Line 1: Line 1:
 +
{{Team:Calgary/Main}}
<html>
<html>
-
<head>
 
-
<title>Home</title>
 
-
 
-
<!-- Reset for BodyContent -->
 
-
<style>
 
-
#content{
 
-
width: 100%;
 
-
margin: 0;
 
-
padding: 0;
 
-
background-color:transparent;
 
-
border: none;
 
-
}
 
-
 
-
#bodyContent{
 
-
width: 100%;
 
-
margin: 0;
 
-
padding: 0;
 
-
background-color:transparent;
 
-
border: none;
 
-
}
 
-
</style>
 
-
 
-
<!-- Fonts -->
 
-
<link href='http://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet' type='text/css'>
 
-
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
 
-
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:700' rel='stylesheet' type='text/css'>
 
-
<link href='http://fonts.googleapis.com/css?family=Cabin:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
 
-
 
-
<!-- CSS Stylesheets -->
 
-
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Reset?action=raw&ctype=text/css" rel="stylesheet">
 
-
<link href="https://2013.igem.org/Team:Calgary/TestPageNavCSS?action=raw&ctype=text/css" rel="stylesheet">
 
-
<link href="https://2013.igem.org/Team:Calgary/TestPageCSS?action=raw&ctype=text/css" rel="stylesheet">
 
-
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 
-
<script>
 
-
/*! Superslides - v0.6.1 - 2013-07-09
 
-
* https://github.com/nicinabox/superslides
 
-
* Copyright (c) 2013 Nic Aitch; Licensed MIT */
 
-
(function(window, $) {
 
-
 
-
var Superslides, plugin = 'superslides';
 
-
 
-
Superslides = function(el, options) {
 
-
  this.options = $.extend({
 
-
    play: false,
 
-
    animation_speed: 600,
 
-
    animation_easing: 'swing',
 
-
    animation: 'slide',
 
-
    inherit_width_from: window,
 
-
    inherit_height_from: window,
 
-
    pagination: true,
 
-
    hashchange: false,
 
-
    scrollable: true,
 
-
    elements: {
 
-
      preserve: '.preserve',
 
-
      nav: '.slides-navigation',
 
-
      container: '.slides-container',
 
-
      pagination: '.slides-pagination'
 
-
    }
 
-
  }, options);
 
-
 
-
  var that      = this,
 
-
      $control  = $('<div>', { "class": 'slides-control' }),
 
-
      multiplier = 1;
 
-
 
-
  this.$el        = $(el);
 
-
  this.$container = this.$el.find(this.options.elements.container);
 
-
 
-
  // Private Methods
 
-
  var initialize = function() {
 
-
    multiplier = that._findMultiplier();
 
-
 
-
    that.$el.on('click', that.options.elements.nav + " a", function(e) {
 
-
      e.preventDefault();
 
-
 
-
      that.stop();
 
-
      if ($(this).hasClass('next')) {
 
-
        that.animate('next', function() {
 
-
          that.start();
 
-
        });
 
-
      } else {
 
-
        that.animate('prev', function() {
 
-
          that.start();
 
-
        });
 
-
      }
 
-
    });
 
-
 
-
    $(document).on('keyup', function(e) {
 
-
      if (e.keyCode === 37) {
 
-
        that.animate('prev');
 
-
      }
 
-
      if (e.keyCode === 39) {
 
-
        that.animate('next');
 
-
      }
 
-
    });
 
-
 
-
    $(window).on('resize', function() {
 
-
      setTimeout(function() {
 
-
        var $children = that.$container.children();
 
-
 
-
        that.width  = that._findWidth();
 
-
        that.height = (that._findHeight() - $('#TopBar').height()) * .8;
 
-
 
-
        $children.css({
 
-
          width: that.width,
 
-
          left: that.width
 
-
        });
 
-
 
-
        that.css.containers();
 
-
        that.css.images();
 
-
      }, 10);
 
-
    });
 
-
 
-
    $(window).on('hashchange', function() {
 
-
      var hash = that._parseHash(), index;
 
-
 
-
      if (hash) {
 
-
        if (!isNaN(hash)) {
 
-
// Minus 1 here because we don't want the url
 
-
        // to be zero-indexed
 
-
        index = that._upcomingSlide(hash - 1);
 
-
}
 
-
      } else {
 
-
        index = that._upcomingSlide(hash);
 
-
      }
 
-
 
-
      if (index >= 0) {
 
-
if (index !== that.current) {
 
-
that.animate(index);
 
-
}
 
-
      }
 
-
    });
 
-
 
-
    that.pagination._events();
 
-
 
-
    that.start();
 
-
    return that;
 
-
  };
 
-
 
-
var css = {
 
-
  containers: function() {
 
-
    if (that.init) {
 
-
      that.$el.css({
 
-
        height: that.height
 
-
      });
 
-
 
-
      that.$control.css({
 
-
        width: that.width * multiplier,
 
-
        left: -that.width
 
-
      });
 
-
 
-
      that.$container.css({
 
-
 
-
      });
 
-
    } else {
 
-
      $('body').css({
 
-
        margin: 0
 
-
      });
 
-
 
-
      that.$el.css({
 
-
        position: 'relative',
 
-
        overflow: 'hidden',
 
-
        width: '100%',
 
-
        height: that.height
 
-
      });
 
-
 
-
      that.$control.css({
 
-
        position: 'relative',
 
-
        transform: 'translate3d(0)',
 
-
        height: '100%',
 
-
        width: that.width * multiplier,
 
-
        left: -that.width
 
-
      });
 
-
 
-
      that.$container.css({
 
-
        display: 'none',
 
-
        margin: '0',
 
-
        padding: '0',
 
-
        listStyle: 'none',
 
-
        position: 'relative',
 
-
        height: '100%'
 
-
      });
 
-
    }
 
-
 
-
    if (that.size() === 1) {
 
-
      that.$el.find(that.options.elements.nav).hide();
 
-
    }
 
-
  },
 
-
  images: function() {
 
-
    var $images = that.$container.find('img')
 
-
                                .not(that.options.elements.preserve)
 
-
 
-
    $images.removeAttr('width').removeAttr('height')
 
-
      .css({
 
-
        "-webkit-backface-visibility": 'hidden',
 
-
        "-ms-interpolation-mode": 'bicubic',
 
-
        "position": 'absolute',
 
-
        "left": '0',
 
-
        "top": '0',
 
-
        "z-index": '-1',
 
-
        "max-width": 'none'
 
-
      });
 
-
 
-
    $images.each(function() {
 
-
      var image_aspect_ratio = that.image._aspectRatio(this),
 
-
          image = this;
 
-
 
-
      if (!$.data(this, 'processed')) {
 
-
        var img = new Image();
 
-
        img.onload = function() {
 
-
          that.image._scale(image, image_aspect_ratio);
 
-
          that.image._center(image, image_aspect_ratio);
 
-
          $.data(image, 'processed', true);
 
-
        };
 
-
        img.src = this.src;
 
-
 
-
      } else {
 
-
        that.image._scale(image, image_aspect_ratio);
 
-
        that.image._center(image, image_aspect_ratio);
 
-
      }
 
-
    });
 
-
  },
 
-
  children: function() {
 
-
    var $children = that.$container.children();
 
-
 
-
    if ($children.is('img')) {
 
-
      $children.each(function() {
 
-
        if ($(this).is('img')) {
 
-
          $(this).wrap('<div>');
 
-
 
-
          // move id attribute
 
-
          var id = $(this).attr('id');
 
-
          $(this).removeAttr('id');
 
-
          $(this).parent().attr('id', id);
 
-
        }
 
-
      });
 
-
 
-
      $children = that.$container.children();
 
-
    }
 
-
 
-
    if (!that.init) {
 
-
      $children.css({
 
-
        display: 'none',
 
-
        left: that.width * 2
 
-
      });
 
-
    }
 
-
 
-
    $children.css({
 
-
      position: 'absolute',
 
-
      overflow: 'hidden',
 
-
      height: '100%',
 
-
      width: that.width,
 
-
      top: 0,
 
-
      zIndex: 0
 
-
    });
 
-
 
-
  }
 
-
}
 
-
 
-
var fx = {
 
-
  slide: function(orientation, complete) {
 
-
    var $children = that.$container.children(),
 
-
        $target  = $children.eq(orientation.upcoming_slide);
 
-
 
-
    $target.css({
 
-
      left: orientation.upcoming_position,
 
-
      display: 'block'
 
-
    });
 
-
 
-
    that.$control.animate({
 
-
      left: orientation.offset
 
-
    },
 
-
    that.options.animation_speed,
 
-
    that.options.animation_easing,
 
-
    function() {
 
-
      if (that.size() > 1) {
 
-
        that.$control.css({
 
-
          left: -that.width
 
-
        });
 
-
 
-
        $children.eq(orientation.upcoming_slide).css({
 
-
          left: that.width,
 
-
          zIndex: 2
 
-
        });
 
-
 
-
        if (orientation.outgoing_slide >= 0) {
 
-
          $children.eq(orientation.outgoing_slide).css({
 
-
            left: that.width,
 
-
            display: 'none',
 
-
            zIndex: 0
 
-
          });
 
-
        }
 
-
      }
 
-
 
-
      complete();
 
-
    });
 
-
  },
 
-
  fade: function(orientation, complete) {
 
-
    var that = this,
 
-
        $children = that.$container.children(),
 
-
        $outgoing = $children.eq(orientation.outgoing_slide),
 
-
        $target = $children.eq(orientation.upcoming_slide);
 
-
 
-
    $target.css({
 
-
      left: this.width,
 
-
      opacity: 1,
 
-
      display: 'block'
 
-
    });
 
-
 
-
    if (orientation.outgoing_slide >= 0) {
 
-
      $outgoing.animate({
 
-
        opacity: 0
 
-
      },
 
-
      that.options.animation_speed,
 
-
      that.options.animation_easing,
 
-
      function() {
 
-
        if (that.size() > 1) {
 
-
          $children.eq(orientation.upcoming_slide).css({
 
-
            zIndex: 2
 
-
          });
 
-
 
-
          if (orientation.outgoing_slide >= 0) {
 
-
            $children.eq(orientation.outgoing_slide).css({
 
-
              opacity: 1,
 
-
              display: 'none',
 
-
              zIndex: 0
 
-
            });
 
-
          }
 
-
        }
 
-
 
-
        complete();
 
-
      });
 
-
    } else {
 
-
      $target.css({
 
-
        zIndex: 2
 
-
      });
 
-
      complete();
 
-
    }
 
-
  }
 
-
};
 
-
 
-
fx = $.extend(fx, $.fn.superslides.fx);
 
-
 
-
var image = {
 
-
  _centerY: function(image) {
 
-
    var $img = $(image);
 
-
 
-
    $img.css({
 
-
      top: (that.height - $img.height()) / 2
 
-
    });
 
-
  },
 
-
  _centerX: function(image) {
 
-
    var $img = $(image);
 
-
 
-
    $img.css({
 
-
      left: (that.width - $img.width()) / 2
 
-
    });
 
-
  },
 
-
  _center: function(image) {
 
-
    that.image._centerX(image);
 
-
    that.image._centerY(image);
 
-
  },
 
-
  _aspectRatio: function(image) {
 
-
    if (!image.naturalHeight) {
 
-
  if (!image.naturalWidth) {
 
-
  var img = new Image();
 
-
  img.src = image.src;
 
-
  image.naturalHeight = img.height;
 
-
  image.naturalWidth = img.width;
 
-
  }
 
-
    }
 
-
 
-
    return image.naturalHeight / image.naturalWidth;
 
-
  },
 
-
  _scale: function(image, image_aspect_ratio) {
 
-
    image_aspect_ratio = image_aspect_ratio || that.image._aspectRatio(image);
 
-
 
-
    var container_aspect_ratio = that.height / that.width,
 
-
        $img = $(image);
 
-
 
-
    if (container_aspect_ratio > image_aspect_ratio) {
 
-
      $img.css({
 
-
        height: that.height,
 
-
        width: that.height / image_aspect_ratio
 
-
      });
 
-
 
-
    } else {
 
-
      $img.css({
 
-
        height: that.width * image_aspect_ratio,
 
-
        width: that.width
 
-
      });
 
-
    }
 
-
  }
 
-
};
 
-
 
-
var pagination = {
 
-
  _setCurrent: function(i) {
 
-
    if (!that.$pagination) { return; }
 
-
 
-
    var $pagination_children = that.$pagination.children();
 
-
 
-
    $pagination_children.removeClass('current');
 
-
    $pagination_children.eq(i)
 
-
      .addClass('current');
 
-
  },
 
-
  _addItem: function(i) {
 
-
    var slide_number = i + 1,
 
-
        href = slide_number,
 
-
        $slide = that.$container.children().eq(i),
 
-
        slide_id = $slide.attr('id');
 
-
 
-
    if (slide_id) {
 
-
      href = slide_id;
 
-
    }
 
-
 
-
    var $item = $("<a>", {
 
-
      'href': "#" + href,
 
-
      'text': href
 
-
    });
 
-
 
-
    $item.appendTo(that.$pagination);
 
-
  },
 
-
  _setup: function() {
 
-
    if (!that.options.pagination || that.size() === 1) { return; }
 
-
 
-
    var $pagination = $("<nav>", {
 
-
      'class': that.options.elements.pagination.replace(/^\./, '')
 
-
    });
 
-
 
-
    that.$pagination = $pagination.appendTo(that.$el);
 
-
 
-
    for (var i = 0; i < that.size(); i++) {
 
-
      that.pagination._addItem(i);
 
-
    }
 
-
  },
 
-
  _events: function() {
 
-
    that.$el.on('click', that.options.elements.pagination + ' a', function(e) {
 
-
      e.preventDefault();
 
-
 
-
      var hash  = that._parseHash(this.hash),
 
-
          index = that._upcomingSlide(hash - 1);
 
-
 
-
      if (index !== that.current) {
 
-
        that.animate(index);
 
-
      }
 
-
    });
 
-
  }
 
-
};
 
-
 
-
  this.css = css;
 
-
  this.image = image;
 
-
  this.pagination = pagination;
 
-
  this.fx = fx;
 
-
  this.animation = this.fx[this.options.animation];
 
-
 
-
  this.$control = this.$container.wrap($control).parent('.slides-control');
 
-
 
-
  that._findPositions();
 
-
  that.width  = that._findWidth();
 
-
  that.height = (that._findHeight() - $('#TopBar').height()) * .8;
 
-
 
-
  this.css.children();
 
-
  this.css.containers();
 
-
  this.css.images();
 
-
  this.pagination._setup();
 
-
 
-
  return initialize();
 
-
};
 
-
 
-
Superslides.prototype = {
 
-
  _findWidth: function() {
 
-
    return $(this.options.inherit_width_from).width();
 
-
  },
 
-
  _findHeight: function() {
 
-
    return $(this.options.inherit_width_from).height();
 
-
  },
 
-
 
-
  _findMultiplier: function() {
 
-
    return this.size() === 1 ? 1 : 3;
 
-
  },
 
-
 
-
  _upcomingSlide: function(direction) {
 
-
    if ((/next/).test(direction)) {
 
-
      return this._nextInDom();
 
-
 
-
    } else if ((/prev/).test(direction)) {
 
-
      return this._prevInDom();
 
-
 
-
    } else if ((/\d/).test(direction)) {
 
-
      return +direction;
 
-
 
-
    } else if (direction) {
 
-
  if ((/\w/).test(direction)) {
 
-
      var index = this._findSlideById(direction);
 
-
      if (index >= 0) {
 
-
        return index;
 
-
      } else {
 
-
        return 0;
 
-
      }
 
-
 
-
    } else {
 
-
      return 0;
 
-
    }
 
-
}
 
-
  },
 
-
 
-
  _findSlideById: function(id) {
 
-
    return this.$container.find('#' + id).index();
 
-
  },
 
-
 
-
  _findPositions: function(current, thisRef) {
 
-
    thisRef = thisRef || this;
 
-
 
-
    if (current === undefined) {
 
-
      current = -1;
 
-
    }
 
-
 
-
    thisRef.current = current;
 
-
    thisRef.next    = thisRef._nextInDom();
 
-
    thisRef.prev    = thisRef._prevInDom();
 
-
  },
 
-
 
-
  _nextInDom: function() {
 
-
    var index = this.current + 1;
 
-
 
-
    if (index === this.size()) {
 
-
      index = 0;
 
-
    }
 
-
 
-
    return index;
 
-
  },
 
-
 
-
  _prevInDom: function() {
 
-
    var index = this.current - 1;
 
-
 
-
    if (index < 0) {
 
-
      index = this.size() - 1;
 
-
    }
 
-
 
-
    return index;
 
-
  },
 
-
 
-
  _parseHash: function(hash) {
 
-
    hash = hash || window.location.hash;
 
-
    hash = hash.replace(/^#/, '');
 
-
 
-
    if (hash) {
 
-
      if (!isNaN(+hash)) {
 
-
  hash = +hash;
 
-
  }
 
-
    }
 
-
 
-
    return hash;
 
-
  },
 
-
 
-
  size: function() {
 
-
    return this.$container.children().length;
 
-
  },
 
-
 
-
  destroy: function() {
 
-
    return this.$el.removeData();
 
-
  },
 
-
 
-
  update: function() {
 
-
    this.css.children();
 
-
    this.css.containers();
 
-
    this.css.images();
 
-
 
-
    this.pagination._addItem(this.size())
 
-
 
-
    this._findPositions(this.current);
 
-
    this.$el.trigger('updated.slides');
 
-
  },
 
-
 
-
  stop: function() {
 
-
    clearInterval(this.play_id);
 
-
    delete this.play_id;
 
-
 
-
    this.$el.trigger('stopped.slides');
 
-
  },
 
-
 
-
  start: function() {
 
-
    var that = this;
 
-
 
-
    if (that.options.hashchange) {
 
-
      $(window).trigger('hashchange');
 
-
    } else {
 
-
      this.animate();
 
-
    }
 
-
 
-
    if (this.options.play) {
 
-
      if (this.play_id) {
 
-
        this.stop();
 
-
      }
 
-
 
-
      this.play_id = setInterval(function() {
 
-
        that.animate();
 
-
      }, this.options.play);
 
-
    }
 
-
 
-
    this.$el.trigger('started.slides');
 
-
  },
 
-
 
-
  animate: function(direction, userCallback) {
 
-
    var that = this,
 
-
        orientation = {};
 
-
 
-
    if (this.animating) {
 
-
      return;
 
-
    }
 
-
 
-
    this.animating = true;
 
-
 
-
    if (direction === undefined) {
 
-
      direction = 'next';
 
-
    }
 
-
 
-
    orientation.upcoming_slide = this._upcomingSlide(direction);
 
-
 
-
    if (orientation.upcoming_slide >= this.size()) {
 
-
      return;
 
-
    }
 
-
 
-
    orientation.outgoing_slide    = this.current;
 
-
    orientation.upcoming_position = this.width * 2;
 
-
    orientation.offset            = -orientation.upcoming_position;
 
-
 
-
    if (direction === 'prev' || direction < orientation.outgoing_slide) {
 
-
      orientation.upcoming_position = 0;
 
-
      orientation.offset            = 0;
 
-
    }
 
-
 
-
    if (that.size() > 1) {
 
-
      that.pagination._setCurrent(orientation.upcoming_slide);
 
-
    }
 
-
 
-
    if (that.options.hashchange) {
 
-
      var hash = orientation.upcoming_slide + 1,
 
-
          id = that.$container.children(':eq(' + orientation.upcoming_slide + ')').attr('id');
 
-
 
-
      if (id) {
 
-
        window.location.hash = id;
 
-
      } else {
 
-
        window.location.hash = hash;
 
-
      }
 
-
    }
 
-
 
-
    that.$el.trigger('animating.slides', [orientation]);
 
-
 
-
    that.animation(orientation, function() {
 
-
      that._findPositions(orientation.upcoming_slide, that);
 
-
 
-
      if (typeof userCallback === 'function') {
 
-
        userCallback();
 
-
      }
 
-
 
-
      that.animating = false;
 
-
      that.$el.trigger('animated.slides');
 
-
 
-
      if (!that.init) {
 
-
        that.$el.trigger('init.slides');
 
-
        that.init = true;
 
-
        that.$container.fadeIn('fast');
 
-
      }
 
-
    });
 
-
  }
 
-
};
 
-
 
-
// jQuery plugin definition
 
-
 
-
$.fn[plugin] = function(option, args) {
 
-
  var result = [];
 
-
 
-
  this.each(function() {
 
-
    var $this, data, options;
 
-
 
-
    $this = $(this);
 
-
    data = $this.data(plugin);
 
-
    options = typeof option === 'object' && option;
 
-
 
-
    if (!data) {
 
-
      result = $this.data(plugin, (data = new Superslides(this, options)));
 
-
    }
 
-
 
-
    if (typeof option === "string") {
 
-
      result = data[option];
 
-
      if (typeof result === 'function') {
 
-
        return result = result.call(data, args);
 
-
      }
 
-
    }
 
-
  });
 
-
 
-
  return result;
 
-
};
 
-
 
-
$.fn[plugin].fx = {};
 
-
 
-
})(this, jQuery);
 
-
</script>
 
<script>
<script>
$(document).ready(function() {
$(document).ready(function() {
-
if ($('body').width() > 868) {
+
$('#Banner').css('display', 'block');
-
$('#TopBar').css('padding-left', Math.floor(($('body').width() - 868) / 2));
+
$('#Page').css({'position' : 'relative', top : '19px'});
-
$('#LogoItem').css('display', 'block');
+
$('#TopBar').css('position', 'static');
 +
$('#Content').css('top', '0');
 +
 +
/*if (window.pageYOffset < 89) {
 +
$('#Banner').css('height', '100px');
}
}
-
else if ($('body').width() <= 868) {
+
else {
-
if ($('body').width() > 744) {
+
$('#Banner').css('height', '89px');
-
$('#TopBar').css('padding-left', Math.floor(($('body').width() - 744) / 2));
+
}*/
-
$('#LogoItem').css('display', 'none');
+
-
}
+
if (window.pageYOffset < 180) {
 +
$('#TopBar').css('position', 'static');
 +
}
 +
else {
 +
$('#TopBar').css('position', 'fixed');
}
}
-
$(window).resize(function() {
+
$(window).scroll(function() {
-
if ($('body').width() > 868) {
+
/*if (window.pageYOffset < 89) {
-
$('#TopBar').css('padding-left', Math.floor(($('body').width() - 868) / 2));
+
$('#Banner').css('height', '100px');
-
$('#LogoItem').css('display', 'block');
+
}
 +
else {
 +
$('#Banner').css('height', '89px');
 +
}*/
 +
 +
if(window.pageYOffset < 180) {
 +
$('#TopBar').css('position', 'static');
 +
$('#Content').css('top', '0');
}
}
-
else if ($('body').width() <= 868) {
+
else {
-
if ($('body').width() > 744) {
+
$('#TopBar').css('position', 'fixed');
-
$('#TopBar').css('padding-left', Math.floor(($('body').width() - 744) / 2));
+
$('#Content').css('top', '94px');
-
$('#LogoItem').css('display', 'none');
+
-
}
+
}
}
});
});
});
});
</script>
</script>
-
 
+
</html>
-
</head>
+
-
</html
+

Latest revision as of 04:24, 24 September 2013

Retrieved from "http://2013.igem.org/Template:Team:Calgary/Test"