Team:TP CC-SanDiego/TheTeam.html

From 2014hs.igem.org

(Difference between revisions)
Line 1: Line 1:
-
 
+
<!DOCTYPE html>
<html lang="en">
<html lang="en">
-
<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">
 
-
</head>
 
     <head>
     <head>
<meta charset="UTF-8" />
<meta charset="UTF-8" />
Line 123: Line 20:
     <body>
     <body>
          
          
-
         <div class="container demo-2">
+
         <div class="container demo-1">
-
+
-
<!-- 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 -->
+
-
 
+
-
            <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 id="slider" class="sl-slider-wrapper">
Line 154: Line 26:
<div class="sl-slider">
<div class="sl-slider">
-
<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 bg-1" 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="bg-img bg-img-1"></div>
+
<div class="deco" data-icon="H"></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" 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 bg-2" 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="bg-img bg-img-2"></div>
+
<div class="deco" data-icon="q"></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" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
+
<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-inner">
<div class="sl-slide-inner">
-
<div class="bg-img bg-img-3"></div>
+
<div class="deco" data-icon="O"></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" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
+
<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-inner">
<div class="sl-slide-inner">
-
<div class="bg-img bg-img-4"></div>
+
<div class="deco" data-icon="I"></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" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
+
<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-inner">
<div class="sl-slide-inner">
-
<div class="bg-img bg-img-5"></div>
+
<div class="deco" data-icon="t"></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 204: Line 81:
</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 219: Line 91:
var Page = (function() {
var Page = (function() {
-
var $nav = $( '#nav-dots > span' ),
+
var $navArrows = $( '#nav-arrows' ),
 +
$nav = $( '#nav-dots > span' ),
slitslider = $( '#slider' ).slitslider( {
slitslider = $( '#slider' ).slitslider( {
onBeforeChange : function( slide, pos ) {
onBeforeChange : function( slide, pos ) {
Line 235: Line 108:
},
},
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 ) {

Revision as of 06:54, 20 June 2014

<!DOCTYPE html> Fullscreen 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

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