Difference between revisions of "Team:Cornell/sandbox"

Line 4: Line 4:
  
 
<head>
 
<head>
−
 
+
<script type="text/javascript">
−
    <meta charset="utf-8">
+
(function($) {
−
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
$.fn.turniquet = function(options) {
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
// This is the easiest way to have default options.
−
    <meta name="description" content="">
+
var settings = $.extend({
−
    <meta name="author" content="">
+
// These are the defaults.
−
 
+
zindex : 10000,
−
    <title>Full - Start Bootstrap Template</title>
+
direction: 'up',
−
 
+
duration: 200,
−
    <!-- Bootstrap Core CSS -->
+
easing: 'swing',
−
    <link href="https://2015.igem.org/Team:Cornell/style?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
+
animateOnCLick: true,
−
<style>
+
triggerUp: null,
−
/*!
+
triggerDown: null,
−
* Start Bootstrap - Full HTML Template (http://startbootstrap.com)
+
complete: null,
−
* Code licensed under the Apache License v2.0.
+
before: null,
−
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
+
after: null
−
*/
+
}, options);
−
 
+
−
body {
+
var windowWidth = this.parent().width(),
−
margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
+
windowHeight = this.parent().height(),
−
}
+
zIndexI = settings.zindex,
−
 
+
children = this.children(),
−
/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */
+
nbChild = children.length,
−
 
+
childWidth = $(children[0]).width(),
−
.full {
+
childHeight = $(children[0]).height(),
−
background: url('https://placeholdit.imgix.net/~text?txtsize=144&txt=1920%C3%971080&w=1920&h=1080') no-repeat center center fixed;
+
positions = [],
−
-webkit-background-size: cover;
+
animationCounter = 0;
−
-moz-background-size: cover;
+
−
background-size: cover;
+
var animate = function(direction){
−
-o-background-size: cover;
+
if(typeof direction != 'string'){
−
}
+
direction = settings.direction;
−
.drop:hover + .undernav{
+
}
−
display: block;
+
−
}
+
if(animationCounter == 0){
−
.undernav {
+
var $e = $(this);
−
display: none;
+
−
margin-top: 100px;
+
// for each child of main collection
−
}
+
children.each(function(index, element){
−
</style>
+
var $c = $(element),
−
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+
dataIndex = parseInt($c.attr('data-index'))
−
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+
newIndex = 0,
−
    <!--[if lt IE 9]>
+
down = null,
−
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+
animTop = '',
−
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+
animLeft = '';
−
    <![endif]-->
+
−
 
+
if(direction == 'up'){// up
 +
newIndex = nbChild-1;
 +
down = true;
 +
if(dataIndex > 0){
 +
newIndex = dataIndex-1;
 +
down = false;
 +
}
 +
}else{ // down
 +
newIndex = 0;
 +
down = false
 +
if(dataIndex < (nbChild-1)){
 +
newIndex = dataIndex+1;
 +
down = true;
 +
}
 +
}
 +
 +
// Change data index
 +
$c.attr('data-index', newIndex);
 +
 +
// Trigger before method
 +
if(typeof settings.before == 'function'){
 +
settings.before(index, element);
 +
}
 +
 +
if(!down){
 +
animTop = '-='+($c.position().top - positions[newIndex].top);
 +
animLeft = '-='+($c.position().left - positions[newIndex].left);
 +
}else{
 +
if(direction == 'up'){
 +
animTop = '+='+($c.position().top + positions[newIndex].top);
 +
animLeft = '+='+($c.position().left + positions[newIndex].left);
 +
}else{
 +
animTop = '+='+(positions[newIndex].top - $c.position().top);
 +
animLeft = '+='+(positions[newIndex].left - $c.position().left);
 +
}
 +
}
 +
 +
animationCounter++;
 +
 +
// change z-index
 +
if(direction == 'up'){
 +
$c.css('z-index', positions[newIndex].zindex);
 +
}else{// delay z-index
 +
var ozIndex = {
 +
zindex : positions[newIndex].zindex   
 +
};
 +
setTimeout(function(){
 +
$c.css('z-index', ozIndex.zindex);
 +
}, settings.duration);
 +
}
 +
 +
// Animate slides
 +
$c.animate({
 +
left: animLeft,
 +
top: animTop
 +
}, settings.duration, settings.easing, function(){
 +
if(animationCounter > 0){
 +
animationCounter --;
 +
}
 +
});
 +
// Trigger before method
 +
if(typeof settings.before == 'function'){
 +
setTimeout(function(){
 +
settings.after(index, element);
 +
}, settings.duration);
 +
}
 +
 +
});
 +
// Trigger complete method
 +
if(typeof settings.complete == 'function'){
 +
setTimeout(settings.complete, settings.duration);
 +
}
 +
}
 +
};
 +
 +
// Initilize First Position
 +
children.each(function(index, element){
 +
var $e = $(element);
 +
zIndexI--;
 +
 +
// Calculate position of each slide
 +
var left = (((windowWidth-(childWidth))/(nbChild-1))*index);
 +
var top = (((windowHeight-(childHeight))/(nbChild-1))*index);
 +
 +
positions[index] = {
 +
'top':top,
 +
'left':left,
 +
'zindex':zIndexI
 +
};
 +
 +
// Position slides
 +
$e.css('top', top)
 +
.css('left', left)
 +
.css('z-index', zIndexI)
 +
.attr('data-index', index);
 +
});
 +
 +
//Manage Click
 +
if(settings.animateOnCLick){
 +
children.click(animate);
 +
}
 +
 +
if(settings.triggerUp != null){
 +
var $triggerUp = $(settings.triggerUp);
 +
if($triggerUp.length > 0){
 +
$triggerUp.click(function(){
 +
animate('up');
 +
});
 +
}
 +
}
 +
 +
if(settings.triggerDown != null){
 +
var $triggerDown = $(settings.triggerDown);
 +
if($triggerDown.length > 0){
 +
$triggerDown.click(function(){
 +
animate('down');
 +
});
 +
}
 +
}
 +
 +
return this;
 +
};
 +
 +
}(jQuery));
 +
 +
$('.turniquet').turniquet();
 +
</script>
 +
<style type="text/css">
 +
.jumbotron {
 +
position: relative;
 +
height: 600px;
 +
}
 +
.turniquet {
 +
position: relative;
 +
margin:0;
 +
}
 +
.turniquet li {
 +
position:absolute;
 +
display:block;
 +
width:350px;
 +
height:350px;
 +
list-style: none;
 +
max-height: 80px;
 +
}
 +
</style>
 
</head>
 
</head>
−
 
+
<body>
−
<body class="full" >
+
<div class="jumbotron">
−
 
+
         <ul class="turniquet">
−
    <!-- Navigation -->
+
             <li><img src="https://static.igem.org/mediawiki/2014/5/5b/BlackG_igem_logo.png" /></li>
−
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+
            <li><img src="https://static.igem.org/mediawiki/2014/5/5b/BlackG_igem_logo.png" /></li>
−
         <div class="container">
+
             <li><img src="https://static.igem.org/mediawiki/2014/5/5b/BlackG_igem_logo.png" /></li>
−
             <!-- Brand and toggle get grouped for better mobile display -->
+
        </ul>
−
            <div class="navbar-header">
+
    </div>
−
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+
−
                    <span class="sr-only">Toggle navigation</span>
+
−
                    <span class="icon-bar"></span>
+
−
                    <span class="icon-bar"></span>
+
−
                    <span class="icon-bar"></span>
+
−
                </button>
+
−
                <a class="navbar-brand" href="#">Start Bootstrap</a>
+
−
            </div>
+
−
            <!-- Collect the nav links, forms, and other content for toggling -->
+
−
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
−
                <ul class="nav navbar-nav">
+
−
                    <li>
+
−
                        <a href="#">What we do</a>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a href="#" class="drop">fishPharm</a>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a href="#">Outreach</a>
+
−
                    </li>
+
−
<li>
+
−
                        <a href="#">About Us</a>
+
−
                    </li>
+
−
                </ul>
+
−
            </div>
+
−
            <!-- /.navbar-collapse -->
+
−
        </div>
+
−
        <!-- /.container -->
+
−
    </nav>
+
−
<nav class="undernav navbar navbar-inverse navbar-fixed" role="navigation">
+
−
        <div class="container">
+
−
            <!-- Brand and toggle get grouped for better mobile display -->
+
−
            <div class="navbar-header">
+
−
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+
−
                    <span class="sr-only">Toggle navigation</span>
+
−
                    <span class="icon-bar"></span>
+
−
                    <span class="icon-bar"></span>
+
−
                    <span class="icon-bar"></span>
+
−
                </button>
+
−
                <a class="navbar-brand" href="#">Start Bootstrap</a>
+
−
            </div>
+
−
             <!-- Collect the nav links, forms, and other content for toggling -->
+
−
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
−
                <ul class="nav navbar-nav">
+
−
                    <li>
+
−
                        <a href="#">What we do</a>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a href="#" class="drop">fishPharm</a>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a href="#">Outreach</a>
+
−
                    </li>
+
−
<li>
+
−
                        <a href="#">About Us</a>
+
−
                    </li>
+
−
                </ul>
+
−
            </div>
+
−
            <!-- /.navbar-collapse -->
+
−
        </div>
+
−
        <!-- /.container -->
+
−
    </nav>
+
−
 
+
−
    <!-- Put your page content here! -->
+
−
 
+
−
    <!-- jQuery -->
+
−
    <script src="js/jquery.js"></script>
+
−
 
+
−
    <!-- Bootstrap Core JavaScript -->
+
−
    <script src="js/bootstrap.min.js"></script>
+
−
 
+
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 23:52, 14 September 2015

<!DOCTYPE html>