Team:AUC Turkey/test

From 2012hs.igem.org

(Difference between revisions)
Line 8: Line 8:
background:#ccc;
background:#ccc;
}
}
-
#book{
+
#notebookigem{
-
width:800px;
+
width:1152px;
-
height:500px;
+
height:752px;
}
}
-
 
+
#notebookigem .turn-page{
-
#book .turn-page{
+
background-color:#ccc;
-
background-color:white;
+
background-size:100% 100%;
-
}
+
-
 
+
-
#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>
</style>
Line 74: Line 20:
<body>
<body>
-
<div id="book">
+
<div id="notebookigem">
-
<div class="cover"><h1>The Bible</h1></div>
+
<div>asdasdasd</div>
 +
<div>asdasdasd</div>
 +
<div>asdasdasd</div>
 +
<div>asdasdasd</div>
 +
<div>asdasdasd</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
+
$(window).ready(function() {
-
 
+
$('#notebookigem').turn({
-
var numberOfPages = 1000;
+
display: 'double',
-
 
+
acceleration: true,
-
 
+
-
// 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,
gradients: !$.isTouch,
 +
elevation:50,
when: {
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) {
turned: function(e, page) {
-
$('#page-number').val(page);
+
/*console.log('Current view: ', $(this).turn('view'));*/
}
}
}
}
});
});
-
 
-
$('#number-pages').html(numberOfPages);
 
-
 
-
$('#page-number').keydown(function(e){
 
-
 
-
if (e.keyCode==13)
 
-
$('#book').turn('page', $('#page-number').val());
 
-
 
-
});
 
});
});
-
 
+
 +
$(window).bind('keydown', function(e){
$(window).bind('keydown', function(e){
-
 
+
-
if (e.target)
+
if (e.keyCode==37)
-
                      if(e.target.tagName.toLowerCase()!='input')
+
$('#notebookigem').turn('previous');
-
if (e.keyCode==37)
+
else if (e.keyCode==39)
-
$('#book').turn('previous');
+
$('#notebookigem').turn('next');
-
else if (e.keyCode==39)
+
-
$('#book').turn('next');
+
-
 
+
});
});
</script>
</script>
-
 
</body>
</body>
</html>
</html>

Revision as of 18:08, 13 June 2012

asdasdasd
asdasdasd
asdasdasd
asdasdasd
asdasdasd