Team:Virginia/Test

From 2014.igem.org

(Difference between revisions)
 
(39 intermediate revisions not shown)
Line 1: Line 1:
-
{{Template:Team:Virginia:Test}}
 
-
<!DOCTYPE html>
 
<html>
<html>
<head>
<head>
-
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
-
  <title>Turn.js responsive book - jsFiddle demo by kmturley</title>
+
<script type="text/javascript" src="https://2013.igem.org/Team:UNITN-Trento/JS/Library/modernizr?action=raw&ctype=text/javascript"></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{
+
-
background-color:green;
+
-
height:100px;
+
-
}
+
-
 
+
-
body.hide-overflow {
+
-
    overflow: hidden;
+
-
}
+
-
 
+
-
/* helpers */
+
-
 
+
-
.t {
+
-
    display: table;
+
-
    width: 100%;
+
-
    height: 100%;
+
-
}
+
-
 
+
-
.tc {
+
-
    display: table-cell;
+
-
    vertical-align: middle;
+
-
    text-align: center;
+
-
}
+
-
 
+
-
.rel {
+
-
    position: relative;
+
-
}
+
-
 
+
-
/* book */
+
-
 
+
-
.book {
+
-
    margin: 0 auto;
+
-
    width: 90%;
+
-
    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: 100%;
+
-
}
+
-
 
+
-
.book .page img {
+
-
    max-width: 100%;
+
-
    height: 100%;
+
-
}
+
-
  </style>
+
-
 
+
</head>
</head>
<body>
<body>
-
<div id="filler"></div>
+
<div class="flipbook-viewport">
-
  <div class="t">
+
<div class="container">
-
    <div class="tc rel">
+
<div class="flipbook">
-
        <div class="book" id="book">
+
<div style="background-image:url(pages/1.jpg)"></div>
-
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg" alt="" /></div>
+
<div style="background-image:url(pages/2.jpg)"></div>
-
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg" alt="" /></div>
+
</div>
-
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg" alt="" /></div>
+
</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>
</div>
-
 
 
-
<script type='text/javascript'>//<![CDATA[
+
<script type="text/javascript">
-
/*
+
function loadApp() {
-
* Turn.js responsive book
+
-
*/
+
-
/*globals window, document, $*/
+
// Create the flipbook
-
(function () {
+
$('.flipbook').turn({
-
    'use strict';
+
// Width
-
    var module = {
+
width:922,
-
        ratio: 1.38,
+
-
        init: function (id) {
+
// Height
-
            var me = this;
+
-
            // if older browser then don't run javascript
+
height:600,
-
            if (document.addEventListener) {
+
-
                this.el = document.getElementById(id);
+
-
                this.resize();
+
-
                this.plugins();
+
-
                // on window resize, update the plugin size
+
// Elevation
-
                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,
+
elevation: 50,
-
                height = Math.round(width / this.ratio),
+
-
                padded = Math.round(document.body.clientHeight * 0.9);
+
// Enable gradients
-
            // if the height is too big for the window, constrain it
+
gradients: true,
-
            if (height > padded) {
+
-
                height = padded;
+
// Auto center this flipbook
-
                width = Math.round(height * this.ratio);
+
-
            }
+
-
            // set the width and height matching the aspect ratio
+
autoCenter: true
-
            this.el.style.width = width + 'px';
+
-
            this.el.style.height = height + 'px';
+
-
            return {
+
});
-
                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');
+
// Load the HTML4 version if there's not CSS transform
-
}());
+
 
-
//]]> 
+
yepnope({
 +
test : Modernizr.csstransforms,
 +
yep: ['../../lib/turn.js'],
 +
nope: ['../../lib/turn.html4.min.js'],
 +
both: ['css/basic.css'],
 +
complete: loadApp
 +
});
</script>
</script>
-
 
</body>
</body>
-
 
-
 
</html>
</html>

Latest revision as of 07:43, 15 November 2014

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