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">
 +
  <title>Turn.js responsive book - jsFiddle demo by kmturley</title>
 +
 
 +
  <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%;
 +
}
-
<script type = "text/javascript" src="http://www.turnjs.com/lib/turn.min.js"></script>
+
body {
-
<script type="text/javascript" src="http://www.turnjs.com/extras/jquery.min.1.7.js"></script>
+
     background-color: #333;
-
<script type="text/javascript" src="http://www.turnjs.com/extras/modernizr.2.5.3.min.js"></script>
+
-
<style>
+
-
body{
+
-
     overflow:hidden;
+
}
}
-
#flipbook{
+
body.hide-overflow {
-
     width:400px;
+
     overflow: hidden;
-
    height:300px;
+
}
}
-
#flipbook .page{
+
/* helpers */
-
     width:400px;
+
 
-
     height:300px;
+
.t {
-
     background-color:white;
+
     display: table;
-
    line-height:300px;
+
     width: 100%;
-
    font-size:20px;
+
     height: 100%;
-
    text-align:center;
+
}
}
-
#flipbook .page-wrapper{
+
.tc {
-
     -webkit-perspective:2000px;
+
     display: table-cell;
-
    -moz-perspective:2000px;
+
     vertical-align: middle;
-
     -ms-perspective:2000px;
+
     text-align: center;
-
     -o-perspective:2000px;
+
-
    perspective:2000px;
+
}
}
-
#flipbook .hard{
+
.rel {
-
     background:#ccc !important;
+
     position: relative;
-
    color:#333;
+
-
    -webkit-box-shadow:inset 0 0 5px #666;
+
-
    -moz-box-shadow:inset 0 0 5px #666;
+
-
    -o-box-shadow:inset 0 0 5px #666;
+
-
    -ms-box-shadow:inset 0 0 5px #666;
+
-
    box-shadow:inset 0 0 5px #666;
+
-
    font-weight:bold;
+
}
}
-
#flipbook .odd{
+
/* book */
-
     background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
+
 
-
     background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
+
.book {
-
     background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
+
     margin: 0 auto;
-
     background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
+
     width: 90%;
-
    background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
+
     height: 90%;
-
    background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%);
+
     -webkit-touch-callout: none;
-
     -webkit-box-shadow:inset 0 0 5px #666;
+
     -webkit-user-select: none;
-
     -moz-box-shadow:inset 0 0 5px #666;
+
     -khtml-user-select: none;
-
     -o-box-shadow:inset 0 0 5px #666;
+
     -moz-user-select: none;
-
     -ms-box-shadow:inset 0 0 5px #666;
+
     -ms-user-select: none;
-
     box-shadow:inset 0 0 5px #666;
+
     user-select: none;
-
   
+
}
}
-
#flipbook .even{
+
.book .page {
-
     background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
+
     height: 100%;
-
    background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
+
-
    background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
+
-
    background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
+
-
    background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
+
-
    background-image:linear-gradient(left, #fff 95%, #dadada 100%);
+
-
    -webkit-box-shadow:inset 0 0 5px #666;
+
-
    -moz-box-shadow:inset 0 0 5px #666;
+
-
    -o-box-shadow:inset 0 0 5px #666;
+
-
    -ms-box-shadow:inset 0 0 5px #666;
+
-
    box-shadow:inset 0 0 5px #666;
+
}
}
-
</style>
 
 +
.book .page img {
 +
    max-width: 100%;
 +
    height: 100%;
 +
}
 +
  </style>
 +
 
 +
</head>
<body>
<body>
 +
  <div class="t">
 +
    <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>
 +
 
-
<div id="filler">
 
-
</div>
+
<script type='text/javascript'>//<![CDATA[
-
<div id="flipbook">
+
/*
-
  <div class="hard"> Turn.js </div>
+
* Turn.js responsive book
-
  <div class="hard"></div>
+
*/
-
  <div> Page 1 </div>
+
-
  <div> Page 2 </div>
+
-
  <div> Page 3 </div>
+
-
  <div> Page 4 </div>
+
-
  <div class="hard"></div>
+
-
  <div class="hard"></div>
+
-
</div>
+
 +
/*globals window, document, $*/
-
<script type="text/javascript">
+
(function () {
-
$("#flipbook").turn({
+
    'use strict';
-
  width: 400,
+
 
-
  height: 300,
+
    var module = {
-
  autoCenter: true
+
        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();
 +
 
 +
                // 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);
 +
 
 +
            // if the height is too big for the window, constrain it
 +
            if (height > padded) {
 +
                height = padded;
 +
                width = Math.round(height * this.ratio);
 +
            }
 +
 
 +
            // set the width and height matching the aspect ratio
 +
            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');
 +
}());
 +
//]]> 
</script>
</script>
 +
</body>
</body>
 +
 +
</html>
</html>

Revision as of 04:29, 16 October 2014

Turn.js responsive book - jsFiddle demo by kmturley

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