Difference between revisions of "Team:Virginia/Notebook"

 
(71 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">
 +
<img src="/wiki/images/2/22/Virginia_page3.png"></img>
 +
</div>
 +
<div class="right page inactive" id="page-4">
 +
<img src="/wiki/images/6/62/Virginia_page4.png"></img>
 +
</div>
 +
<!-- PAGE SET-->
  
−
<div id="book-wrapper">
+
<div class="left page inactive" id="page-5">
−
<div id="flipbook">
+
<img src="/wiki/images/7/78/Virginia_page5.png"></img>
−
<div class="hard">
+
</div>
−
<p>COVER PAGE</p>
+
<div class="right page inactive  " id="page-6">
−
</div>
+
<img src="/wiki/images/d/d7/Virginia_page6.png"></img>
−
<div class="hard"></div>
+
</div>
−
<div> Page 1 </div>
+
<!-- PAGE SET-->
−
<div> Page 2 </div>
+
−
<div> Page 3 </div>
+
−
<div> Page 4 </div>
+
−
<div class="hard"></div>
+
−
<div class="hard"></div>
+
−
</div></div>
+
−
<script type="text/javascript" src="http://www.turnjs.com/lib/turn.min.js"></script>
+
−
<script type="text/javascript">
+
−
$("#flipbook").turn({
+
−
width:600,
+
−
height: 800,
+
−
autoCenter: true
+
−
});
+
−
</script>
+
  
 +
<div class="left page inactive" id="page-7">
 +
<img src="/wiki/images/2/20/Virginia_page7.png"></img>
 +
</div>
 +
<div class="right page inactive  " id="page-8">
 +
<img src="/wiki/images/6/67/Virginia_page8.png"></img>
 +
</div>
 +
<!-- PAGE SET-->
  
−
<!-- SPECIFIC STRUCTURAL CODE ENDS HERE -->
+
<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>
 +
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-17">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-18">
 +
<img src=""></img>
 +
</div>
 +
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-19">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-20">
 +
<img src=""></img>
 +
</div>
 +
 +
<!-- PAGE SET-->
 +
<div class="left page inactive" id="page-21">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-22">
 +
<img src=""></img>
 +
</div>
 +
 +
<!-- 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-->
 +
<div class="left page inactive" id="page-25">
 +
<img src=""></img>
 +
</div>
 +
<div class="right page inactive  " id="page-26">
 +
<img src=""></img>
 +
</div>
 +
 +
<!-- 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 90: 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 137: 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%;
Line 165: 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 260: Line 550:
 
}
 
}
 
#flipbook {
 
#flipbook {
−
+
position:fixed;
 +
top: 200px;
 +
overflow:hidden;
 +
right:75%;
 
}
 
}
 
#flipbook div {
 
#flipbook div {
−
background:#fff;
 
 
}
 
}
−
/* SPECIFIC STYLE CODE ENDS HERE */
+
#book-wrapper.container {
−
</style>
+
margin-left:35%;
 +
margin-top: 100px;
 +
}
 +
.textbox > h1 {
 +
text-align:center;
 +
color:#fff;
 +
}
 +
.textbox > p {
 +
font-size: 15px;
 +
font-family:Arial;
 +
margin-left:20%;
 +
width:60%;
 +
padding:10px;
 +
}
 +
/* SPECIFIC STYLE CODE ENDS HERE */
 +
</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.