Difference between revisions of "Team:Cornell/sandbox"

 
(12 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',
−
<style>
+
animateOnCLick: true,
−
/* -----------------------------------------
+
triggerUp: null,
−
iGEM Reset
+
triggerDown: null,
−
----------------------------------------- */
+
complete: null,
−
.mediawiki {
+
before: null,
−
background: #f7f7f7;
+
after: null
−
}
+
}, options);
−
+
−
#globalWrapper {
+
var windowWidth = this.parent().width(),
−
background-color: transparent;
+
windowHeight = this.parent().height(),
−
border: none;
+
zIndexI = settings.zindex,
−
margin: 0;
+
children = this.children(),
−
padding: 0;
+
nbChild = children.length,
−
width: 100%;
+
childWidth = $(children[0]).width(),
−
height: 100%;
+
childHeight = $(children[0]).height(),
−
margin-top: -10px;
+
positions = [],
−
font-size: 100%;
+
animationCounter = 0;
−
}
+
−
#content {
+
var animate = function(direction){
−
background-color: transparent;
+
if(typeof direction != 'string'){
−
border: none;
+
direction = settings.direction;
−
padding: 0;
+
}
−
margin: 0;
+
−
width: 100%;
+
if(animationCounter == 0){
−
overflow: visible;
+
var $e = $(this);
−
height: 100%;
+
−
line-height: inherit;
+
// for each child of main collection
−
color: rgb(70, 70, 70);
+
children.each(function(index, element){
−
}
+
var $c = $(element),
−
#bodyContent {
+
dataIndex = parseInt($c.attr('data-index'))
−
border: none;
+
newIndex = 0,
−
padding: 0px;
+
down = null,
−
margin: 0px;
+
animTop = '',
−
width: 100%;
+
animLeft = '';
−
height: 100%;
+
−
potition: relative;
+
if(direction == 'up'){// up
−
}
+
newIndex = nbChild-1;
−
#top-section {
+
down = true;
−
width: 65%;
+
if(dataIndex > 0){
−
position: absolute;
+
newIndex = dataIndex-1;
−
z-index: 5000;
+
down = false;
−
height: 15px;
+
}
−
margin-left: 150px;
+
}else{ // down
−
margin-right: auto;
+
newIndex = 0;
−
margin-bottom: 0 !important;
+
down = false
−
padding: 0;
+
if(dataIndex < (nbChild-1)){
−
border: none;
+
newIndex = dataIndex+1;
−
font-size: 10px;
+
down = true;
−
}
+
}
−
#p-logo {
+
}
−
height: 1px;
+
−
overflow: hidden;
+
// Change data index
−
display: none;
+
$c.attr('data-index', newIndex);
−
}
+
−
#search-controls {
+
// Trigger before method
−
overflow: hidden;
+
if(typeof settings.before == 'function'){
−
display: block;
+
settings.before(index, element);
−
background: none;
+
}
−
position: absolute;
+
−
top: 100px;
+
if(!down){
−
right: 40px;
+
animTop = '-='+($c.position().top - positions[newIndex].top);
−
}
+
animLeft = '-='+($c.position().left - positions[newIndex].left);
−
 
+
}else{
−
#menubar {
+
if(direction == 'up'){
−
top: 0px;
+
animTop = '+='+($c.position().top + positions[newIndex].top);
−
}
+
animLeft = '+='+($c.position().left + positions[newIndex].left);
−
 
+
}else{
−
#menubar.left-menu {
+
animTop = '+='+(positions[newIndex].top - $c.position().top);
−
/* margin-top: -80px; uncomment this when page goes live */
+
animLeft = '+='+(positions[newIndex].left - $c.position().left);
−
background: none;
+
}
−
height: 20px;
+
}
−
left: 20px;
+
−
float: left;
+
animationCounter++;
−
}
+
−
.left-menu ul {
+
// change z-index
−
visibility: visible;
+
if(direction == 'up'){
−
}
+
$c.css('z-index', positions[newIndex].zindex);
−
 
+
}else{// delay z-index
−
.left-menu ul li a {
+
var ozIndex = {
−
color: #666;
+
zindex : positions[newIndex].zindex   
−
}
+
};
−
 
+
setTimeout(function(){
−
.left-menu li a:hover {
+
$c.css('z-index', ozIndex.zindex);
−
color: #aaaaff !important;
+
}, settings.duration);
−
text-decoration: none;
+
}
−
}
+
−
#menubar.right-menu {
+
// Animate slides
−
display: block;
+
$c.animate({
−
width: 300px;
+
left: animLeft,
−
float: left;
+
top: animTop
−
margin-top: 2px;
+
}, settings.duration, settings.easing, function(){
−
margin-right: 0px;
+
if(animationCounter > 0){
−
border: none;
+
animationCounter --;
−
}
+
}
−
.right-menu ul {
+
});
−
width: 300px;
+
// Trigger before method
−
margin: 0px;
+
if(typeof settings.before == 'function'){
−
visibility: visible;
+
setTimeout(function(){
−
}
+
settings.after(index, element);
−
.right-menu ul li a {
+
}, settings.duration);
−
background: none;
+
}
−
color: #666;
+
−
}
+
});
−
 
+
// Trigger complete method
−
.right-menu:hover {
+
if(typeof settings.complete == 'function'){
−
color: white;
+
setTimeout(settings.complete, settings.duration);
−
}
+
}
−
 
+
}
−
#footer-box {
+
};
−
width: 100%;
+
−
margin: -10px auto 0 auto;
+
// Initilize First Position
−
padding: 20px 0;
+
children.each(function(index, element){
−
display: none; /* uncomment when page goes live */
+
var $e = $(element);
−
}
+
zIndexI--;
−
.visualClear {
+
−
display: none;
+
// Calculate position of each slide
−
}
+
var left = (((windowWidth-(childWidth))/(nbChild-1))*index);
−
#footer {
+
var top = (((windowHeight-(childHeight))/(nbChild-1))*index);
−
border: none;
+
−
width: 965px;
+
positions[index] = {
−
margin: 0 auto;
+
'top':top,
−
padding: 0;
+
'left':left,
−
}
+
'zindex':zIndexI
−
.firstHeading {
+
};
−
display: none;
+
−
}
+
// Position slides
−
#f-list a {
+
$e.css('top', top)
−
color: #333;
+
.css('left', left)
−
font-size: 10px;
+
.css('z-index', zIndexI)
−
}
+
.attr('data-index', index);
−
#f-list a:hover {
+
});
−
color: #666;
+
−
}
+
//Manage Click
−
.printfooter {
+
if(settings.animateOnCLick){
−
display: none;
+
children.click(animate);
−
}
+
}
−
#footer ul {
+
−
margin: 0;
+
if(settings.triggerUp != null){
−
padding: 0;
+
var $triggerUp = $(settings.triggerUp);
−
}
+
if($triggerUp.length > 0){
−
#footer ul li {
+
$triggerUp.click(function(){
−
margin-top: 0;
+
animate('up');
−
margin-bottom: 0;
+
});
−
margin-left: 10px;
+
}
−
margin-right: 10px;
+
}
−
padding: 0;
+
−
}
+
if(settings.triggerDown != null){
−
#search-controls {
+
var $triggerDown = $(settings.triggerDown);
−
display: none;
+
if($triggerDown.length > 0){
−
}
+
$triggerDown.click(function(){
−
h3#siteSub {
+
animate('down');
−
display: none;
+
});
−
}
+
}
−
#contentSub {
+
}
−
display: none;
+
−
}
+
return this;
−
p:first-child {
+
};
−
display: none;
+
−
}
+
}(jQuery));
−
#catlinks {
+
−
display: none;
+
$('.turniquet').turniquet();
−
}
+
</script>
−
#footer-box {
+
<style type="text/css">
−
width: 977px;
+
.jumbotron {
−
margin-bottom: 20px;
+
position: relative;
−
}
+
height: 600px;
−
/*-------------------------------*/
+
}
−
</style>
+
.turniquet {
−
 
+
position: relative;
−
    <!-- Custom CSS -->
+
margin:0;
−
    <link href="css/full-width-pics.css" rel="stylesheet">
+
}
−
 
+
.turniquet li {
−
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+
position:absolute;
−
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+
display:block;
−
    <!--[if lt IE 9]>
+
width:350px;
−
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+
height:350px;
−
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+
list-style: none;
−
    <![endif]-->
+
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>