Difference between revisions of "Team:Virginia/Notebook"
(77 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"> | |
− | <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; | |
− | 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--> | ||
− | <!-- | + | <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 | + | <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 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--> | ||
− | < | + | <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 89: | 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 136: | 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 164: | Line 471: | ||
font-family: Century Gothic, sans-serif; | font-family: Century Gothic, sans-serif; | ||
} | } | ||
− | + | footer { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
width:100% | width:100% | ||
height:300px; | height:300px; | ||
Line 253: | Line 544: | ||
} | } | ||
/* OTHER STYLE CODE GOES BELOW HERE */ | /* OTHER STYLE CODE GOES BELOW HERE */ | ||
− | + | #book-wrapper { | |
width:100%; | width:100%; | ||
height: 1500px; | height: 1500px; | ||
background:#dddddd; | background:#dddddd; | ||
} | } | ||
− | + | #flipbook { | |
− | /* SPECIFIC STYLE CODE ENDS HERE */ | + | position:fixed; |
− | </style> | + | top: 200px; |
+ | overflow:hidden; | ||
+ | right:75%; | ||
+ | } | ||
+ | #flipbook div { | ||
+ | } | ||
+ | #book-wrapper.container { | ||
+ | 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
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.