Difference between revisions of "Team:Virginia/Notebook"

Line 7: Line 7:
 
<body>
 
<body>
 
<div id="top-part">
 
<div id="top-part">
−
<a href="http://virginia.edu">
+
<a href="http://virginia.edu">
−
<div style="position: fixed;
+
<div style="position: fixed;
−
top: 34px;
+
top:34px;
−
z-index:20;
+
z-index:20;
−
margin-left:26.5%;">
+
margin-left:26.5%;">
−
<img style="height:32px;
+
<img style="height:32px;
−
width:32px;" src="/wiki/images/d/df/Virginia_rotunda2.png">
+
width:32px;" src="/wiki/images/d/df/Virginia_rotunda2.png">
−
</div></a>
+
</div>
−
 
+
</a>
 
<p id="above-nav">University of Virginia iGEM 2015</p>
 
<p id="above-nav">University of Virginia iGEM 2015</p>
 
<div id="icon-box">
 
<div id="icon-box">
Line 36: Line 36:
 
</div>
 
</div>
 
</div>
 
</div>
−
 
+
<!-- OTHER STRUCTURAL CODE GOES BELOW HERE -->
−
<!-- OTHER STRUCTURAL CODE GOES BELOW HERE -->
+
<div class="textbox">
−
<div class="textbox">
+
<h1>Team Notebook</h1>
−
<h1>Team Notebook</h1>
+
<p> The pages below are directly from our team notebook, which was kept throughout the whole project development process. Click on the top right corner to move forward a page, and click the top left corner to move back a page.</p>
−
<p> The pages below are directly from our team notebook, which was kept throughout the whole project development process. Click on the top right corner to move forward a page, and click the top left corner to move back a page.</p>
+
</div>
−
</div>
+
<script type="text/javascript" src="http://www.turnjs.com/lib/turn.min.js"></script>
−
<script type="text/javascript" src="http://www.turnjs.com/lib/turn.min.js"></script>
+
<a href="javascript:void(0);"><img src="/wiki/images/2/2d/Virginia_notebook_left.png" id="left-arrow" class="arrow"></img></a>
−
<a href="javascript:void(0);"><img src="/wiki/images/2/2d/Virginia_notebook_left.png" id="left-arrow" class="arrow"></img></a>
+
<a href="javascript:void(0);"><img src="/wiki/images/2/21/Virginia_notebook_right.png" id="right-arrow" class="arrow"></img></a>
−
<a href="javascript:void(0);"><img src="/wiki/images/2/21/Virginia_notebook_right.png" id="right-arrow" class="arrow"></img></a>
+
<div class="book-wrapper">
−
<div class="book-wrapper">
+
<style type="text/css">
−
<style type="text/css">
+
.arrow {
−
.arrow {
+
position: absolute;
−
position: absolute;
+
top: 400px;
−
top: 400px;
+
z-index:20;
−
z-index:20;
+
width: 5%;
−
width: 5%;
+
height: auto;
−
height: auto;
+
}
−
}
+
#left-arrow {
−
#left-arrow {
+
left:2.5%;
−
left:2.5%;
+
}
−
}
+
#right-arrow {
−
#right-arrow {
+
right:2.5%;
−
right:2.5%;
+
}
−
}
+
</style>
−
</style>
+
<div class="left page cover" id="page-1">
−
<div class="left page cover" id="page-1">
+
<img src="/wiki/images/b/b5/Virginia_page1.png"></img>
−
<img src="/wiki/images/b/b5/Virginia_page1.png"></img>
+
</div>
−
</div>
+
<div class="right page" id="page-2">
−
<div class="right page" id="page-2">
+
<img src="/wiki/images/1/16/Virginia_page2.png"></img>
−
<img src="/wiki/images/1/16/Virginia_page_2.png"></img>
+
</div>
−
</div>
+
<div class="left page inactive" id="page-3">
−
<div class="left page inactive" id="page-3">
+
<img src="/wiki/images/1/16/Virginia_page3.png"></img>
−
<img src="/wiki/images/1/16/Virginia_page_2.png"></img>
+
</div>
−
 
+
<div class="right page inactive" id="page-4">
−
 
+
<img src="/wiki/images/1/16/Virginia_page4.png"></img>
−
</div>
+
</div>
−
<div class="right page inactive" id="page-4">
+
<div class="left page inactive" id="page-5">
−
<img src="/wiki/images/1/16/Virginia_page_2.png"></img>
+
<img src="/wiki/images/1/16/Virginia_page5.png"></img>
−
</div>
+
</div>
−
<div class="left page inactive" id="page-5">
+
<div class="right page inactive cover" id="page-6">
−
<img src="/wiki/images/1/16/Virginia_page_2.png"></img>
+
<img src="/wiki/images/1/16/Virginia_page6.png"></img>
−
</div>
+
</div>
−
<div class="right page inactive cover" id="page-6">
+
</div>
−
<img src="/wiki/images/1/16/Virginia_page_2.png"></img>
+
<script type="text/javascript">
−
</div>
+
var left_page_counter = 1;
−
</div>
+
var right_page_counter = 2;
−
<script type="text/javascript">
+
var left_page = "#page-" + left_page_counter.toString();
−
var left_page_counter = 1;
+
var right_page = "#page-" + right_page_counter.toString();
−
var right_page_counter = 2;
+
var $left = $(left_page);
−
var left_page = "#page-" + left_page_counter.toString();
+
var $right = $(right_page);
−
var right_page = "#page-" + right_page_counter.toString();
+
−
var $left = $(left_page);
+
−
var $right = $(right_page);
+
−
+
jQuery(document).ready(function(){
−
+
if ( (left_page_counter == 1) || (right_page_counter == 2) ) {
−
+
$("#left-arrow").fadeOut("fast");
−
jQuery(document).ready(function(){
+
}
−
if ( (left_page_counter == 1) || (right_page_counter == 2) ) {
+
−
$("#left-arrow").fadeOut("fast");
+
$("#right-arrow").click(function(){
−
}
+
console.log("Right Arrow: I’ve been clicked");
−
 
+
console.log("var left_page_counter is " + left_page_counter);
−
$("#right-arrow").click(function(){
+
if ( (left_page_counter == 1) || (right_page_counter == 2) ) {
−
console.log("Right Arrow: I’ve been clicked");
+
$("#left-arrow").fadeOut("fast");
−
console.log("var left_page_counter is " + left_page_counter);
+
}
−
if ( (left_page_counter == 1) || (right_page_counter == 2) ) {
+
$("#left-arrow").fadeIn("fast");
−
$("#left-arrow").fadeOut("fast");
+
//removes current pages
−
}
+
$left.addClass("inactive");
−
$("#left-arrow").fadeIn("fast");
+
$right.addClass("inactive");
 +
 +
//changes variables
 +
left_page_counter = left_page_counter + 2;
 +
right_page_counter = right_page_counter + 2;
 +
left_page = "#page-" + left_page_counter.toString();
 +
right_page = "#page-" + right_page_counter.toString();
 +
$left = $(left_page);
 +
$right = $(right_page);
 +
 +
//displays new pages
 +
$left.removeClass("inactive");
 +
$right.removeClass("inactive");
 +
 +
if( $left.hasClass("cover") || $right.hasClass("cover") ) {
 +
$("#right-arrow").fadeOut("fast");
 +
}
 +
if( !($left.hasClass("cover")) ) {
 +
$("#left-arrow").fadeIn("fast");
 +
}
 +
 +
 +
});
 +
$("#left-arrow").click(function(){
 
//removes current pages
 
//removes current pages
−
$left.addClass("inactive");
+
if ( (left_page_counter == 1) || (right_page_counter == 2) ) {
−
$right.addClass("inactive");
+
$("#left-arrow").fadeOut("fast");
−
 
+
}
−
//changes variables
+
$left.addClass("inactive");
−
left_page_counter = left_page_counter + 2;
+
$right.addClass("inactive");
−
right_page_counter = right_page_counter + 2;
+
−
left_page = "#page-" + left_page_counter.toString();
+
−
right_page = "#page-" + right_page_counter.toString();
+
−
$left = $(left_page);
+
−
$right = $(right_page);
+
−
 
+
−
//displays new pages
+
−
$left.removeClass("inactive");
+
−
$right.removeClass("inactive");
+
−
 
+
−
if( $left.hasClass("cover") || $right.hasClass("cover") ) {
+
−
$("#right-arrow").fadeOut("fast");
+
−
}
+
−
if( !($left.hasClass("cover")) ) {
+
−
$("#left-arrow").fadeIn("fast");
+
−
}
+
−
 
+
−
+
−
});
+
−
$("#left-arrow").click(function(){
+
−
//removes current pages
+
−
if ( (left_page_counter == 1) || (right_page_counter == 2) ) {
+
−
$("#left-arrow").fadeOut("fast");
+
−
}
+
−
$left.addClass("inactive");
+
−
$right.addClass("inactive");
+
−
 
+
−
left_page_counter = left_page_counter - 2;
+
−
right_page_counter = right_page_counter - 2;
+
−
console.log("Left Arrow: I’ve been clicked");
+
−
console.log("var left_page_counter is " + left_page_counter);
+
−
left_page = "#page-" + left_page_counter.toString();
+
−
right_page = "#page-" + right_page_counter.toString();
+
−
$left = $(left_page);
+
−
$right = $(right_page);
+
 
 
−
//displays new pages
+
left_page_counter = left_page_counter - 2;
−
$left.removeClass("inactive");
+
right_page_counter = right_page_counter - 2;
−
$right.removeClass("inactive");
+
console.log("Left Arrow: I’ve been clicked");
−
if( !($left.hasClass("cover") || $right.hasClass("cover")) ) {
+
console.log("var left_page_counter is " + left_page_counter);
−
$("#right-arrow").fadeIn("fast");
+
left_page = "#page-" + left_page_counter.toString();
−
}
+
right_page = "#page-" + right_page_counter.toString();
−
if( $left.hasClass("cover") ) {
+
$left = $(left_page);
−
$("#left-arrow").fadeOut("fast");
+
$right = $(right_page);
−
}
+
−
});
+
//displays new pages
−
});
+
$left.removeClass("inactive");
−
</script>
+
$right.removeClass("inactive");
−
<style type="text/css">
+
if( !($left.hasClass("cover") || $right.hasClass("cover")) ) {
−
.book-wrapper {
+
$("#right-arrow").fadeIn("fast");
−
width: 100%;
+
}
−
margin-top: 40px;
+
if( $left.hasClass("cover") ) {
−
margin-bottom: 40px;
+
$("#left-arrow").fadeOut("fast");
−
}
+
}
−
.page {
+
});
−
width:40%;
+
});
−
display:inline;
+
</script>
−
height:auto;
+
<style type="text/css">
−
background: #fff;
+
.book-wrapper {
−
}
+
width: 100%;
−
.page img {
+
margin-top: 40px;
−
width:100%;
+
margin-bottom: 40px;
−
height:auto;
+
}
−
}
+
.page {
−
.right {
+
width:40%;
−
float:right;
+
display:inline;
−
margin-right:9%;
+
height:auto;
−
}
+
background: #fff;
−
.left {
+
}
−
float:left;
+
.page img {
−
margin-left:9%;
+
width:100%;
−
}
+
height:auto;
−
.default-active {
+
}
−
display:inline;
+
.right {
−
}
+
float:right;
−
.inactive {
+
margin-right:9%;
−
display:none;
+
}
−
}
+
.left {
−
</style>
+
float:left;
−
 
+
margin-left:9%;
−
<!-- SPECIFIC STRUCTURAL CODE ENDS HERE -->
+
}
−
 
+
.default-active {
 +
display:inline;
 +
}
 +
.inactive {
 +
display:none;
 +
}
 +
</style>
 +
<!-- SPECIFIC STRUCTURAL CODE ENDS HERE -->
 
<footer>
 
<footer>
 
<div id="foot-img">
 
<div id="foot-img">
Line 218: Line 213:
 
}
 
}
 
footer div:first-child {  
 
footer div:first-child {  
−
background-image:url(‘https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQUA5CF2C_kOVnWjyl62TA17VNs6RSsPIkrCejlLbtZ7rAVgzQxOQ’);
+
background-image:url(‘https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQUA5CF2C_kOVnWjyl62TA17VNs6RSsPIkrCejlLbtZ7rAVgzQxOQ’);
 
float:right;
 
float:right;
 
top:10px;
 
top:10px;
Line 265: Line 260:
 
a:hover {
 
a:hover {
 
text-decoration:none;
 
text-decoration:none;
−
}
+
}
−
a{
+
a{
−
text-decoration:none;
+
text-decoration:none;
−
}
+
}
−
.active-tab{
+
.active-tab{
−
text-decoration:none;
+
text-decoration:none;
−
}
+
}
−
.active-content{
+
.active-content{
−
text-decoration:none;
+
text-decoration:none;
−
}
+
}
 
.row {
 
.row {
 
width:100%;
 
width:100%;
 
}
 
}
−
 
 
#content h1.firstHeading {
 
#content h1.firstHeading {
 
visibility:hidden;
 
visibility:hidden;
Line 395: Line 389:
 
}
 
}
 
#flipbook div {
 
#flipbook div {
−
 
 
}
 
}
 
#book-wrapper.container {
 
#book-wrapper.container {
Line 412: Line 405:
 
padding:10px;
 
padding:10px;
 
}
 
}
−
/* SPECIFIC STYLE CODE ENDS HERE */
+
/* SPECIFIC STYLE CODE ENDS HERE */
−
</style>
+
</style>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 00:51, 1 September 2015

University of Virginia iGEM 2015

Team Notebook

The pages below are directly from our team notebook, which was kept throughout the whole project development process. Click on the top right corner to move forward a page, and click the top left corner to move back a page.

University of Virginia iGEM

148 Gilmer Hall

485 McCormick Road

Charlottesville, Virginia 22904

United States of America

virginia.igem@gmail.com