Difference between revisions of "Team:Cornell/sandbox"

 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
 
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html lang="en">
 
<html lang="en">
 +
<!-- Make sure the <html> tag is set to the .full CSS class. Change the background image in the full.css file. -->
  
 
<head>
 
<head>
−
 
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
−
    <meta charset="utf-8">
+
<script type="text/javascript">
−
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
(function($) {
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
$.fn.turniquet = function(options) {
−
    <meta name="description" content="">
+
// This is the easiest way to have default options.
−
    <meta name="author" content="">
+
var settings = $.extend({
−
 
+
// These are the defaults.
−
    <title>Full Width Pics - Start Bootstrap Template</title>
+
zindex : 10000,
−
 
+
direction: 'up',
−
    <!-- Bootstrap Core CSS -->
+
duration: 200,
−
    <link href="css/bootstrap.min.css" rel="stylesheet">
+
easing: 'swing',
−
<link href="https://2015.igem.org/Team:Cornell/style" rel="stylesheet">
+
animateOnCLick: true,
−
 
+
triggerUp: null,
−
    <!-- Custom CSS -->
+
triggerDown: null,
−
    <link href="css/full-width-pics.css" rel="stylesheet">
+
complete: null,
−
 
+
before: null,
−
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+
after: null
−
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+
}, options);
−
    <!--[if lt IE 9]>
+
−
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+
var windowWidth = this.parent().width(),
−
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+
windowHeight = this.parent().height(),
−
    <![endif]-->
+
zIndexI = settings.zindex,
−
 
+
children = this.children(),
 +
nbChild = children.length,
 +
childWidth = $(children[0]).width(),
 +
childHeight = $(children[0]).height(),
 +
positions = [],
 +
animationCounter = 0;
 +
 +
var animate = function(direction){
 +
if(typeof direction != 'string'){
 +
direction = settings.direction;
 +
}
 +
 +
if(animationCounter == 0){
 +
var $e = $(this);
 +
 +
// for each child of main collection
 +
children.each(function(index, element){
 +
var $c = $(element),
 +
dataIndex = parseInt($c.attr('data-index'))
 +
newIndex = 0,
 +
down = null,
 +
animTop = '',
 +
animLeft = '';
 +
 +
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>
−
 
+
<div class="jumbotron">
−
    <!-- Navigation -->
+
         <ul class="turniquet">
−
    <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 -->
+
             <li><img src="https://static.igem.org/mediawiki/2014/5/5b/BlackG_igem_logo.png" /></li>
−
            <div class="navbar-header">
+
         </ul>
−
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+
     </div>
−
                    <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="#">About</a>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a href="#">Services</a>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a href="#">Contact</a>
+
−
                    </li>
+
−
                </ul>
+
−
            </div>
+
−
            <!-- /.navbar-collapse -->
+
−
        </div>
+
−
        <!-- /.container -->
+
−
    </nav>
+
−
 
+
−
    <!-- Full Width Image Header with Logo -->
+
−
    <!-- Image backgrounds are set within the full-width-pics.css file. -->
+
−
    <header class="image-bg-fluid-height">
+
−
        <img class="img-responsive img-center" src="http://placehold.it/200x200&text=Logo" alt="">
+
−
    </header>
+
−
 
+
−
    <!-- Content Section -->
+
−
    <section>
+
−
        <div class="container">
+
−
            <div class="row">
+
−
                <div class="col-lg-12">
+
−
                    <h1 class="section-heading">Section Heading</h1>
+
−
                    <p class="lead section-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
−
                    <p class="section-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
+
−
                </div>
+
−
            </div>
+
−
        </div>
+
−
    </section>
+
−
 
+
−
    <!-- Fixed Height Image Aside -->
+
−
    <!-- Image backgrounds are set within the full-width-pics.css file. -->
+
−
    <aside class="image-bg-fixed-height"></aside>
+
−
 
+
−
    <!-- Content Section -->
+
−
    <section>
+
−
        <div class="container">
+
−
             <div class="row">
+
−
                <div class="col-lg-12">
+
−
                    <h1 class="section-heading">Section Heading</h1>
+
−
                    <p class="lead section-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
−
                    <p class="section-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
+
−
                </div>
+
−
            </div>
+
−
            <!-- /.row -->
+
−
        </div>
+
−
        <!-- /.container -->
+
−
    </section>
+
−
 
+
−
    <!-- Footer -->
+
−
    <footer>
+
−
        <div class="container">
+
−
            <div class="row">
+
−
                <div class="col-lg-12">
+
−
                    <p>Copyright &copy; Your Website 2014</p>
+
−
                </div>
+
−
            </div>
+
−
            <!-- /.row -->
+
−
         </div>
+
−
        <!-- /.container -->
+
−
     </footer>
+
−
 
+
−
    <!-- jQuery -->
+
−
    <script src="js/jquery.js"></script>
+
−
 
+
−
    <!-- Bootstrap Core JavaScript -->
+
−
    <script src="js/bootstrap.min.js"></script>
+
−
 
+
 
</body>
 
</body>
  
 
</html>
 
</html>

Latest revision as of 23:53, 14 September 2015

<!DOCTYPE html>