Team:Virginia/Test

From 2014.igem.org

(Difference between revisions)
 
(47 intermediate revisions not shown)
Line 1: Line 1:
-
{{Template:Team:Virginia:Test}}
 
<html>
<html>
<head>
<head>
 +
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
 +
<script type="text/javascript" src="https://2013.igem.org/Team:UNITN-Trento/JS/Library/modernizr?action=raw&ctype=text/javascript"></script>
 +
</head>
 +
<body>
-
<script type = "text/javascript" src="http://www.turnjs.com/lib/turn.min.js"></script>
+
<div class="flipbook-viewport">
-
<script type="text/javascript" src="http://www.turnjs.com/extras/jquery.min.1.7.js"></script>
+
<div class="container">
-
<script type="text/javascript" src="http://www.turnjs.com/extras/modernizr.2.5.3.min.js"></script>
+
<div class="flipbook">
-
<style>
+
<div style="background-image:url(pages/1.jpg)"></div>
-
body{
+
<div style="background-image:url(pages/2.jpg)"></div>
-
    overflow:hidden;
+
</div>
-
}
+
</div>
 +
</div>
-
#flipbook{
 
-
    width:400px;
 
-
    height:300px;
 
-
}
 
-
#flipbook .page{
+
<script type="text/javascript">
-
    width:400px;
+
-
    height:300px;
+
-
    background-color:white;
+
-
    line-height:300px;
+
-
    font-size:20px;
+
-
    text-align:center;
+
-
}
+
-
#flipbook .page-wrapper{
+
function loadApp() {
-
    -webkit-perspective:2000px;
+
-
    -moz-perspective:2000px;
+
-
    -ms-perspective:2000px;
+
-
    -o-perspective:2000px;
+
-
    perspective:2000px;
+
-
}
+
-
#flipbook .hard{
+
// Create the flipbook
-
    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;
+
-
}
+
-
#flipbook .odd{
+
$('.flipbook').turn({
-
    background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
+
// Width
-
    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;
+
-
   
+
-
}
+
-
#flipbook .even{
+
width:922,
-
    background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
+
-
    background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
+
// Height
-
    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>
+
-
<body>
+
height:600,
-
<div id="filler">
+
// Elevation
-
</div>
+
elevation: 50,
 +
 +
// Enable gradients
-
<div id="flipbook">
+
gradients: true,
-
  <div class="hard"> Turn.js </div>
+
-
  <div class="hard"></div>
+
// Auto center this flipbook
-
  <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>
+
 +
autoCenter: true
-
<script type="text/javascript">
+
});
-
$("#flipbook").turn({
+
}
-
  width: 400,
+
 
-
  height: 300,
+
// Load the HTML4 version if there's not CSS transform
-
  autoCenter: true
+
 
 +
yepnope({
 +
test : Modernizr.csstransforms,
 +
yep: ['../../lib/turn.js'],
 +
nope: ['../../lib/turn.html4.min.js'],
 +
both: ['css/basic.css'],
 +
complete: loadApp
});
});

Latest revision as of 07:43, 15 November 2014

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