Team:UT Dallas/Notebook

From 2012.igem.org

(Difference between revisions)
Line 9: Line 9:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type='text/javascript' src='https://2012.igem.org/Team:UT_Dallas/script.js?action=raw&ctype=text/javascript'></script>
<script type='text/javascript' src='https://2012.igem.org/Team:UT_Dallas/script.js?action=raw&ctype=text/javascript'></script>
 +
<script type="text/javascript" src="https://2012.igem.org/Team:UT_Dallas/turn.js?action=raw&ctype=text/javascript"></script>
<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css" rel="stylesheet">
<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css" rel="stylesheet">
 +
<style type="text/css">
 +
#weeks{
 +
height:560px;
 +
width:20px;
 +
border:1px solid;
 +
}
 +
#book{
 +
width:880px;
 +
height:540px;
 +
/*top:142px;
 +
left:336px
 +
position:absolute;*/
 +
}
 +
 +
#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>
</html>
</html>
<div id='top_box'>
<div id='top_box'>
Line 15: Line 88:
</div>
</div>
<div id='middle_box'>
<div id='middle_box'>
-
notebook
+
<div id="book">
 +
<div class="cover"><h1>note book</h1></div>
 +
</div>
 +
</div>
 +
<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: 0,
 +
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>
 +
<div id="controls">
 +
<label for="page-number">Page:</label> <input type="text" size="3" id="page-number"> of <span id="number-pages"></span>
</div>
</div>
</html>
</html>

Revision as of 21:34, 30 August 2012

note book

of
Retrieved from "http://2012.igem.org/Team:UT_Dallas/Notebook"