Team:UT Dallas/Notebook

From 2012.igem.org

(Difference between revisions)
(Prototype team page)
 
(131 intermediate revisions not shown)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
+
__NOTOC__
-
 
+
<html>
<html>
-
<div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #fe2b33;">
+
<!-- Internet Explorer PNG fix - START /-->
-
<div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;">
+
<!--[if lt IE 7]>
-
This is a template page. READ THESE INSTRUCTIONS.
+
<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 /-->
 +
 
 +
<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="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"></script>
 +
<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css" 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: -265px;
 +
}
 +
#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");
 +
}
 +
#book_contents
 +
{
 +
left: 285px;
 +
    position: relative;
 +
}
 +
</style>
 +
<script language="javascript">
 +
$(document).ready(function(){  colorize_menu('notebook');});
 +
</script>
 +
</html>
 +
<div id='top_box'>
 +
{{:Team:UT_Dallas/Template:menu}}<html>
</div>
</div>
-
<div id="instructions" style="text-align: center; font-weight: normal; font-size: small; color: #f6f6f6; padding: 5px;">
+
<div id='middle_box'>
-
You are provided with this team page template with which to start the iGEM season. You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki. You can find some examples <a href="https://2008.igem.org/Help:Template/Examples">HERE</a>.
+
<table cellpadding="0" cellspacing="0" border="0">
-
</div>
+
<tr>
-
<div id="warning" style="text-align: center; font-weight: bold; font-size: small; color: #f6f6f6; padding: 5px;">
+
<td width="110px" valign="top" style="overflow:visible;">
-
You <strong>MUST</strong> have all of the pages listed in the menu below with the names specified. PLEASE keep all of your pages within your teams namespace.
+
<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>
 +
<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>
 +
</td>
 +
</tr>
 +
</table>
</div>
</div>
-
</div>
+
<script type="text/javascript">
-
</html>
+
-
<!-- *** End of the alert box *** -->
+
// Sample using dynamic pages with turn.js
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
+
var numberOfPages = 121;  
-
!align="center"|[[Team:UT_Dallas|Home]]
+
// Adds the pages that the book will need
-
!align="center"|[[Team:UT_Dallas/Team|Team]]
+
function addPage(page, book) {
-
!align="center"|[https://igem.org/Team.cgi?year=2012&team_name=UT_Dallas Official Team Profile]
+
// First check if the page is already in the book
-
!align="center"|[[Team:UT_Dallas/Project|Project]]
+
if (!book.turn('hasPage', page))
-
!align="center"|[[Team:UT_Dallas/Parts|Parts Submitted to the Registry]]
+
{
-
!align="center"|[[Team:UT_Dallas/Modeling|Modeling]]
+
// Create an element for this page
-
!align="center"|[[Team:UT_Dallas/Notebook|Notebook]]
+
var element = $('<div/>', {'class': 'page '+((page%2==0) ? 'odd' : 'even'), 'id': 'page-'+page}).html('<i class="loader"></i>');
-
!align="center"|[[Team:UT_Dallas/Safety|Safety]]
+
// If not then add the page
-
!align="center"|[[Team:UT_Dallas/Attributions|Attributions]]
+
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!=1)
 +
{
 +
  $('#book').animate({
 +
left: '0px'
 +
  }, 350, function() {
 +
  $('#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>
-
You should make use of the calendar feature on the wiki and start a lab notebook.  This may be looked at by the judges to see how your work progressed throughout the summer.  It is a very useful organizational tool as well.
+
</html>

Latest revision as of 01:45, 4 October 2012

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