Team:UT Dallas/Notebook

From 2012.igem.org

(Difference between revisions)
 
(12 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=ttrhg"></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&rrsyr=ryrt" 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
.notebook_page
Line 94: Line 96:
}
}
</style>
</style>
 +
<script language="javascript">
 +
$(document).ready(function(){  colorize_menu('notebook');});
 +
</script>
</html>
</html>
<div id='top_box'>
<div id='top_box'>
Line 104: Line 109:
<div id="book_contents">
<div id="book_contents">
<div class="july_weeks" style='margin-top: 15px;'>
<div class="july_weeks" style='margin-top: 15px;'>
-
<a class="week_link" onclick="getData('week1');return false;" href="#">Week 1 </a>
+
    <a class="week_link" onclick="$('#book').turn('page', 2);return false;" href="#">Week 1 </a>
-
<br><a class="week_link" onclick="getData('week2');return false;" href="#">Week 2 </a>
+
<br><a class="week_link" onclick="$('#book').turn('page', 4);return false;" href="#">Week 2 </a>
-
<br><a class="week_link" onclick="getData('week3');return false;" href="#">Week 3 </a>
+
<br><a class="week_link" onclick="$('#book').turn('page', 6);return false;" href="#">Week 3 </a>
-
<br><a class="week_link" onclick="getData('week4');return false;" href="#">Week 4 </a>  
+
<br><a class="week_link" onclick="$('#book').turn('page', 13);return false;" href="#">Week 4 </a>  
</div>
</div>
<div class="august_weeks" style='margin-top: 60px;'>
<div class="august_weeks" style='margin-top: 60px;'>
-
<a class="week_link" onclick="getData('week5');return false;" href="#">Week 5 </a>
+
    <a class="week_link" onclick="$('#book').turn('page', 22);return false;" href="#">Week 5 </a>
-
<br><a class="week_link" onclick="getData('week6');return false;" href="#">Week 6 </a>
+
<br><a class="week_link" onclick="$('#book').turn('page', 31);return false;" href="#">Week 6 </a>
-
<br><a class="week_link" onclick="getData('week7');return false;" href="#">Week 7 </a>
+
<br><a class="week_link" onclick="$('#book').turn('page', 42);return false;" href="#">Week 7 </a>
-
<br><a class="week_link" onclick="getData('week8');return false;" href="#">Week 8 </a>
+
<br><a class="week_link" onclick="$('#book').turn('page', 57);return false;" href="#">Week 8 </a>
</div>
</div>
<div class="sept_weeks" style='margin-top: 60px;'>
<div class="sept_weeks" style='margin-top: 60px;'>
-
<a class="week_link" onclick="getData('week9');return false;" href="#">Week 9 </a>
+
    <a class="week_link" onclick="$('#book').turn('page', 78);return false;" href="#">Week 9 </a>
-
<br><a class="week_link" onclick="getData('week10');return false;" href="#">Week 10 </a>
+
<br><a class="week_link" onclick="$('#book').turn('page', 89);return false;" href="#">Week 10 </a>
-
<br><a class="week_link" onclick="getData('week11');return false;" href="#">Week 11 </a>
+
<br><a class="week_link" onclick="$('#book').turn('page', 102);return false;" href="#">Week 11 </a>
-
<br><a class="week_link" onclick="getData('week12');return false;" href="#">Week 12 </a>
+
<br><a class="week_link" onclick="$('#book').turn('page', 114);return false;" href="#">Week 12 </a>
 +
 
</div>
</div>
</div>
</div>
</td>
</td>
<td>
<td>
-
<div id="book" style="overflow:visible;">
+
<div id="book" style="overflow:hidden;">
<div class="cover">
<div class="cover">
<h1>Notebook</h1>
<h1>Notebook</h1>
<div class="july_weeks" style='float:left;margin-left: 40px;margin-top: 130px;'>
<div class="july_weeks" style='float:left;margin-left: 40px;margin-top: 130px;'>
-
<a class="week_link" onclick="getData('week1');return false;" href="#">Week 1 </a>
+
    <a class="week_link" onclick="$('#book').turn('page', 2);return false;" href="#">Week 1 </a>
-
<br><a class="week_link" onclick="getData('week2');return false;" href="#">Week 2 </a>
+
<br><a class="week_link" onclick="$('#book').turn('page', 4);return false;" href="#">Week 2 </a>
-
<br><a class="week_link" onclick="getData('week3');return false;" href="#">Week 3 </a>
+
<br><a class="week_link" onclick="$('#book').turn('page', 6);return false;" href="#">Week 3 </a>
-
<br><a class="week_link" onclick="getData('week4');return false;" href="#">Week 4 </a>  
+
<br><a class="week_link" onclick="$('#book').turn('page', 13);return false;" href="#">Week 4 </a>  
</div>
</div>
<div class="august_weeks" style='float:left;margin-left: 40px;margin-top: 130px;'>
<div class="august_weeks" style='float:left;margin-left: 40px;margin-top: 130px;'>
-
<a class="week_link" onclick="getData('week5');return false;" href="#">Week 5 </a>
+
      <a class="week_link" onclick="$('#book').turn('page', 22);return false;" href="#">Week 5 </a>
-
<br><a class="week_link" onclick="getData('week6');return false;" href="#">Week 6 </a>
+
<br><a class="week_link" onclick="$('#book').turn('page', 31);return false;" href="#">Week 6 </a>
-
<br><a class="week_link" onclick="getData('week7');return false;" href="#">Week 7 </a>
+
<br><a class="week_link" onclick="$('#book').turn('page', 42);return false;" href="#">Week 7 </a>
-
<br><a class="week_link" onclick="getData('week8');return false;" href="#">Week 8 </a>
+
<br><a class="week_link" onclick="$('#book').turn('page', 57);return false;" href="#">Week 8 </a>
-
</div>
+
</div>
<div class="sept_weeks" style='float:left;margin-left: 40px;margin-top: 130px;'>
<div class="sept_weeks" style='float:left;margin-left: 40px;margin-top: 130px;'>
-
<a class="week_link" onclick="getData('week9');return false;" href="#">Week 9 </a>
+
<a class="week_link" onclick="$('#book').turn('page', 78);return false;" href="#">Week 9 </a>
-
<br><a class="week_link" onclick="getData('week10');return false;" href="#">Week 10 </a>
+
<br><a class="week_link" onclick="$('#book').turn('page', 89);return false;" href="#">Week 10 </a>
-
<br><a class="week_link" onclick="getData('week11');return false;" href="#">Week 11 </a>
+
<br><a class="week_link" onclick="$('#book').turn('page', 102);return false;" href="#">Week 11 </a>
-
<br><a class="week_link" onclick="getData('week12');return false;" href="#">Week 12 </a>
+
<br><a class="week_link" onclick="$('#book').turn('page', 114);return false;" href="#">Week 12 </a>
 +
                                                               
</div>
</div>
</div>
</div>
Line 155: Line 162:
// Sample using dynamic pages with turn.js
// Sample using dynamic pages with turn.js
-
var numberOfPages = 54;  
+
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 186: Line 191:
});
});
$("#book").bind("turned", function(event, page, view) {
$("#book").bind("turned", function(event, page, view) {
-
if(page==2)
+
if(page!=1)
{
{
  $('#book').animate({
  $('#book').animate({
left: '0px'
left: '0px'
-
  }, 300, function() {
+
  }, 350, function() {
  $('#book_contents').animate({
  $('#book_contents').animate({
left: '0px'
left: '0px'
-
  }, 300, 'easeInOutBack',function() {
+
  }, 400, function() {
//anim complete
//anim complete
  });
  });
Line 202: Line 207:
$('#book').animate({
$('#book').animate({
left: '-265px'
left: '-265px'
-
  }, 300, function() {
+
  }, 350, function() {
  $('#book_contents').animate({
  $('#book_contents').animate({
left: '285px'
left: '285px'
-
  }, 300,'easeInOutBack', function() {
+
  }, 400, function() {
//anim complete
//anim complete
  });
  });
Line 213: Line 218:
$('#book').animate({
$('#book').animate({
left: '-265px'
left: '-265px'
-
  }, 300, function() {
+
  }, 350, function() {
//anim complete
//anim complete
  });
  });

Latest revision as of 01:45, 4 October 2012

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