Team:UT Dallas/Notebook

From 2012.igem.org

(Difference between revisions)
 
(119 intermediate revisions not shown)
Line 6: Line 6:
<![endif]-->
<![endif]-->
<!-- Internet Explorer PNG fix - END /-->
<!-- Internet Explorer PNG fix - END /-->
 +
 +
<link href='http://fonts.googleapis.com/css?family=Scada' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.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="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&tytry=tytrhg"></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">
<style type="text/css">
 +
.notebook_page
 +
{
 +
padding: 18px 2px 4px 18px;
 +
}
 +
.page{
 +
color:#000000;
 +
}
#weeks{
#weeks{
-
height:560px;
+
height:550px;
}
}
#book{
#book{
width:880px;
width:880px;
height:540px;
height:540px;
-
/*top:142px;
+
        margin-top: 5px;
-
left:336px
+
        left: -265px;
-
position:absolute;*/
+
}
}
-
 
+
#boook #lab_notebook{color:#000000;}
#book .turn-page{
#book .turn-page{
background-color:white;
background-color:white;
Line 28: Line 36:
#book .cover{
#book .cover{
-
background:#333;
+
/*background:#333;*/
 +
background-image:url('https://static.igem.org/mediawiki/2012/b/b9/Notebook_coverpage2.png');
}
}
#book .cover h1{
#book .cover h1{
-
color:white;
+
    border: 0 none;
-
text-align:center;
+
    color: #000000;
-
font-size:50px;
+
    font-size: 50px;
-
line-height:500px;
+
    margin: 145px 0 0 125px;
-
margin:0px;
+
}
}
#book .loader{
#book .loader{
-
background-image:url(loader.gif);
+
background-image:url('https://static.igem.org/mediawiki/2012/d/d0/UTD_Img-loader.gif');
width:24px;
width:24px;
height:24px;
height:24px;
Line 68: Line 76:
#book .odd{
#book .odd{
-
background-image:-webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
+
/*background-image:-webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image:-moz-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:-o-linear-gradient(left, #FFF 95%, #ddd 100%);
-
background-image:-ms-linear-gradient(left, #FFF 95%, #ddd 100%);
+
background-image:-ms-linear-gradient(left, #FFF 95%, #ddd 100%);*/
 +
        background-image:url("https://static.igem.org/mediawiki/2012/2/25/Odd.png");
}
}
#book .even{
#book .even{
-
background-image:-webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
+
/*background-image:-webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image:-moz-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:-o-linear-gradient(right, #FFF 95%, #ddd 100%);
-
background-image:-ms-linear-gradient(right, #FFF 95%, #ddd 100%);
+
background-image:-ms-linear-gradient(right, #FFF 95%, #ddd 100%);*/
 +
        background-image:url("https://static.igem.org/mediawiki/2012/b/bd/Even.png");
 +
}
 +
#book_contents
 +
{
 +
left: 285px;
 +
    position: relative;
}
}
</style>
</style>
 +
<script language="javascript">
 +
$(document).ready(function(){  colorize_menu('notebook');});
 +
</script>
</html>
</html>
<div id='top_box'>
<div id='top_box'>
Line 86: Line 104:
</div>
</div>
<div id='middle_box'>
<div id='middle_box'>
-
<table class="t1" cellspacing="0" cellpadding="0">
+
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<tr>
-
<td id='weeks' valign='top' width="125px">Weeks</td>
+
<td width="110px" valign="top" style="overflow:visible;">
-
<td valign='top'>
+
<div id="book_contents">
-
<div id="book">
+
<div class="july_weeks" style='margin-top: 15px;'>
-
<div class="cover"><h1>note book</h1></div>
+
    <a class="week_link" onclick="$('#book').turn('page', 2);return false;" href="#">Week 1 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 4);return false;" href="#">Week 2 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 6);return false;" href="#">Week 3 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 13);return false;" href="#">Week 4 </a>
 +
</div>
 +
<div class="august_weeks" style='margin-top: 60px;'>
 +
    <a class="week_link" onclick="$('#book').turn('page', 22);return false;" href="#">Week 5 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 31);return false;" href="#">Week 6 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 42);return false;" href="#">Week 7 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 57);return false;" href="#">Week 8 </a>
 +
</div>
 +
<div class="sept_weeks" style='margin-top: 60px;'>
 +
    <a class="week_link" onclick="$('#book').turn('page', 78);return false;" href="#">Week 9 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 89);return false;" href="#">Week 10 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 102);return false;" href="#">Week 11 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 114);return false;" href="#">Week 12 </a>
 +
 
 +
</div>
 +
</div>
 +
</td>
 +
<td>
 +
<div id="book" style="overflow:hidden;">
 +
<div class="cover">
 +
<h1>Notebook</h1>
 +
<div class="july_weeks" style='float:left;margin-left: 40px;margin-top: 130px;'>
 +
    <a class="week_link" onclick="$('#book').turn('page', 2);return false;" href="#">Week 1 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 4);return false;" href="#">Week 2 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 6);return false;" href="#">Week 3 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 13);return false;" href="#">Week 4 </a>
 +
</div>
 +
<div class="august_weeks" style='float:left;margin-left: 40px;margin-top: 130px;'>
 +
      <a class="week_link" onclick="$('#book').turn('page', 22);return false;" href="#">Week 5 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 31);return false;" href="#">Week 6 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 42);return false;" href="#">Week 7 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 57);return false;" href="#">Week 8 </a>
 +
</div>
 +
<div class="sept_weeks" style='float:left;margin-left: 40px;margin-top: 130px;'>
 +
<a class="week_link" onclick="$('#book').turn('page', 78);return false;" href="#">Week 9 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 89);return false;" href="#">Week 10 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 102);return false;" href="#">Week 11 </a>
 +
<br><a class="week_link" onclick="$('#book').turn('page', 114);return false;" href="#">Week 12 </a>
 +
                                                               
 +
</div>
 +
</div>
</div>
</div>
</td>
</td>
</tr>
</tr>
-
</table>
+
</table>
</div>
</div>
<script type="text/javascript">
<script type="text/javascript">
Line 101: Line 162:
// Sample using dynamic pages with turn.js
// Sample using dynamic pages with turn.js
-
var numberOfPages = 1000;  
+
var numberOfPages = 121;  
-
 
+
-
 
+
// Adds the pages that the book will need
// Adds the pages that the book will need
function addPage(page, book) {
function addPage(page, book) {
Line 110: Line 169:
{
{
// Create an element for this 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>');
+
var element = $('<div/>', {'class': 'page '+((page%2==0) ? 'odd' : 'even'), 'id': 'page-'+page}).html('<i class="loader"></i>');
// If not then add the page
// If not then add the page
book.turn('addPage', element, page);
book.turn('addPage', element, page);
-
// Let's assum that the data is comming from the server and the request takes 1s.
+
                        element.load("https://2012.igem.org/Team:UT_Dallas/notebook_data #page"+page);
-
setTimeout(function(){
+
-
element.html('<div class="data">Data for page '+page+'</div>');
+
-
}, 1000);
+
}
}
}
}
Line 126: Line 182:
gradients: !$.isTouch,
gradients: !$.isTouch,
when: {
when: {
-
turning: function(e, page, view) {
+
turning: function(e, page, view)  
-
 
+
{
-
// Gets the range of pages that the book needs right now
+
var range = $(this).turn('range', page);
var range = $(this).turn('range', page);
-
 
-
// Check if each page is within the book
 
for (page = range[0]; page<=range[1]; page++)  
for (page = range[0]; page<=range[1]; page++)  
addPage(page, $(this));
addPage(page, $(this));
-
 
},
},
-
 
-
turned: function(e, page)
 
-
{
 
-
$('#page-number').val(page);
 
-
}
 
}
}
});
});
-
 
+
$("#book").bind("turned", function(event, page, view) {
-
$('#number-pages').html(numberOfPages);
+
if(page!=1)
-
 
+
{
-
$('#page-number').keydown(function(e){
+
  $('#book').animate({
-
 
+
left: '0px'
-
if (e.keyCode==13)
+
  }, 350, function() {
-
$('#book').turn('page', $('#page-number').val());
+
  $('#book_contents').animate({
-
+
left: '0px'
 +
  }, 400, function() {
 +
//anim complete
 +
  });
 +
  });
 +
}
});
});
 +
$("#book").bind("first", function(event) {
 +
$('#book').animate({
 +
left: '-265px'
 +
  }, 350, function() {
 +
  $('#book_contents').animate({
 +
left: '285px'
 +
  }, 400, function() {
 +
//anim complete
 +
  });
 +
  });
 +
});
 +
$("#book").bind("last", function(event) {
 +
$('#book').animate({
 +
left: '-265px'
 +
  }, 350, function() {
 +
//anim complete
 +
  });
 +
});
});
});
</script>
</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>
 
</html>
</html>

Latest revision as of 01:45, 4 October 2012

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