Team:Virginia/Test

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
{{Template:Team:Virginia:Test}}
{{Template:Team:Virginia:Test}}
 +
<html>
<html>
<head>
<head>
-
<meta name="viewport" content="width = 1050, user-scalable = no" />
+
 
-
<script type="text/javascript" src="http://www.turnjs.com/extras/jquery.min.1.7.js"></script>
+
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.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://www.turnjs.com/lib/turn.min.js"></script>
 +
   
 +
 
 +
  <style type='text/css'>
 +
    body{
 +
    overflow:hidden;
 +
}
-
</head>
+
#flipbook{
-
<body>
+
    width:400px;
 +
    height:300px;
 +
}
-
<div class="flipbook-viewport">
+
#flipbook .page{
-
<div class="container">
+
    width:400px;
-
<div class="flipbook">
+
    height:300px;
-
<div style="background-image:url(https://static.igem.org/mediawiki/2014/3/37/VGEM_44.jpg)"></div>
+
    background-color:white;
-
<div style="background-image:url(https://static.igem.org/mediawiki/2014/f/f6/VGEM_39.jpg)"></div>
+
    line-height:300px;
-
<div style="background-image:url(https://static.igem.org/mediawiki/2014/e/e8/VGEM_31.jpg)"></div>
+
    font-size:20px;
-
<div style="background-image:url(https://static.igem.org/mediawiki/2014/3/37/VGEM_44.jpg)"></div>
+
    text-align:center;
-
<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>
+
 +
#flipbook .page-wrapper{
 +
    -webkit-perspective:2000px;
 +
    -moz-perspective:2000px;
 +
    -ms-perspective:2000px;
 +
    -o-perspective:2000px;
 +
    perspective:2000px;
 +
}
-
<script type="text/javascript">
+
#flipbook .hard{
 +
    background:#ccc !important;
 +
    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;
 +
}
-
function loadApp() {
+
#flipbook .odd{
 +
    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%);
 +
    background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
 +
    background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
 +
    background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
 +
    background-image:linear-gradient(right, #FFF 95%, #C4C4C4 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;
 +
   
 +
}
-
// Create the flipbook
+
#flipbook .even{
-
 
+
    background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
-
$('.flipbook').turn({
+
    background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
-
// Width
+
    background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
-
 
+
    background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
-
width:922,
+
    background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
-
+
    background-image:linear-gradient(left, #fff 95%, #dadada 100%);
-
// Height
+
    -webkit-box-shadow:inset 0 0 5px #666;
-
 
+
    -moz-box-shadow:inset 0 0 5px #666;
-
height:600,
+
    -o-box-shadow:inset 0 0 5px #666;
-
 
+
    -ms-box-shadow:inset 0 0 5px #666;
-
// Elevation
+
    box-shadow:inset 0 0 5px #666;
-
 
+
-
elevation: 50,
+
-
+
-
// Enable gradients
+
-
 
+
-
gradients: true,
+
-
+
-
// Auto center this flipbook
+
-
 
+
-
autoCenter: true
+
-
 
+
-
});
+
}
}
 +
  </style>
 +
 
-
// Load the HTML4 version if there's not CSS transform
 
 +
<script type='text/javascript'>//<![CDATA[
 +
$(function(){
 +
$("#flipbook").turn({
 +
    width: 400,
 +
    height: 300,
 +
    autoCenter: true
 +
});
 +
});//]]> 
-
$(document).keydown(function(e){
+
</script>
-
var previous = 37, next = 39, esc = 27;
 
-
switch (e.keyCode) {
+
</head>
-
case previous:
+
<body>
 +
  <center><div id="flipbook">
 +
    <div class="hard"> Turn.js </div>
 +
    <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></center>
-
// left arrow
+
 
-
$('.flipbook').turn('previous');
+
</body>
-
e.preventDefault();
+
-
break;
 
-
case next:
 
-
//right arrow
 
-
$('.flipbook').turn('next');
 
-
e.preventDefault();
 
-
 
-
break;
 
-
case esc:
 
-
 
-
$('.flipbook-viewport').zoom('zoomOut');
 
-
e.preventDefault();
 
-
 
-
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>
 
-
 
-
</body>
 
</html>
</html>

Revision as of 05:11, 16 October 2014

Turn.js
Page 1
Page 2
Page 3
Page 4

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