Difference between revisions of "Team:Virginia/Notebook"

 
(25 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>
 +
<!-- PAGE SET-->
  
−
<a href="javascript:void(0);"><div id="book-cover"><img src="/wiki/images/b/b5/Virginia_page1.png"></div></a>
+
<div class="left page inactive" id="page-5">
 +
<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 id="default-hidden-notebook">
+
<div class="left page inactive" id="page-7">
−
<a href="javascript:void(0);"><img src="/wiki/images/2/21/Virginia_notebook_right.png" id="right-arrow" class="arrow"></img></a>
+
<img src="/wiki/images/2/20/Virginia_page7.png"></img>
−
<a href="javascript:void(0);"><img src="/wiki/images/2/2d/Virginia_notebook_left.png" id="left-arrow" class="arrow"></img></a>
+
</div>
−
<div class="book-wrapper">
+
<div class="right page inactive  " id="page-8">
−
<div class="left page" id="page-1">
+
<img src="/wiki/images/6/67/Virginia_page8.png"></img>
−
<img src="/wiki/images/1/16/Virginia_page_2.png">
+
</div>
−
</img>
+
<!-- PAGE SET-->
−
</div>
+
 
−
<div class="right page" id="page-2">
+
<div class="left page inactive" id="page-9">
−
<img src="/wiki/images/1/16/Virginia_page_2.png"></img>
+
<img src="/wiki/images/2/20/Virginia_page9.png"></img>
−
</div>
+
</div>
−
<div class="left page inactive" id="page-3">
+
<div class="right page inactive  " id="page-10">
−
<img src="/wiki/images/1/16/Virginia_page_2.png"></img>
+
<img src="/wiki/images/6/67/Virginia_page8.png"></img>
−
</div>
+
</div>
−
<div class="right page inactive" id="page-4">
+
 
−
<img src="/wiki/images/1/16/Virginia_page_2.png"></img>
+
<!-- PAGE SET-->
−
</div>
+
<div class="left page inactive" id="page-11">
−
</div>
+
<img src=""></img>
−
<style type="text/css">
+
</div>
−
.arrow {
+
<div class="right page inactive " id="page-12">
−
position: absolute;
+
<img src=""></img>
−
top: 400px;
+
</div>
−
z-index:20;
+
 
−
width: 5%;
+
<!-- PAGE SET-->
−
height: auto;
+
<div class="left page inactive" id="page-13">
−
}
+
<img src=""></img>
−
#book-cover > img {
+
</div>
−
width:40%;
+
<div class="right page inactive  " id="page-14">
−
height:auto;
+
<img src=""></img>
−
margin-left:30%;
+
</div>
−
}
+
 
−
#book-cover {
+
<!-- PAGE SET-->
−
display:block;
+
<div class="left page inactive" id="page-15">
−
width:60%;
+
<img src=""></img>
−
height: auto;
+
</div>
−
padding: 50px;
+
<div class="right page inactive  " id="page-16">
−
margin-left:20%;
+
<img src=""></img>
−
}
+
</div>
−
#default-hidden-notebook {
+
 
−
display:none;
+
<!-- PAGE SET-->
−
}
+
<div class="left page inactive" id="page-15">
−
#left-arrow {
+
<img src=""></img>
−
left:2.5%;
+
</div>
−
}
+
<div class="right page inactive  " id="page-16">
−
#right-arrow {
+
<img src=""></img>
−
right:2.5%;
+
</div>
−
}
+
−
</style>
+
−
</div>
+
−
<script type="text/javascript">
+
−
var left_page_counter = 0;
+
−
var right_page_counter = 1;
+
−
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(){
+
<!-- PAGE SET-->
−
$("#book-cover").click(function(){
+
<div class="left page inactive" id="page-17">
−
$("#book-cover").addClass("inactive");
+
<img src=""></img>
−
$("#default-hidden-notebook").css("display","block");
+
</div>
−
});
+
<div class="right page inactive " id="page-18">
−
$("#right-arrow").click(function(){
+
<img src=""></img>
−
//removes current pages
+
</div>
−
$left.addClass("inactive");
+
−
$right.addClass("inactive");
+
  
−
//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>
−
$("#left-arrow").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>
  
−
+
<!-- PAGE SET-->
−
left_page_counter = left_page_counter - 2;
+
<div class="left page inactive" id="page-25">
−
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-26">
−
$left = $(left_page);
+
<img src=""></img>
−
$right = $(right_page);
+
</div>
−
+
−
//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 204: 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 251: 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 280: 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 381: Line 556:
 
}
 
}
 
#flipbook div {
 
#flipbook div {
−
 
 
}
 
}
 
#book-wrapper.container {
 
#book-wrapper.container {
Line 398: 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.