Difference between revisions of "Team:Virginia/Notebook"

 
(34 intermediate revisions by the same user not shown)
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 -->
 +
<div class="textbox">
 +
<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>
 +
</div>
 +
<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/21/Virginia_notebook_right.png" id="right-arrow" class="arrow"></img></a>
 +
<div class="book-wrapper">
 +
<style type="text/css">
 +
.arrow {
 +
position: absolute;
 +
top: 400px;
 +
z-index:20;
 +
width: 5%;
 +
height: auto;
 +
}
 +
#left-arrow {
 +
left:2.5%;
 +
}
 +
#right-arrow {
 +
right:2.5%;
 +
}
 +
</style>
 +
<!-- PAGE SET-->
 +
<div class="left page cover" id="page-1">
 +
<img src="/wiki/images/b/b5/Virginia_page1.png"></img>
 +
</div>
 +
<div class="right page" id="page-2">
 +
<img src="/wiki/images/d/db/Virginia_page2.png"></img>
 +
</div>
 +
<!-- PAGE SET-->
  
−
<!-- OTHER STRUCTURAL CODE GOES BELOW HERE -->
+
<div class="left page inactive" id="page-3">
−
<div class="textbox">
+
<img src="/wiki/images/2/22/Virginia_page3.png"></img>
−
<h1>Team Notebook</h1>
+
</div>
−
<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 class="right page inactive" id="page-4">
−
</div>
+
<img src="/wiki/images/6/62/Virginia_page4.png"></img>
−
<script type="text/javascript" src="http://www.turnjs.com/lib/turn.min.js"></script>
+
</div>
−
<a href="javascript:void(0);"><img src="/wiki/images/2/2d/Virginia_notebook_left.png" id="left-arrow" class="arrow"></img></a>
+
<!-- PAGE SET-->
−
<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">
+
−
<style type="text/css">
+
−
.arrow {
+
−
position: absolute;
+
−
top: 400px;
+
−
z-index:20;
+
−
width: 5%;
+
−
height: auto;
+
−
}
+
−
#left-arrow {
+
−
left:2.5%;
+
−
}
+
−
#right-arrow {
+
−
right:2.5%;
+
−
}
+
−
</style>
+
−
<div class="left page" id="page-1">
+
−
<img src="/wiki/images/b/b5/Virginia_page1.png"></img>
+
−
</div>
+
−
<div class="right page" id="page-2">
+
−
<img src="/wiki/images/b/b5/Virginia_page1.png"></img>
+
−
</div>
+
−
<div class="left page inactive" id="page-3">
+
  
−
</div>
+
<div class="left page inactive" id="page-5">
−
<div class="right page inactive" id="page-4">
+
<img src="/wiki/images/7/78/Virginia_page5.png"></img>
 +
</div>
 +
<div class="right page inactive " id="page-6">
 +
<img src="/wiki/images/d/d7/Virginia_page6.png"></img>
 +
</div>
 +
<!-- PAGE SET-->
  
−
</div>
+
<div class="left page inactive" id="page-7">
−
</div>
+
<img src="/wiki/images/2/20/Virginia_page7.png"></img>
−
<script type="text/javascript">
+
</div>
−
var left_page_counter = 1;
+
<div class="right page inactive  " id="page-8">
−
var right_page_counter = 2;
+
<img src="/wiki/images/6/67/Virginia_page8.png"></img>
−
var left_page = "#page-" + left_page_counter.toString();
+
</div>
−
var right_page = "#page-" + right_page_counter.toString();
+
<!-- PAGE SET-->
−
var $left = $(left_page);
+
 
−
var $right = $(right_page);
+
<div class="left page inactive" id="page-9">
 +
<img src="/wiki/images/2/20/Virginia_page9.png"></img>
 +
</div>
 +
<div class="right page inactive  " id="page-10">
 +
<img src="/wiki/images/6/67/Virginia_page8.png"></img>
 +
</div>
 +
 
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-11">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-12">
 +
<img src=""></img>
 +
</div>
 +
 
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-13">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-14">
 +
<img src=""></img>
 +
</div>
 +
 
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-15">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-16">
 +
<img src=""></img>
 +
</div>
 +
 
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-15">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-16">
 +
<img src=""></img>
 +
</div>
 
 
−
jQuery(document).ready(function(){
+
<!-- PAGE SET-->
−
$("#right-arrow").click(function(){
+
<div class="left page inactive" id="page-17">
−
//removes current pages
+
<img src=""></img>
−
$left.addClass("inactive");
+
</div>
−
$right.addClass("inactive");
+
<div class="right page inactive " id="page-18">
 +
<img src=""></img>
 +
</div>
  
−
//changes variables
+
<!-- PAGE SET-->
−
left_page_counter = left_page_counter + 2;
+
<div class="left page inactive" id="page-19">
−
right_page_counter = right_page_counter + 2;
+
<img src=""></img>
−
left_page = "#page-" + left_page_counter.toString();
+
</div>
−
right_page = "#page-" + right_page_counter.toString();
+
<div class="right page inactive  " id="page-20">
−
$left = $(left_page);
+
<img src=""></img>
−
$right = $(right_page);
+
</div>
  
−
//displays new pages
+
<!-- PAGE SET-->
−
$left.removeClass("inactive");
+
<div class="left page inactive" id="page-21">
−
$right.removeClass("inactive");
+
<img src=""></img>
−
});
+
</div>
−
$().click(function(){
+
<div class="right page inactive " id="page-22">
−
//removes current pages
+
<img src=""></img>
−
$left.addClass("inactive");
+
</div>
−
$right.addClass("inactive");
+
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-23">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive " id="page-24">
 +
<img src=""></img>
 +
</div>
  
−
//changes variables, iff counter > 1
+
<!-- PAGE SET-->
−
if( left_page_counter >= 1) {
+
<div class="left page inactive" id="page-25">
−
left_page_counter = left_page_counter - 2;
+
<img src=""></img>
−
right_page_counter = right_page_counter - 2;
+
</div>
−
left_page = "#page-" + left_page_counter.toString();
+
<div class="right page inactive " id="page-26">
−
right_page = "#page-" + right_page_counter.toString();
+
<img src=""></img>
−
$left = $(left_page);
+
</div>
−
$right = $(right_page);
+
−
}
+
−
//displays new pages
+
−
$left.removeClass("inactive");
+
−
$right.removeClass("inactive");
+
−
});
+
−
});
+
−
</script>
+
−
<style type="text/css">
+
−
.book-wrapper {
+
−
width: 100%;
+
−
margin-top: 40px;
+
−
margin-bottom: 40px;
+
−
}
+
−
.page {
+
−
width:40%;
+
−
display:inline;
+
−
height:auto;
+
−
background: #fff;
+
−
}
+
−
.page img {
+
−
width:100%;
+
−
height:auto;
+
−
}
+
−
.right {
+
−
float:right;
+
−
margin-right:9%;
+
−
}
+
−
.left {
+
−
float:left;
+
−
margin-left:9%;
+
−
}
+
−
.default-active {
+
−
display:inline;
+
−
}
+
−
.inactive {
+
−
display:none;
+
−
}
+
−
</style>
+
  
−
<!-- SPECIFIC STRUCTURAL CODE ENDS HERE -->
+
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-27">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-28">
 +
<img src=""></img>
 +
</div>
 +
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-29">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-30">
 +
<img src=""></img>
 +
</div>
  
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-31">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-32">
 +
<img src=""></img>
 +
</div>
 +
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-33">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-34">
 +
<img src=""></img>
 +
</div>
 +
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-35">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-36">
 +
<img src=""></img>
 +
</div>
 +
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-37">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-38">
 +
<img src=""></img>
 +
</div>
 +
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-39">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-40">
 +
<img src=""></img>
 +
</div>
 +
</div>
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-41">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-42">
 +
<img src=""></img>
 +
</div>
 +
</div>
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-43">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-44">
 +
<img src=""></img>
 +
</div>
 +
</div>
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-45">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-46">
 +
<img src=""></img>
 +
</div>
 +
</div>
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-45">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-46">
 +
<img src=""></img>
 +
</div>
 +
</div>
 +
 +
<
 +
<script type="text/javascript">
 +
var left_page_counter = 1;
 +
var right_page_counter = 2;
 +
var left_page = "#page-" + left_page_counter.toString();
 +
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");
 +
}
 +
 +
$("#right-arrow").click(function(){
 +
console.log("Right Arrow: I’ve been clicked");
 +
console.log("var left_page_counter is " + left_page_counter);
 +
if ( (left_page_counter == 1) || (right_page_counter == 2) ) {
 +
$("#left-arrow").fadeOut("fast");
 +
}
 +
$("#left-arrow").fadeIn("fast");
 +
//removes current pages
 +
$left.addClass("inactive");
 +
$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
 +
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.removeClass("inactive");
 +
$right.removeClass("inactive");
 +
if( !($left.hasClass("cover") || $right.hasClass("cover")) ) {
 +
$("#right-arrow").fadeIn("fast");
 +
}
 +
if( $left.hasClass("cover") ) {
 +
$("#left-arrow").fadeOut("fast");
 +
}
 +
});
 +
});
 +
</script>
 +
<style type="text/css">
 +
.book-wrapper {
 +
width: 100%;
 +
margin-top: 40px;
 +
margin-bottom: 40px;
 +
}
 +
.page {
 +
width:40%;
 +
display:inline;
 +
height:auto;
 +
background: #fff;
 +
}
 +
.page img {
 +
width:100%;
 +
height:auto;
 +
}
 +
.right {
 +
float:right;
 +
margin-right:9%;
 +
}
 +
.left {
 +
float:left;
 +
margin-left:9%;
 +
}
 +
.default-active {
 +
display:inline;
 +
}
 +
.inactive {
 +
display:none;
 +
}
 +
</style>
 +
<!-- SPECIFIC STRUCTURAL CODE ENDS HERE -->
 
<footer>
 
<footer>
 
<div id="foot-img">
 
<div id="foot-img">
Line 180: Line 396:
 
}
 
}
 
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 227: Line 443:
 
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 256: Line 471:
 
font-family: Century Gothic, sans-serif;
 
font-family: Century Gothic, sans-serif;
 
}
 
}
−
#top_menu_14 {
+
footer {
−
/*BORDER ATTRIBUTES*/
+
−
border-top:5px solid #007bb6;
+
−
background-color: #003F87;
+
−
border-color:#003F87;
+
−
}
+
−
#top_menu_14 li.has_submenu:hover {
+
−
opacity:1.0;
+
−
background-color:#007bb6;
+
−
text-decoration:none;
+
−
}
+
−
#top_menu_14 li:hover {
+
−
opacity:1.0;
+
−
background-color:#007bb6;
+
−
text-decoration:none;
+
−
}
+
−
footer {
+
 
width:100%
 
width:100%
 
height:300px;
 
height:300px;
Line 357: Line 556:
 
}
 
}
 
#flipbook div {
 
#flipbook div {
−
 
 
}
 
}
 
#book-wrapper.container {
 
#book-wrapper.container {
Line 374: Line 572:
 
padding:10px;
 
padding:10px;
 
}
 
}
−
/* SPECIFIC STYLE CODE ENDS HERE */
+
/* SPECIFIC STYLE CODE ENDS HERE */
−
</style>
+
</style>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 01:26, 17 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.