Team:UT Dallas/Notebook
From 2012.igem.org
(Difference between revisions)
(21 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 | + | <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 | + | <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 87: | Line 89: | ||
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"); | 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 94: | Line 104: | ||
</div> | </div> | ||
<div id='middle_box'> | <div id='middle_box'> | ||
- | <table cellpadding="0" cellspacing="0" border=" | + | <table cellpadding="0" cellspacing="0" border="0"> |
<tr> | <tr> | ||
- | <td width="110px" valign="top" id= | + | <td width="110px" valign="top" style="overflow:visible;"> |
+ | <div id="book_contents"> | ||
+ | <div class="july_weeks" style='margin-top: 15px;'> | ||
+ | <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> | <td> | ||
<div id="book" style="overflow:hidden;"> | <div id="book" style="overflow:hidden;"> | ||
- | <div | + | <div class="cover"> |
- | <div class="july_weeks"> | + | <h1>Notebook</h1> |
- | + | <div class="july_weeks" style='float:left;margin-left: 40px;margin-top: 130px;'> | |
- | <br><a class="week_link" onclick=" | + | <a class="week_link" onclick="$('#book').turn('page', 2);return false;" href="#">Week 1 </a> |
- | <br><a class="week_link" onclick=" | + | <br><a class="week_link" onclick="$('#book').turn('page', 4);return false;" href="#">Week 2 </a> |
- | <br><a class="week_link" onclick=" | + | <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> | ||
- | <div class="august_weeks"> | + | <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=" | + | <br><a class="week_link" onclick="$('#book').turn('page', 31);return false;" href="#">Week 6 </a> |
- | <br><a class="week_link" onclick=" | + | <br><a class="week_link" onclick="$('#book').turn('page', 42);return false;" href="#">Week 7 </a> |
- | <br><a class="week_link" onclick=" | + | <br><a class="week_link" onclick="$('#book').turn('page', 57);return false;" href="#">Week 8 </a> |
- | + | </div> | |
- | <div class="sept_weeks"> | + | <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=" | + | <br><a class="week_link" onclick="$('#book').turn('page', 89);return false;" href="#">Week 10 </a> |
- | <br><a class="week_link" onclick=" | + | <br><a class="week_link" onclick="$('#book').turn('page', 102);return false;" href="#">Week 11 </a> |
- | <br><a class="week_link" onclick=" | + | <br><a class="week_link" onclick="$('#book').turn('page', 114);return false;" href="#">Week 12 </a> |
+ | |||
</div> | </div> | ||
</div> | </div> | ||
Line 128: | Line 162: | ||
// Sample using dynamic pages with turn.js | // Sample using dynamic pages with turn.js | ||
- | var numberOfPages = | + | 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 159: | Line 191: | ||
}); | }); | ||
$("#book").bind("turned", function(event, page, view) { | $("#book").bind("turned", function(event, page, view) { | ||
- | if(page= | + | if(page!=1) |
{ | { | ||
$('#book').animate({ | $('#book').animate({ | ||
left: '0px' | left: '0px' | ||
- | }, | + | }, 350, function() { |
- | + | $('#book_contents').animate({ | |
- | + | left: '0px' | |
+ | }, 400, function() { | ||
+ | //anim complete | ||
+ | }); | ||
}); | }); | ||
} | } | ||
Line 172: | Line 207: | ||
$('#book').animate({ | $('#book').animate({ | ||
left: '-265px' | left: '-265px' | ||
- | }, | + | }, 350, function() { |
- | + | $('#book_contents').animate({ | |
- | + | left: '285px' | |
+ | }, 400, function() { | ||
+ | //anim complete | ||
+ | }); | ||
}); | }); | ||
}); | }); | ||
Line 180: | Line 218: | ||
$('#book').animate({ | $('#book').animate({ | ||
left: '-265px' | left: '-265px' | ||
- | }, | + | }, 350, function() { |
- | + | //anim complete | |
- | + | ||
}); | }); | ||
}); | }); |
Latest revision as of 01:45, 4 October 2012