Team:Virginia/Test

From 2014.igem.org

(Difference between revisions)
Line 2: Line 2:
<html>
<html>
<head>
<head>
-
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
<meta name="viewport" content="width = 1050, user-scalable = no" />
-
  <title>Turn.js responsive book - jsFiddle demo by kmturley</title>
+
<script type="text/javascript" src="http://www.turnjs.com/extras/jquery.min.1.7.js"></script>
-
 
+
<script type="text/javascript" src="http://www.turnjs.com/extras/modernizr.2.5.3.min.js"></script>
-
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
+
-
 
+
-
   
+
-
      <script type='text/javascript' src="http://www.turnjs.com/lib/turn.min.js"></script>
+
-
   
+
-
 
+
-
  <style type='text/css'>
+
-
    html, body {
+
-
    margin: 0;
+
-
    height: 100%;
+
-
}
+
-
#filler{
+
</head>
-
background-color:green;
+
<body>
-
height:100px;
+
-
}
+
-
body.hide-overflow {
+
<div class="flipbook-viewport">
-
    overflow: hidden;
+
<div class="container">
-
}
+
<div class="flipbook">
 +
<div style="background-image:url(https://static.igem.org/mediawiki/2014/3/37/VGEM_44.jpg)"></div>
 +
<div style="background-image:url(https://static.igem.org/mediawiki/2014/f/f6/VGEM_39.jpg)"></div>
 +
<div style="background-image:url(https://static.igem.org/mediawiki/2014/e/e8/VGEM_31.jpg)"></div>
 +
<div style="background-image:url(https://static.igem.org/mediawiki/2014/3/37/VGEM_44.jpg)"></div>
 +
<div style="background-image:url(https://static.igem.org/mediawiki/2014/f/f6/VGEM_39.jpg)"></div>
 +
<div style="background-image:url(https://static.igem.org/mediawiki/2014/e/e8/VGEM_31.jpg)"></div>
 +
</div>
 +
</div>
 +
</div>
-
/* helpers */
 
-
.t {
+
<script type="text/javascript">
-
    display: table;
+
-
    width: 100%;
+
-
    height: 100%;
+
-
}
+
-
.tc {
+
function loadApp() {
-
    display: table-cell;
+
-
    vertical-align: middle;
+
-
    text-align: center;
+
-
}
+
-
.rel {
+
// Create the flipbook
-
    position: relative;
+
-
}
+
-
/* book */
+
$('.flipbook').turn({
 +
// Width
-
.book {
+
width:922,
-
    margin: 0 auto;
+
-
    width: 90%;
+
// Height
-
    height: 90%;
+
-
    -webkit-touch-callout: none;
+
-
    -webkit-user-select: none;
+
-
    -khtml-user-select: none;
+
-
    -moz-user-select: none;
+
-
    -ms-user-select: none;
+
-
    user-select: none;
+
-
}
+
-
.book .page {
+
height:600,
-
    height: 100%;
+
-
}
+
-
.book .page img {
+
// Elevation
-
    max-width: 100%;
+
-
    height: 100%;
+
-
}
+
-
  </style>
+
-
 
+
-
</head>
+
-
<body>
+
-
<div id="filler"></div>
+
elevation: 50,
-
  <div class="t">
+
-
    <div class="tc rel">
+
// Enable gradients
-
        <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>
+
-
 
+
 +
gradients: true,
 +
 +
// Auto center this flipbook
-
<script type='text/javascript'>//<![CDATA[
+
autoCenter: true
-
/*
+
});
-
* Turn.js responsive book
+
}
-
*/
+
-
/*globals window, document, $*/
+
// Load the HTML4 version if there's not CSS transform
-
(function () {
 
-
    'use strict';
 
-
    var module = {
+
$(document).keydown(function(e){
-
        ratio: 1.38,
+
-
        init: function (id) {
+
-
            var me = this;
+
-
            // if older browser then don't run javascript
+
var previous = 37, next = 39, esc = 27;
-
            if (document.addEventListener) {
+
-
                this.el = document.getElementById(id);
+
-
                this.resize();
+
-
                this.plugins();
+
-
                // on window resize, update the plugin size
+
switch (e.keyCode) {
-
                window.addEventListener('resize', function (e) {
+
case previous:
-
                    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,
+
// left arrow
-
                height = Math.round(width / this.ratio),
+
$('.flipbook').turn('previous');
-
                padded = Math.round(document.body.clientHeight * 0.9);
+
e.preventDefault();
-
            // if the height is too big for the window, constrain it
+
break;
-
            if (height > padded) {
+
case next:
-
                height = padded;
+
-
                width = Math.round(height * this.ratio);
+
-
            }
+
-
            // set the width and height matching the aspect ratio
+
//right arrow
-
            this.el.style.width = width + 'px';
+
$('.flipbook').turn('next');
-
            this.el.style.height = height + 'px';
+
e.preventDefault();
-
            return {
+
break;
-
                width: width,
+
case esc:
-
                height: height
+
-
            };
+
$('.flipbook-viewport').zoom('zoomOut');
-
        },
+
e.preventDefault();
-
        plugins: function () {
+
-
            // run the plugin
+
-
            $(this.el).turn({
+
-
                gradients: true,
+
-
                acceleration: true
+
-
            });
+
-
            // hide the body overflow
+
-
          //  document.body.className = 'hide-overflow';
+
-
        }
+
-
    };
+
-
    module.init('book');
+
break;
-
}());
+
}
-
//]]> 
+
});
 +
 
 +
yepnope({
 +
test : Modernizr.csstransforms,
 +
yep: ['http://www.thebalancingact.com/assets/js/turn/lib/turn.js'],
 +
nope: ['http://www.thebalancingact.com/assets/js/turn/lib/turn.html4.min.js'],
 +
both: ['http://www.thebalancingact.com/assets/css/turn/basic/basic.css'],
 +
complete: loadApp
 +
});
</script>
</script>
-
 
</body>
</body>
-
 
-
 
</html>
</html>

Revision as of 04:58, 16 October 2014

Retrieved from "http://2014.igem.org/Team:Virginia/Test"