Team:Dundee/Template/testpage

From 2014.igem.org

(Difference between revisions)
 
(32 intermediate revisions not shown)
Line 4: Line 4:
<head>
<head>
-
<link href="https://2014.igem.org/Team:Dundee/bootstrap?action=raw&ctype=text/css" rel="stylesheet">
+
<title>Dundee 2014 Team</title>
 +
 
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      
 +
 +
  <link href="https://2014.igem.org/Team:Dundee/stylesheet/notebook?action=raw&ctype=text/css" rel="stylesheet">
 +
 +
  <link href="https://2014.igem.org/Team:Dundee/stylesheet?action=raw&ctype=text/css" rel="stylesheet">
 +
  <link href="https://2014.igem.org/Team:Dundee/bootstrap?action=raw&ctype=text/css" rel="stylesheet">
 +
 
 +
 +
<!-- jQuery -->
<!-- jQuery -->
-
<script src="https://2014.igem.org/Team:Dundee/js/jquery-js?action=raw&ctype=text/javascript"></script>       
+
<script src="https://2014.igem.org/Team:Dundee/js/jquery-js?action=raw&ctype=text/javascript"></script>  
-
<!-- Bootstrap -->
+
-
<script src="https://2014.igem.org/Team:Dundee/js/bootstrap-js?action=raw&ctype=text/javascript"></script>
+
      
      
-
<style>
+
<!-- Turn js -->
 +
<script src="https://2014.igem.org/Team:Dundee/js/turn-js?action=raw&ctype=text/javascript"></script>  
 +
<style type="text/css">
-
.jumbotron{
+
html, body {
-
  height: 300px;
+
    margin: 0;
-
  background: black;  
+
    height: 100%;
-
  color: white;
+
-
+
}
}
-
1, h2, h3, h4, h5, h6 {
+
body {
-
border-bottom: none;
+
    background-color: #333;
}
}
-
h2{
+
body.hide-overflow {
-
     padding-top: 80px; margin-top: -80px;
+
     overflow: hidden;
-
}   
+
-
 
+
-
#masthead {
+
-
min-height:270px;
+
-
background-color:#000044;
+
-
  color:#aaaacc;
+
}
}
 +
/* helpers */
-
/* hide sidebar sub menus by default */
+
.t {
-
#sidebar.nav .nav {
+
    display: table;
-
display: none;
+
    width: 100%;
-
     font-size:12px;
+
     height: 100%;
}
}
-
/* show sub menu when parent is active */
+
.tc {
-
#sidebar.nav>.active>ul {
+
    display: table-cell;
-
display: block;
+
    vertical-align: middle;
 +
    text-align: center;
}
}
-
 
+
.rel {
-
.navbar-bright {
+
     position: relative;
-
background-color:#111155;
+
-
     color:#fff;
+
-
}
+
-
 
+
-
.navbar-bright a, #masthead a, #masthead .lead {
+
-
  color:#aaaacc;
+
}
}
-
.navbar-bright li > a:hover {
+
/* book */
-
    background-color:#000033;
+
-
}
+
-
.affix-top,.affix{
+
.book {
-
position: static;
+
    margin: 5% auto;
 +
    width: 60%;
 +
    height: 60%;
 +
    -webkit-touch-callout: none;
 +
    -webkit-user-select: none;
 +
    -khtml-user-select: none;
 +
    -moz-user-select: none;
 +
    -ms-user-select: none;
 +
    user-select: none;
}
}
-
@media (min-width: 979px) {
+
.book .page {
-
  #sidebar.affix-top {
+
     height: 100%;
-
    position: static;
+
-
  margin-top:30px;
+
-
  width:228px;
+
-
  }
+
-
 
+
-
  #sidebar.affix {
+
-
     position: fixed;
+
-
    top:70px;
+
-
    width:228px;
+
-
  }
+
}
}
-
#sidebar li.active {
+
.book .page img {
-
  border:0 #eee solid;
+
    max-width: 100%;
-
  border-right-width:4px;
+
    height: 100%;
}
}
-
 
</style>
</style>
</head>
</head>
-
<body data-spy="scroll" data-target="#myScrollspy">
+
<body>
-
<div class="jumbotron">
+
<div class="t">
-
              <h1>Implementation
+
    <div class="tc rel">
-
             <p class="lead">The wonders of the L.A.S.S.O.</p>
+
        <div class="book" id="book">
 +
             <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/05.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/06.jpg" alt="" /></div>
 +
        </div>
     </div>
     </div>
-
 
-
 
-
<!-- Begin Body -->
 
-
<div class="container">
 
-
<div class="row">
 
-
  <div class="col-md-3" id="leftCol">
 
-
             
 
-
              <ul class="nav nav-stacked" id="sidebar">
 
-
                  <li>
 
-
                    <a href="#sec0">Section 0</a>
 
-
                  <ul class="nav">
 
-
                      <li class=""><a href="#">- Sub 1</a></li>
 
-
                      <li class=""><a href="#">- Sub 2</a></li>
 
-
                    </ul>
 
-
                  </li>
 
-
                  <li>
 
-
                    <a href="#sec1">Section 1</a>
 
-
                    <ul class="nav">
 
-
                      <li class=""><a href="#">- Sub 1</a></li>
 
-
                      <li class=""><a href="#">- Sub 2</a></li>
 
-
                      <li class=""><a href="#">- Sub 3</a></li>
 
-
                    </ul>
 
-
                  </li>
 
-
                  <li><a href="#sec2">Section 2</a></li>
 
-
                  <li><a href="#sec3">Section 3</a></li>
 
-
                  <li><a href="#sec4">Section 4</a></li>
 
-
              </ul>
 
-
             
 
-
      </div> 
 
-
      <div class="col-md-9">
 
-
              <h2 id="sec0">Content</h2>
 
-
                At Bootply we like to build simple Bootstrap templates that utilize the code Bootstap CSS without a lot of customization. Sure you can
 
-
              find a lot of Bootstrap themes and inspiration, but these templates tend to be heavy on customization.
 
-
             
 
-
           
 
-
         
 
-
              <hr class="col-md-12">
 
-
              Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
 
-
                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
 
-
                eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
 
-
                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 
-
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.             
 
-
              Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
 
-
                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
 
-
                eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
 
-
                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 
-
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut!
 
-
             
 
-
             
 
-
             
 
-
              <h2 id="sec1">Content</h2>
 
-
              <p>
 
-
                Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
 
-
                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut.
 
-
              </p>
 
-
              <div class="row">
 
-
                  <div class="col-md-6">
 
-
                    <div class="panel panel-default">
 
-
                      <div class="panel-heading"><h3>Hello.</h3></div>
 
-
                      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
 
-
                      Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
 
-
                      dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
 
-
                      Aliquam in felis sit amet augue.
 
-
                      </div>
 
-
                    </div>
 
-
                  </div>
 
-
                  <div class="col-md-6">
 
-
                      <div class="panel panel-default">
 
-
                      <div class="panel-heading"><h3>Hello.</h3></div>
 
-
                      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
 
-
                      Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
 
-
                      dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
 
-
                      Aliquam in felis sit amet augue.
 
-
                      </div>
 
-
                    </div>
 
-
                  </div> 
 
-
              </div>
 
-
             
 
-
              <hr>
 
-
             
 
-
              <h2 id="sec2">Section 2</h2>
 
-
              <p>
 
-
                Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
 
-
                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
 
-
                eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
 
-
                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 
-
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut!
 
-
              </p>
 
-
              <div class="row">
 
-
              <div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
 
-
                  <div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
 
-
                  <div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
 
-
              </div>
 
-
             
 
-
              <hr>
 
-
             
 
-
              <h2 id="sec3">Section 3</h2>
 
-
      Images are responsive sed @mdo but sum are more fun peratis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
 
-
                totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
 
-
                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
 
-
                eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
 
-
                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 
-
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
 
-
             
 
-
              <h2 id="sec4">Section 4</h2>
 
-
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
 
-
                totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
 
-
                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
 
-
                eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
 
-
                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 
-
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
 
-
             
 
-
             
 
-
              <hr>
 
-
              <h4><a href="http://bootply.com/75781">Edit on Bootply</a></h4>
 
-
              <hr>
 
-
             
 
-
             
 
-
      </div>
 
-
  </div>
 
</div>
</div>
 +
<script type="text/javascript">
 +
 +
/*
 +
* Turn.js responsive book
 +
*/
 +
 +
/*globals window, document, $*/
 +
 +
(function () {
 +
    'use strict';
 +
 +
    var module = {
 +
        ratio: 1.38,
 +
        init: function (id) {
 +
            var me = this;
 +
            // if older browser then don't run javascript
 +
            if (document.addEventListener) {
 +
                this.el = document.getElementById(id);
 +
                this.resize();
 +
                this.plugins();
-
<script>
+
                // on window resize, update the plugin size
 +
                window.addEventListener('resize', function (e) {
 +
                    var size = me.resize();
 +
                    $(me.el).turn('size', size.width, size.height);
 +
                });
 +
            }
 +
        },
 +
        resize: function () {
 +
            // reset the width and height to the css defaults
 +
            this.el.style.width = '';
 +
            this.el.style.height = '';
-
$('#sidebar').affix({
+
            var width = this.el.clientWidth,
-
      offset: {
+
                height = Math.round(width / this.ratio),
-
        top: 245
+
                padded = Math.round(document.body.clientHeight * 0.9);
-
      }
+
-
});
+
-
var $body  = $(document.body);
+
            // if the height is too big for the window, constrain it
-
var navHeight = $('.navbar').outerHeight(true) + 10;
+
            if (height > padded) {
 +
                height = padded;
 +
                width = Math.round(height * this.ratio);
 +
            }
-
$body.scrollspy({
+
            // set the width and height matching the aspect ratio
-
target: '#leftCol',
+
            this.el.style.width = width + 'px';
-
offset: navHeight
+
            this.el.style.height = height + 'px';
-
});
+
-
</script>
+
-
</body>
+
            return {
-
</html>
+
                width: width,
 +
                height: height
 +
            };
 +
        },
 +
        plugins: function () {
 +
            // run the plugin
 +
            $(this.el).turn({
 +
                gradients: true,
 +
                acceleration: true
 +
            });
 +
            // hide the body overflow
 +
            document.body.className = 'hide-overflow';
 +
        }
 +
    };
 +
    module.init('book');
 +
}());
</script>
</script>

Latest revision as of 22:49, 14 October 2014

Dundee 2014

Dundee 2014

Dundee 2014 Team

Retrieved from "http://2014.igem.org/Team:Dundee/Template/testpage"