Team:TP CC-SanDiego/TheTeam.html

From 2014hs.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{Team:TP_CC-SanDiego/ContentFix}}
+
<!DOCTYPE html>
-
 
+
<html lang="en">
-
<html>
+
     <head>
-
<head>
+
-
<meta charset="utf-8">
+
-
<title>iGEM San Diego</title>
+
-
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
+
-
<script>
+
-
$(function() {
+
-
  $('a[href*=#]:not([href=#])').click(function() {
+
-
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
+
-
      var target = $(this.hash);
+
-
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
+
-
      if (target.length) {
+
-
        $('html,body').animate({
+
-
          scrollTop: target.offset().top
+
-
        }, 1000);
+
-
        return false;
+
-
      }
+
-
    }
+
-
  });
+
-
});
+
-
</script>
+
-
 
+
-
<!--<script>
+
-
$(document).ready(function() { 
+
-
var stickyNavTop = $('.nav').offset().top; 
+
-
 
+
-
var stickyNav = function(){ 
+
-
var scrollTop = $(window).scrollTop(); 
+
-
     
+
-
if (scrollTop > stickyNavTop) { 
+
-
    $('.nav').addClass('sticky'); 
+
-
} else { 
+
-
    $('.nav').removeClass('sticky'); 
+
-
} 
+
-
}; 
+
-
 
+
-
stickyNav(); 
+
-
 
+
-
$(window).scroll(function() { 
+
-
    stickyNav(); 
+
-
}); 
+
-
}); 
+
-
</script>-->
+
-
<style>
+
-
#content{
+
-
width: 100%;
+
-
margin: 0;
+
-
padding: 0;
+
-
background-color:transparent;
+
-
border: none;
+
-
}
+
-
+
-
body{
+
-
width: 100%;
+
-
margin: 0;
+
-
padding: 0;
+
-
background-color:none;
+
-
border: none;
+
-
}
+
-
#globalwrapper{
+
-
width: 100%;
+
-
height: 100%;
+
-
background: none;
+
-
}
+
-
 
+
-
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
+
-
    display:none;}
+
-
#top-section {
+
-
    border: none;
+
-
    height: 0px;}
+
-
#content {
+
-
    border: none;}
+
-
/* Removes "teams" from the menubar */
+
-
#menubar > ul > li:last-child {
+
-
    display: none;}
+
-
/* Resizes the menubar to fik the links (default is 400px) */
+
-
#menubar {
+
-
    width: auto;}
+
-
body {
+
-
    margin: 10px 0 0 0;
+
-
    padding: 0;}
+
-
#top-section {
+
-
    width: 965px;
+
-
    height: 0;
+
-
    margin: 0 auto;
+
-
    padding: 0;
+
-
    border: none;}
+
-
#menubar {
+
-
    font-size: 65%;
+
-
    top: -14px;}
+
-
.left-menu:hover {
+
-
    background-color: transparent;}
+
-
#menubar li a {
+
-
    background-color: transparent;}
+
-
#menubar:hover {
+
-
    color: white;}
+
-
#menubar li a {
+
-
    color: transparent;}
+
-
#menubar:hover li a {
+
-
    color: white;}
+
-
</style>
+
-
<!--<link href="style.css" rel="stylesheet" type="text/css">-->
+
-
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
+
-
<link href="https://e65ae602ef428322892bf5f667f9d51420f9cd4d.googledrive.com/host/0B21Mp8HDTzNfV3llTVVETkdxSjA/style.css" rel="stylesheet" type="text/css">
+
-
 
+
-
 
+
-
<div id="globalwrapper" style="z-index:9999;">
+
-
 
+
-
<div id="navbar-wrapper" class="nav content-wrapper" style="z-index:9999; position: fixed;">
+
-
    <div id="inside-wrapper">
+
-
    <div id="logo-holder">
+
-
            Logo Will Go Here
+
-
        </div>
+
-
        <nav id="navbar">
+
-
            <a style="padding-left: 0; border-bottom: 1px solid #e8e8e8;" href="https://2014hs.igem.org/Team:TP_CC-SanDiego">Home</a>
+
-
            <a href="/Team:TP_CC-SanDiego/Project.html">Project</a>
+
-
            <a href="/Team:TP_CC-SanDiego/Results.html">Results</a>
+
-
            <a href="/Team:TP_CC-SanDiego/TheTeam.html">The Team</a>
+
-
            <a href="/Team:TP_CC-SanDiego/Journal.html">Journal</a>
+
-
                <a href="/Team:TP_CC-SanDiego/Outreach.html">Outreach</a>
+
-
            <a href="/Team:TP_CC-SanDiego/Safety.html">Safety</a>
+
-
            <a href="igem.org" style="padding-right: 0;">iGEM</a>
+
-
        </nav>
+
-
        </div>
+
-
</div>
+
-
 
+
-
 
+
-
 
+
-
<!-- Begin Slider -->
+
-
<div id="phase-wrapper" style="background:url(https://static.igem.org/mediawiki/2014/2/2b/B1.png); background-size: 100%;">
+
-
<div id="slider-wrapper" class="content-wrapper" style="width: 100%; height: 700px; margin-right: auto; margin-left: auto; overflow: hidden;">
+
-
      
+
-
<div id="sliderwrapper" style="width:1070px; overflow: hidden; margin-right: auto; margin-left: auto; height: 100px; background-color: orange;">
+
-
 
+
<meta charset="UTF-8" />
<meta charset="UTF-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
Line 143: Line 10:
         <meta name="author" content="Codrops" />
         <meta name="author" content="Codrops" />
         <link rel="shortcut icon" href="../favicon.ico">  
         <link rel="shortcut icon" href="../favicon.ico">  
-
<link rel="stylesheet" type="text/css" href="https://1d73b00ed300170351454d20ff558be14ac4f361.googledrive.com/host/0B-lbKT615Er8d2gxSk1vX2NWVFU/demo.css />
+
<link rel="stylesheet" type="text/css" href="https://1d73b00ed300170351454d20ff558be14ac4f361.googledrive.com/host/0B-lbKT615Er8d2gxSk1vX2NWVFU/demo.css" />
         <link rel="stylesheet" type="text/css" href="https://1d73b00ed300170351454d20ff558be14ac4f361.googledrive.com/host/0B-lbKT615Er8d2gxSk1vX2NWVFU/style.css" />
         <link rel="stylesheet" type="text/css" href="https://1d73b00ed300170351454d20ff558be14ac4f361.googledrive.com/host/0B-lbKT615Er8d2gxSk1vX2NWVFU/style.css" />
         <link rel="stylesheet" type="text/css" href="https://1d73b00ed300170351454d20ff558be14ac4f361.googledrive.com/host/0B-lbKT615Er8d2gxSk1vX2NWVFU/custom.css" />
         <link rel="stylesheet" type="text/css" href="https://1d73b00ed300170351454d20ff558be14ac4f361.googledrive.com/host/0B-lbKT615Er8d2gxSk1vX2NWVFU/custom.css" />
Line 153: Line 20:
     <body>
     <body>
          
          
-
         <div class="container demo-1" style="width: 1070px; margin-right: auto; margin-left: auto;" z-index: 99; overflow: hidden; background-color: blue; height: 800px;>
+
         <div class="container demo-2">
 +
 +
<!-- Codrops top bar -->
 +
            <div class="codrops-top clearfix">
 +
                <a href="http://tympanus.net/Tutorials/CSS3BouncingBall/">
 +
                    <strong>&laquo; Previous Demo: </strong>3D Bouncing Ball with CSS3
 +
                </a>
 +
                <span class="right">
 +
                <a href="http://www.flickr.com/photos/majownik/">Images by Majownik</a>
 +
                    <a href="http://tympanus.net/codrops/?p=9357">
 +
                        <strong>Back to the Codrops Article</strong>
 +
                    </a>
 +
                </span>
 +
                <div class="clr"></div>
 +
            </div><!--/ Codrops top bar -->
-
             <div id="slider" class="sl-slider-wrapper" style="z-index:0;">
+
            <header class="clearfix">
 +
 +
<h1>Slit Slider <span>with CSS3 and jQuery</span></h1>
 +
 +
<nav class="codrops-demos">
 +
<a href="index.html">Demo 1</a>
 +
<a class="current-demo" href="index2.html">Demo 2</a>
 +
</nav>
 +
 +
</header>
 +
 
 +
             <div id="slider" class="sl-slider-wrapper">
<div class="sl-slider">
<div class="sl-slider">
-
<div class="sl-slide bg-1" >
+
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="sl-slide-inner">
-
<div class="deco" data-icon="I"><img src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg" /></div>
+
<div class="bg-img bg-img-1"></div>
-
<h2>A bene placito</h2>
+
<h2>A bene placito.</h2>
<blockquote><p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite></blockquote>
<blockquote><p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite></blockquote>
</div>
</div>
</div>
</div>
-
<div class="sl-slide bg-2" >
+
<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
<div class="sl-slide-inner">
<div class="sl-slide-inner">
-
<div class="deco" data-icon="q"></div>
+
<div class="bg-img bg-img-2"></div>
-
<h2>Regula aurea</h2>
+
<h2>Regula aurea.</h2>
<blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
<blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
</div>
</div>
</div>
</div>
-
<div class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
+
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="sl-slide-inner">
-
<div class="deco" data-icon="O"></div>
+
<div class="bg-img bg-img-3"></div>
-
<h2>Dum spiro, spero</h2>
+
<h2>Dum spiro, spero.</h2>
<blockquote><p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote>
<blockquote><p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote>
</div>
</div>
</div>
</div>
-
<div class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
+
<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="sl-slide-inner">
-
<div class="deco" data-icon="I"></div>
+
<div class="bg-img bg-img-4"></div>
-
<h2>Donna nobis pacem</h2>
+
<h2>Donna nobis pacem.</h2>
<blockquote><p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite></blockquote>
<blockquote><p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite></blockquote>
</div>
</div>
</div>
</div>
-
<div class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
+
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="sl-slide-inner">
-
<div class="deco" data-icon="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg"></div>
+
<div class="bg-img bg-img-5"></div>
-
<h2>Acta Non Verba</h2>
+
<h2>Acta Non Verba.</h2>
<blockquote><p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite></blockquote>
<blockquote><p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite></blockquote>
</div>
</div>
</div>
</div>
</div><!-- /sl-slider -->
</div><!-- /sl-slider -->
-
 
-
<nav id="nav-arrows" class="nav-arrows">
 
-
<span class="nav-arrow-prev">Previous</span>
 
-
<span class="nav-arrow-next">Next</span>
 
-
</nav>
 
<nav id="nav-dots" class="nav-dots">
<nav id="nav-dots" class="nav-dots">
Line 214: Line 101:
</div><!-- /slider-wrapper -->
</div><!-- /slider-wrapper -->
 +
 +
<div class="content-wrapper">
 +
<h2>About this slider</h2>
 +
<p>The Slit Slider is a slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements. </p>
 +
</div>
         </div>
         </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://5d998c4d8b69bd04b355d486f1b690c9dc479db2.googledrive.com/host/0B-lbKT615Er8bzROdXhlajh5N2c/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="https://5d998c4d8b69bd04b355d486f1b690c9dc479db2.googledrive.com/host/0B-lbKT615Er8bzROdXhlajh5N2c/jquery.ba-cond.min.js"></script>
-
<script type="text/javascript" src="https://5d998c4d8b69bd04b355d486f1b690c9dc479db2.googledrive.com/host/0B-lbKT615Er8bzROdXhlajh5N2c/jquery.slitslider.js"></script>
+
<script type="text/javascript" src="https://5d998c4d8b69bd04b355d486f1b690c9dc479db2.googledrive.com/host/0B-lbKT615Er8bzROdXhlajh5N2c/jquery.slitslider.js></script>
<script type="text/javascript">
<script type="text/javascript">
$(function() {
$(function() {
Line 224: Line 116:
var Page = (function() {
var Page = (function() {
-
var $navArrows = $( '#nav-arrows' ),
+
var $nav = $( '#nav-dots > span' ),
-
$nav = $( '#nav-dots > span' ),
+
slitslider = $( '#slider' ).slitslider( {
slitslider = $( '#slider' ).slitslider( {
onBeforeChange : function( slide, pos ) {
onBeforeChange : function( slide, pos ) {
Line 241: Line 132:
},
},
initEvents = function() {
initEvents = function() {
-
 
-
// add navigation events
 
-
$navArrows.children( ':last' ).on( 'click', function() {
 
-
 
-
slitslider.next();
 
-
return false;
 
-
 
-
} );
 
-
 
-
$navArrows.children( ':first' ).on( 'click', function() {
 
-
 
-
slitslider.previous();
 
-
return false;
 
-
 
-
} );
 
$nav.each( function( i ) {
$nav.each( function( i ) {
Line 302: Line 178:
});
});
</script>
</script>
-
</body>
+
</body>
-
<div id="navbar-wrapper" class="nav content-wrapper" style="z-index:9999; position: fixed;">
+
</html>
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+

Revision as of 06:40, 20 June 2014

<!DOCTYPE html> Fullscreen Slit Slider with CSS3 and jQuery

« Previous Demo: 3D Bouncing Ball with CSS3 Images by Majownik Back to the Codrops Article

Slit Slider with CSS3 and jQuery

A bene placito.

You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.

Ralph Waldo Emerson

Regula aurea.

Until he extends the circle of his compassion to all living things, man will not himself find peace.

Albert Schweitzer

Dum spiro, spero.

Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.

Dame Jane Morris Goodall

Donna nobis pacem.

The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.

Michael Klaper M.D.

Acta Non Verba.

I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.

Margi Clarke

About this slider

The Slit Slider is a slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements.

Retrieved from "http://2014hs.igem.org/Team:TP_CC-SanDiego/TheTeam.html"