Team:Dundee/Template/testpage

From 2014.igem.org

(Difference between revisions)
 
(7 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">
-
/* Space out content a bit */
+
html, body {
-
body { padding-top: 20px; }
+
     margin: 0;
-
@media screen and (max-width: 768px) {
+
    height: 100%;
-
     body { padding-top: 40px; }
+
-
}
+
-
/* Everything but the jumbotron gets side spacing for mobile first views */
+
-
.header,
+
-
.marketing,
+
-
.footer {
+
-
  padding-left: 15px;
+
-
  padding-right: 15px;
+
}
}
-
/* Custom page header */
+
body {
-
.header {
+
    background-color: #333;
-
  border-bottom: 1px solid #e5e5e5;
+
-
}
+
-
/* Make the masthead heading the same height as the navigation */
+
-
.header h3 {
+
-
  margin-top: 0;
+
-
  margin-bottom: 0;
+
-
  line-height: 40px;
+
-
  padding-bottom: 19px;
+
}
}
-
/* Custom page footer */
+
body.hide-overflow {
-
.footer {
+
    overflow: hidden;
-
  padding-top: 19px;
+
-
  color: #777;
+
-
  border-top: 1px solid #e5e5e5;
+
}
}
-
/* Customize container */
+
/* helpers */
-
@media (min-width: 768px) {
+
 
-
  .container {
+
.t {
-
     max-width: 730px;
+
     display: table;
-
  }
+
    width: 100%;
 +
    height: 100%;
}
}
-
.container-narrow > hr {
+
 
-
  margin: 30px 0;
+
.tc {
 +
    display: table-cell;
 +
    vertical-align: middle;
 +
    text-align: center;
}
}
-
/* Main marketing message and sign up button */
+
.rel {
-
.jumbotron {
+
    position: relative;
-
  text-align: center;
+
-
  border-bottom: 1px solid #e5e5e5;
+
-
  background: url(http://i.imgur.com/80ZjvKa.png);
+
-
}
+
-
.jumbotron .btn {
+
-
  font-size: 21px;
+
-
  padding: 14px 24px;
+
}
}
-
/* Supporting marketing content */
+
/* book */
-
.marketing {
+
-
  margin: 40px 0;
+
-
}
+
-
.marketing p + h4 {
+
-
  margin-top: 28px;
+
-
}
+
-
/* Responsive: Portrait tablets and up */
+
.book {
-
@media screen and (min-width: 768px) {
+
    margin: 5% auto;
-
  /* Remove the padding we set earlier */
+
    width: 60%;
-
  .header,
+
    height: 60%;
-
  .marketing,
+
    -webkit-touch-callout: none;
-
  .footer {
+
     -webkit-user-select: none;
-
     padding-left: 0;
+
     -khtml-user-select: none;
-
     padding-right: 0;
+
     -moz-user-select: none;
-
  }
+
     -ms-user-select: none;
-
  /* Space out the masthead */
+
    user-select: none;
-
  .header {
+
-
     margin-bottom: 30px;
+
-
  }
+
-
  /* Remove the bottom border on the jumbotron for visual effect */
+
-
  .jumbotron {
+
-
     border-bottom: 0;
+
-
  }
+
}
}
-
section {
+
.book .page {
-
     height: 550px;
+
     height: 100%;
-
    background-color: #eee;
+
-
    padding: 10px;
+
-
    margin: 10px 0;
+
-
+
}
}
-
li.list-group-item {
+
.book .page img {
-
  border: none; 
+
    max-width: 100%;
-
  font-family: Arial;
+
    height: 100%;
-
  margin-top:0px;
+
-
  margin-bottom:0px;
+
-
  padding-top: 0px;
+
-
  padding-bottom:0px;
+
}
}
 +
</style>
 +
</head>
 +
<body>
-
li.list-group-item > a{
+
<div class="t">
-
    color: #000000; 
+
    <div class="tc rel">
-
}   
+
        <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>
-
li.list-group-item:hover > a:hover{
 
-
  border-width:thin;
 
-
  border-left-style:solid;
 
-
  border-left-color: #accfcf;
 
-
  color: #000000;     
 
-
  font-weight:500;
 
-
  border-width:1px;
 
-
  background-color:#ffffff;
 
-
 
 
-
}
 
 +
<script type="text/javascript">
 +
/*
 +
* Turn.js responsive book
 +
*/
-
li.list-group-item.active > a,
+
/*globals window, document, $*/
-
li.list-group-item.active > a:hover,
+
-
li.list-group-item.active > a:focus {
+
-
  border-width:3px;
+
-
  border-left-style:solid;
+
-
  border-left-color: #accfcf; 
+
-
  color: #000000; 
+
-
  font-weight: bold;
+
-
  padding: 3px 8px;
+
-
}
+
-
+
-
</style>
+
-
</head>
+
-
<body data-spy="scroll" data-target="#myScrollspy">
+
-
<div class="container">
+
(function () {
-
<div class="jumbotron">
+
     'use strict';
-
              <h1>Implementation
+
-
            <p class="lead">The wonders of the L.A.S.S.O.</p>
+
-
     </div>
+
-
</div>
+
-
<!-- Begin Body -->
+
     var module = {
-
<div class="row">
+
         ratio: 1.38,
-
     <div class="col-col-sm-3 col-xs-3 col-md-3" id="nav">
+
         init: function (id) {
-
         <ul class="nav list-group affix">
+
            var me = this;
-
            <li class="list-group-item"><a href="#g1" class="">Item 1</a>
+
-
            </li>
+
-
            <li class="list-group-item"><a href="#g2" class="">Item 2</a>
+
-
            </li>
+
-
            <li class="list-group-item"><a href="#g3" class="">Item 3</a>
+
-
                <ul class="nav submenu">
+
-
                    <li class="list-group-item hide"><a href="#g3-1" class="">Item a</a>
+
-
                    </li>
+
-
                    <li class="list-group-item hide"><a href="#g3-2" class="">Item b</a>
+
-
                    </li>
+
-
                </ul>
+
-
            </li>
+
-
            <li class="list-group-item"><a href="#g4" class="">Item 4</a>
+
-
                <ul class="nav submenu">
+
-
                    <li class="list-group-item hide"><a href="#g4-1" class="">Item 4a</a>
+
-
                    </li>
+
-
                    <li class="list-group-item hide"><a href="#g4-2" class="">Item 4b</a>
+
-
                    </li>
+
-
                </ul>
+
-
            </li>
+
-
            <li class="list-group-item"><a href="#g5" class="">Item 5</a>
+
-
            </li>
+
-
        </ul>
+
-
    </div>
+
-
    <div class="col-sm-9 col-xs-9">
+
-
        <section id="g1" class="">Content 1</section>
+
-
        <section id="g2" class="">Content 2</section>
+
-
        <section id="g3" class="">Content 3</section>
+
-
        <section id="g3-1" class="">Content 3.1</section>
+
-
         <section id="g3-2" class="">Content 3.2</section>
+
-
        <section id="g4" class="">Content 4</section>
+
-
        <section id="g4-1" class="">Content 3.1</section>
+
-
        <section id="g4-2" class="">Content 3.2</section>     
+
-
        <section id="g5" class="">Content 5</section>
+
-
    </div>
+
-
</div>
+
-
<div id="push" class=""></div>
+
 +
            // if older browser then don't run javascript
 +
            if (document.addEventListener) {
 +
                this.el = document.getElementById(id);
 +
                this.resize();
 +
                this.plugins();
 +
                // 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 = '';
 +
            var width = this.el.clientWidth,
 +
                height = Math.round(width / this.ratio),
 +
                padded = Math.round(document.body.clientHeight * 0.9);
-
<script>
+
            // if the height is too big for the window, constrain it
 +
            if (height > padded) {
 +
                height = padded;
 +
                width = Math.round(height * this.ratio);
 +
            }
-
  $('body').scrollspy({ 'target': '#nav', 'offset': 10 });
+
            // set the width and height matching the aspect ratio
-
 
+
            this.el.style.width = width + 'px';
-
  $('#nav').on('activate.bs.scrollspy', function() {
+
            this.el.style.height = height + 'px';
-
   
+
 
-
    var ele = $(this).find('.active');
+
            return {
-
   
+
                width: width,
-
    if (ele.find('.submenu').length>0) {
+
                height: height
-
      $('.submenu li').addClass('hide');
+
            };
-
      $('.active>ul.submenu>li').removeClass('hide');
+
        },
-
     }
+
        plugins: function () {
-
     else{
+
            // run the plugin
-
      $('.submenu li').addClass('hide');
+
            $(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"