Template:Team:TPHS/Team

From 2014hs.igem.org

(Difference between revisions)
(Created page with " #Banner { display: none; position: fixed; height: 100px; width: 100%; background: url(background.png) center center; } #TeamMembers { position: relative; top: 108px; } ...")
Line 1: Line 1:
-
 
#Banner {
#Banner {
display: none;
display: none;
Line 272: Line 271:
text-decoration: underline;
text-decoration: underline;
}
}
 +
<html>
 +
<!-- JavaScript & JQuery -->
 +
<script>
 +
$(document).ready(function() {
 +
var TotalSlides = $('.Person').length
 +
var CurrentSlide = 0;
 +
 +
$('#Carousel').css('display', 'block');
 +
$('.Info').css('display', 'none');
 +
$('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
 +
 +
if ($('body').width() < 990) {
 +
$('.Slide0, .Slide4').css('display', 'none');
 +
$('.Slide1').css('left', '90px');
 +
$('.Slide2').css('left', '255px');
 +
$('.Slide3').css('left', '420px');
 +
$('#Carousel, #WriteUp').css('width', '675px');
 +
}
 +
if ($('body').width() < 675) {
 +
$('#Carousel').css('display', 'none');
 +
$('.Info').css('display', 'block');
 +
$('#WriteUp').css('width', '100%');
 +
$('#WriteUp .Text, #WriteUp .InfoImg').css('width', '100%')
 +
}
 +
 +
$(window).resize(function() {
 +
if ($('body').width() >= 990) {
 +
$('.Slide0, .Slide4').css('display', 'block');
 +
$('.Person').css('left', '');
 +
$('#Carousel, #WriteUp').css('width', '990px');
 +
$('#Carousel').css('display', 'block');
 +
$('.Info').css('display', 'none');
 +
$('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
 +
$('#WriteUp .Text, #WriteUp .InfoImg').css('width', '50%')
 +
}
 +
if ($('body').width() < 990) {
 +
$('.Slide0, .Slide4').css('display', 'none');
 +
$('.Slide1').css('left', '90px');
 +
$('.Slide2').css('left', '255px');
 +
$('.Slide3').css('left', '420px');
 +
$('#Carousel, #WriteUp').css('width', '675px');
 +
$('#Carousel').css('display', 'block');
 +
$('.Info').css('display', 'none');
 +
$('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
 +
$('#WriteUp .Text, #WriteUp .InfoImg').css('width', '50%')
 +
}
 +
if ($('body').width() < 675) {
 +
$('#Carousel').css('display', 'none');
 +
$('.Info').css('display', 'block');
 +
$('#WriteUp').css('width', '100%');
 +
$('#WriteUp .Text, #WriteUp .InfoImg').css('width', '100%')
 +
}
 +
});
 +
 +
$('#bodyContent').css({'min-height' : $(window).height(), background : 'url(https://static.igem.org/mediawiki/2013/8/89/2013UCalgaryTeamBackground.png)'});
 +
 +
$('#RightArrow').click(function() {
 +
CurrentSlide = ++CurrentSlide % TotalSlides;
 +
$('.Person').css('display', 'none');
 +
var i = CurrentSlide;
 +
 +
for (var count = 0; count < 5; count++) {
 +
if (i >= TotalSlides)
 +
i = 0;
 +
 +
$('.Person').removeClass('Slide' + count);
 +
 +
SlideID = '#Person' + i;
 +
$(SlideID).css('display', 'block').addClass('Slide' + count);
 +
i++;
 +
}
 +
 +
$('.Info').css('display', 'none');
 +
$('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
 +
 +
if ($('body').width() < 990) {
 +
$('.Slide0, .Slide4').css('display', 'none');
 +
$('.Slide1').css('left', '90px');
 +
$('.Slide2').css('left', '255px');
 +
$('.Slide3').css('left', '420px');
 +
$('#Carousel, #WriteUp').css('width', '675px');
 +
}
 +
});
 +
 +
$('#LeftArrow').click(function() {
 +
CurrentSlide = (CurrentSlide + TotalSlides - 1) % TotalSlides;
 +
$('.Person').css('display', 'none');
 +
var i = CurrentSlide;
 +
 +
for (var count = 0; count < 5; count++) {
 +
if (i >= TotalSlides)
 +
i = 0;
 +
 +
$('.Person').removeClass('Slide' + count);
 +
 +
SlideID = '#Person' + i;
 +
$(SlideID).css('display', 'block').addClass('Slide' + count);
 +
i++;
 +
}
 +
 +
$('.Info').css('display', 'none');
 +
$('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
 +
 +
if ($('body').width() < 990) {
 +
$('.Slide0, .Slide4').css('display', 'none');
 +
$('.Slide1').css('left', '90px');
 +
$('.Slide2').css('left', '255px');
 +
$('.Slide3').css('left', '420px');
 +
$('#Carousel, #WriteUp').css('width', '675px');
 +
}
 +
});
 +
 +
$('.Person').click(function() {
 +
var ClickedPerson = $(this).attr('id');
 +
CurrentSlide = ((parseInt(ClickedPerson.replace('Person', ''))) + TotalSlides - 2) % TotalSlides;
 +
 +
$('.Person').css('display', 'none');
 +
var i = CurrentSlide;
 +
 +
for (var count = 0; count < 5; count++) {
 +
if (i >= TotalSlides)
 +
i = 0;
 +
 +
$('.Person').removeClass('Slide' + count);
 +
 +
SlideID = '#Person' + i;
 +
$(SlideID).css('display', 'block').addClass('Slide' + count);
 +
i++;
 +
}
 +
 +
$('.Info').css('display', 'none');
 +
$('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
 +
 +
if ($('body').width() < 990) {
 +
$('.Slide0, .Slide4').css('display', 'none');
 +
$('.Slide1').css('left', '90px');
 +
$('.Slide2').css('left', '255px');
 +
$('.Slide3').css('left', '420px');
 +
$('#Carousel, #WriteUp').css('width', '675px');
 +
}
 +
});
 +
});
 +
</script>
 +
<script>
 +
document.ondblclick = function(evt) {
 +
    if (window.getSelection)
 +
        window.getSelection().removeAllRanges();
 +
    else if (document.selection)
 +
        document.selection.empty();
 +
}
 +
</script>
 +
</html>

Revision as of 03:55, 9 March 2014

  1. Banner {

display: none; position: fixed; height: 100px; width: 100%; background: url(background.png) center center; }

  1. TeamMembers {

position: relative; top: 108px; }

  1. Carousel {

width: 990px; height: 180px; background-color:rgba(35,31,32,0.6); padding-left: 90px; position: relative; overflow: hidden; left: 0; right: 0; margin: 25px auto; display: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none user-select: none; }

  1. Carousel .Person {

width: 150px; height: 150px; position: absolute; top: 15px; }

  1. Carousel .Slide0 {

left: 90px; cursor: pointer; }

  1. Carousel .Slide1 {

left: 255px; cursor: pointer; }

  1. Carousel .Slide2 {

left: 420px; background-position: top !important; }

  1. Carousel .Slide3 {

left: 585px; cursor: pointer; }

  1. Carousel .Slide4 {

left: 750px; cursor: pointer; }

  1. Carousel .Arrow {

position: absolute; width: 60px; height: 60px; top: 0; bottom: 0; margin: auto; }

  1. Carousel #LeftArrow {

left: 0; margin-left: 15px; background: url(2013UCalgaryArrowLeftWhite.png) top; }

  1. Carousel #RightArrow {

right: 0; margin-right: 15px; background: url(2013UCalgaryArrowRightWhite.png) top; }

  1. Carousel #LeftArrow:hover, #Carousel #RightArrow:hover {

background-position: bottom; cursor: pointer; }

  1. Carousel #Person0 {

background: url(2013UCalgaryIainProfile.png) bottom; }

  1. Carousel #Person1 {

background: url(2013UCalgaryLisaProfile.png) bottom; }

  1. Carousel #Person2 {

background: url(2013UCalgaryKeithProfile.png) bottom; }

  1. Carousel #Person3 {

background: url(2013UCalgaryChrisProfile.png) bottom; }

  1. Carousel #Person4 {

background: url(2013UCalgaryRaiProfile.png) bottom; }

  1. Carousel #Person5 {

background: url(2013UCalgaryRobertProfile.png) bottom; display: none; }

  1. Carousel #Person6 {

background: url(2013UCalgaryHimikaProfile.png) bottom; display: none; }

  1. Carousel #Person7 {

background: url(2013UCalgaryTaylorProfile.png) bottom; display: none; }

  1. Carousel #Person8 {

background: url(2013UCalgaryDennyProfile.png) bottom; display: none; }

  1. Carousel #Person9 {

background: url(2013UCalgaryPatrickProfile.png) bottom; display: none; }

  1. Carousel #Person10 {

background: url(2013UCalgaryRuthProfile.png) bottom; display: none; }

  1. Carousel #Person11 {

background: url(2013UCalgaryKateProfile.png) bottom; display: none; }

  1. Carousel #Person12 {

background: url(2013UCalgaryJamieProfile.png) bottom; display: none; }

  1. Carousel #Person13 {

background: url(2013UCalgaryAndersProfile.png) bottom; display: none; }

  1. Carousel #Person14 {

background: url(2013UCalgaryMayiProfile.png) bottom; display: none; }

  1. Carousel #Person15 {

background: url(2013UCalgaryMarkProfile.png) bottom; display: none; }

  1. Carousel #Person16 {

background: url(2013UCalgaryAnthonyProfile.png) bottom; display: none; }

  1. Carousel #Person17 {

background: url(2013UCalgaryCesarProfile.png) bottom; display: none; }

  1. Carousel #Person18 {

background: url(2013UCalgaryJustinProfile.png) bottom; display: none; }

  1. Carousel #Person19 {

background: url(2013UCalgarySuProfile.png) bottom; display: none; }

  1. Carousel #Person20 {

background: url(2013UCalgarySharonProfile.png) bottom; display: none; }

  1. Carousel #Person21 {

background: url(2013UCalgaryAmandaProfile.png) bottom; display: none; }

  1. Carousel #Person22 {

background: url(2013UCalgaryJulieProfile.png) bottom; display: none; }

  1. Carousel #Person23 {

background: url(2013UCalgaryAliProfile.png) bottom; display: none; }

  1. WriteUp {

width: 100%; max-width: 990px; background-color:rgba(35,31,32,0.6); left: 0; right: 0; margin: 0 auto; }

  1. WriteUp .Info {

clear: both; overflow: auto; }

  1. WriteUp .InfoImg {

position: relative; width: 50%; height: 100%; padding: 25px; float: left; }

  1. WriteUp .InfoImg img {

width: 100%; height: auto; max-width: 100%; }

  1. WriteUp .Text {

width: 50%; min-width: 320px; height: 100%; padding: 25px; float: left; }

  1. WriteUp .Text h2 {

line-height: 1; text-align: left; font-size: 28px; font-weight: 600; color: #FFFFFF; margin: 0; }

  1. WriteUp .Text h3 {

line-height: 1.6; text-align: left; font-size: 20px; font-weight: 500; color: #FFFFFF; padding-left: 0; }

  1. WriteUp .Text p, #WriteUp .Text a {

font-size: 16px; line-height: 1.2; margin: 4px 0 12px 0; text-indent: 50px; color: #FFFFFF; text-align:justify; text-justify:inter-word; padding-left: 0; }

  1. WriteUp .Text a {

text-decoration: underline; }

Retrieved from "http://2014hs.igem.org/Template:Team:TPHS/Team"