Team:AUC Turkey/test
From 2012hs.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<html> | <html> | ||
<head> | <head> | ||
- | <script src="http:// | + | <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> |
- | < | + | <script type="text/javascript" src="http://turnjs.com/lib/turn.min.js"></script> |
+ | |||
+ | <style type="text/css"> | ||
+ | body{ | ||
+ | background:#ccc; | ||
+ | } | ||
+ | #book{ | ||
+ | width:800px; | ||
+ | height:500px; | ||
+ | } | ||
+ | |||
+ | #book .turn-page{ | ||
+ | background-color:white; | ||
+ | } | ||
+ | |||
+ | #book .cover{ | ||
+ | background:#333; | ||
+ | } | ||
+ | |||
+ | #book .cover h1{ | ||
+ | color:white; | ||
+ | text-align:center; | ||
+ | font-size:50px; | ||
+ | line-height:500px; | ||
+ | margin:0px; | ||
+ | } | ||
+ | |||
+ | #book .loader{ | ||
+ | background-image:url(loader.gif); | ||
+ | width:24px; | ||
+ | height:24px; | ||
+ | display:block; | ||
+ | position:absolute; | ||
+ | top:238px; | ||
+ | left:188px; | ||
+ | } | ||
+ | |||
+ | #book .data{ | ||
+ | text-align:center; | ||
+ | font-size:40px; | ||
+ | color:#999; | ||
+ | line-height:500px; | ||
+ | } | ||
+ | |||
+ | #controls{ | ||
+ | width:800px; | ||
+ | text-align:center; | ||
+ | margin:20px 0px; | ||
+ | font:30px arial; | ||
+ | } | ||
+ | |||
+ | #controls input, #controls label{ | ||
+ | font:30px arial; | ||
+ | } | ||
+ | |||
+ | #book .odd{ | ||
+ | background-image:-webkit-linear-gradient(left, #FFF 95%, #ddd 100%); | ||
+ | background-image:-moz-linear-gradient(left, #FFF 95%, #ddd 100%); | ||
+ | background-image:-o-linear-gradient(left, #FFF 95%, #ddd 100%); | ||
+ | background-image:-ms-linear-gradient(left, #FFF 95%, #ddd 100%); | ||
+ | } | ||
+ | |||
+ | #book .even{ | ||
+ | background-image:-webkit-linear-gradient(right, #FFF 95%, #ddd 100%); | ||
+ | background-image:-moz-linear-gradient(right, #FFF 95%, #ddd 100%); | ||
+ | background-image:-o-linear-gradient(right, #FFF 95%, #ddd 100%); | ||
+ | background-image:-ms-linear-gradient(right, #FFF 95%, #ddd 100%); | ||
+ | } | ||
+ | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
- | + | ||
- | + | <div id="book"> | |
- | <div class=" | + | <div class="cover"><h1>The Bible</h1></div> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</div> | </div> | ||
+ | |||
+ | <div id="controls"> | ||
+ | <label for="page-number">Page:</label> <input type="text" size="3" id="page-number"> of <span id="number-pages"></span> | ||
+ | </div> | ||
+ | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | $( | + | |
- | + | // Sample using dynamic pages with turn.js | |
- | + | ||
- | + | var numberOfPages = 1000; | |
+ | |||
+ | |||
+ | // Adds the pages that the book will need | ||
+ | function addPage(page, book) { | ||
+ | // First check if the page is already in the book | ||
+ | if (!book.turn('hasPage', page)) { | ||
+ | // Create an element for this page | ||
+ | var element = $('<div />', {'class': 'page '+((page%2==0) ? 'odd' : 'even'), 'id': 'page-'+page}).html('<i class="loader"></i>'); | ||
+ | // If not then add the page | ||
+ | book.turn('addPage', element, page); | ||
+ | // Let's assum that the data is comming from the server and the request takes 1s. | ||
+ | setTimeout(function(){ | ||
+ | element.html('<div class="data">Data for page '+page+'</div>'); | ||
+ | }, 1000); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | $(window).ready(function(){ | ||
+ | $('#book').turn({acceleration: true, | ||
+ | pages: numberOfPages, | ||
+ | elevation: 50, | ||
+ | gradients: !$.isTouch, | ||
+ | when: { | ||
+ | turning: function(e, page, view) { | ||
+ | |||
+ | // Gets the range of pages that the book needs right now | ||
+ | var range = $(this).turn('range', page); | ||
+ | |||
+ | // Check if each page is within the book | ||
+ | for (page = range[0]; page<=range[1]; page++) | ||
+ | addPage(page, $(this)); | ||
+ | |||
+ | }, | ||
+ | |||
+ | turned: function(e, page) { | ||
+ | $('#page-number').val(page); | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | $('#number-pages').html(numberOfPages); | ||
+ | |||
+ | $('#page-number').keydown(function(e){ | ||
+ | |||
+ | if (e.keyCode==13) | ||
+ | $('#book').turn('page', $('#page-number').val()); | ||
+ | |||
+ | }); | ||
+ | }); | ||
+ | |||
+ | $(window).bind('keydown', function(e){ | ||
+ | |||
+ | if (e.target && e.target.tagName.toLowerCase()!='input') | ||
+ | if (e.keyCode==37) | ||
+ | $('#book').turn('previous'); | ||
+ | else if (e.keyCode==39) | ||
+ | $('#book').turn('next'); | ||
+ | |||
}); | }); | ||
+ | |||
</script> | </script> | ||
+ | |||
+ | |||
</body> | </body> | ||
</html> | </html> |
Revision as of 17:54, 13 June 2012
The Bible
of