Team:UT Dallas/Notebook

From 2012.igem.org

(Difference between revisions)
Line 95: Line 95:
<div id='middle_box'>
<div id='middle_box'>
<div id='book_content' style="float:left;height:200px;border:1px solid #000000">
<div id='book_content' style="float:left;height:200px;border:1px solid #000000">
 +
__NOTOC__
 +
<html>
 +
<!-- Internet Explorer PNG fix - START /-->
 +
<!--[if lt IE 7]>
 +
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js">IE7_PNG_SUFFIX=".png";</script>
 +
<![endif]-->
 +
<!-- Internet Explorer PNG fix - END /-->
 +
<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='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>
 +
<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css&rrsyr=ryrt" rel="stylesheet">
 +
<style type="text/css">
 +
.notebook_page
 +
{
 +
padding: 18px 2px 4px 18px;
 +
}
 +
.page{
 +
color:#000000;
 +
}
 +
#weeks{
 +
height:550px;
 +
}
 +
#book{
 +
width:880px;
 +
height:540px;
 +
        margin-top: 5px;
 +
        left: -155px;
 +
}
 +
#boook #lab_notebook{color:#000000;}
 +
#book .turn-page{
 +
background-color:white;
 +
}
 +
 +
#book .cover{
 +
/*background:#333;*/
 +
background-image:url('https://static.igem.org/mediawiki/2012/b/b9/Notebook_coverpage2.png');
 +
}
 +
 +
#book .cover h1{
 +
    border: 0 none;
 +
    color: #000000;
 +
    font-size: 50px;
 +
    margin: 145px 0 0 125px;
 +
}
 +
 +
#book .loader{
 +
background-image:url('https://static.igem.org/mediawiki/2012/d/d0/UTD_Img-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%);*/
 +
        background-image:url("https://static.igem.org/mediawiki/2012/2/25/Odd.png");
 +
}
 +
 +
#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%);*/
 +
        background-image:url("https://static.igem.org/mediawiki/2012/b/bd/Even.png");
 +
}
 +
</style>
 +
</html>
 +
<div id='top_box'>
 +
{{:Team:UT_Dallas/Template:menu}}<html>
 +
</div>
 +
<div id='middle_box'>
 +
<table cellpadding="0" cellspacing="0" border="1">
 +
<tr>
 +
<td width="110px" valign="top"></td>
 +
<td>
 +
<div id="book" style="overflow:hidden;">
 +
<div id='book_cover' class="cover">
<div id="july">
<div id="july">
<a class="week_link" onclick="getData('week1');return false;" href="#">Week 1 </a>
<a class="week_link" onclick="getData('week1');return false;" href="#">Week 1 </a>
Line 113: Line 214:
<br><a class="week_link" onclick="getData('week12');return false;" href="#">Week 12 </a>
<br><a class="week_link" onclick="getData('week12');return false;" href="#">Week 12 </a>
</div>
</div>
 +
</div>
 +
</div>
 +
</td>
 +
</tr>
 +
</table>
 +
</div>
 +
<script type="text/javascript">
 +
 +
// Sample using dynamic pages with turn.js
 +
 +
var numberOfPages = 54;
 +
 +
 +
// 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);
 +
                        element.load("https://2012.igem.org/Team:UT_Dallas/notebook_data #page"+page);
 +
}
 +
}
 +
 +
$(window).ready(function(){
 +
$('#book').turn({acceleration: true,
 +
pages: numberOfPages,
 +
elevation: 0,
 +
gradients: !$.isTouch,
 +
when: {
 +
turning: function(e, page, view)
 +
{
 +
var range = $(this).turn('range', page);
 +
for (page = range[0]; page<=range[1]; page++)
 +
addPage(page, $(this));
 +
},
 +
}
 +
});
 +
$("#book").bind("turned", function(event, page, view) {
 +
if(page==2)
 +
{
 +
  $('#book').animate({
 +
left: '112px'
 +
  }, 500, function() {
 +
// Animation complete.
 +
  });
 +
}
 +
});
 +
$("#book").bind("first", function(event) {
 +
$('#book').animate({
 +
left: '-155px'
 +
  }, 500, function() {
 +
// Animation complete.
 +
  });
 +
});
 +
$("#book").bind("last", function(event) {
 +
$('#book').animate({
 +
left: '-155px'
 +
  }, 500, function() {
 +
// Animation complete.
 +
  });
 +
});
 +
});
 +
 +
</script>
 +
</html>
 +
</div>
</div>
<div id="book" style="overflow:hidden;">
<div id="book" style="overflow:hidden;">

Revision as of 06:05, 28 September 2012

__NOTOC__

<script type="text/javascript">

// Sample using dynamic pages with turn.js

var numberOfPages = 54;


// 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(''); // If not then add the page book.turn('addPage', element, page); 

                       element.load("https://2012.igem.org/Team:UT_Dallas/notebook_data #page"+page);

} }

$(window).ready(function(){ $('#book').turn({acceleration: true, pages: numberOfPages, elevation: 0, gradients: !$.isTouch, when: { turning: function(e, page, view) { var range = $(this).turn('range', page); for (page = range[0]; page<=range[1]; page++) addPage(page, $(this)); }, } }); $("#book").bind("turned", function(event, page, view) { if(page==2) { $('#book').animate({ left: '112px' }, 500, function() { // Animation complete. }); } }); $("#book").bind("first", function(event) { $('#book').animate({ left: '-155px' }, 500, function() { // Animation complete. }); }); $("#book").bind("last", function(event) { $('#book').animate({ left: '-155px' }, 500, function() { // Animation complete. }); }); });

</script> </html>

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