Team:Queens Canada/Notebook
From 2012.igem.org
(Difference between revisions)
(2 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<html> | <html> | ||
<head> | <head> | ||
+ | |||
+ | <style type="text/css"> | ||
+ | #titlecontainer p | ||
+ | { | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | #titlecontainer | ||
+ | { | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | #NotebookNav .menu .primary-menu #w1 a{ | ||
+ | background: none repeat scroll 0 0 #00438F; | ||
+ | } | ||
+ | #NotebookNav .menu .primary-menu #w1 a:hover{ | ||
+ | background: none repeat scroll 0 0 #00438F; | ||
+ | } | ||
+ | #notebookselector | ||
+ | { | ||
+ | position:relative; | ||
+ | height: 75px; | ||
+ | width 75px; | ||
+ | background-color: #D84421; | ||
+ | } | ||
+ | #protocolselector | ||
+ | { | ||
+ | position:relative; | ||
+ | height: 75px; | ||
+ | width 75px; | ||
+ | background-color: #EF7901; | ||
+ | } | ||
+ | #weekcontainer | ||
+ | { | ||
+ | position: relative; | ||
+ | right: 75px; | ||
+ | width: 75px; | ||
+ | background-color: black; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | #weekcontainer li | ||
+ | { | ||
+ | height: 25px; | ||
+ | list-style: none; | ||
+ | margin-bottom: 5px; | ||
+ | margin-top: 5px; | ||
+ | background-color: #F6B402; | ||
+ | text-align: center; | ||
+ | width: 50px; | ||
+ | overflow:hidden; | ||
+ | position:relative; | ||
+ | left:25px; | ||
+ | padding-right:25px; | ||
+ | border-radius: 25px 0px 0px 25px; | ||
+ | vertical-align: middle; | ||
+ | opacity: 0.8; | ||
+ | font-family: 'Gill sans MT'; | ||
+ | } | ||
+ | #selectorcontainer | ||
+ | { | ||
+ | margin-top: 20px; | ||
+ | padding-left: 5px; | ||
+ | padding-bottom: 10px; | ||
+ | left: 1000px; | ||
+ | position:relative; | ||
+ | width:90px; | ||
+ | padding-top: 30px; | ||
+ | background-color:white; | ||
+ | } | ||
+ | </style> | ||
+ | <script type="text/javscript" src="http://dl.dropbox.com/u/46807995/jquery.hoverflow.js"> </script> | ||
</head> | </head> | ||
+ | <body> | ||
+ | |||
+ | <div id="labcontent"> | ||
+ | <div id="selectorcontainer"> | ||
+ | <div id="edge"> | ||
+ | </div> | ||
+ | <div id="notebookselector" style="width:100px;"> | ||
+ | Notebook | ||
+ | </div> | ||
+ | <div id="protocolselector" style="width:100px;"> | ||
+ | Protocols | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="NotebookTitle" style="height:38px";> | ||
+ | <div id="titlecontainer"> | ||
+ | <p id="title"> Notebook - Week 1 </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="weekcontainer"> | ||
+ | <li> | ||
+ | 1 | ||
+ | </li> | ||
+ | <li> | ||
+ | 2 | ||
+ | </li> | ||
+ | <li> | ||
+ | 3 | ||
+ | </li> | ||
+ | <li> | ||
+ | 4 | ||
+ | </li> | ||
+ | <li> | ||
+ | 5 | ||
+ | </li> | ||
+ | <li> | ||
+ | 6 | ||
+ | </li> | ||
+ | <li> | ||
+ | 7 | ||
+ | </li> | ||
+ | <li> | ||
+ | 8 | ||
+ | </li> | ||
+ | <li> | ||
+ | 9 | ||
+ | </li> | ||
+ | <li> | ||
+ | 10 | ||
+ | </li> | ||
+ | <li> | ||
+ | 11 | ||
+ | </li> | ||
+ | <li> | ||
+ | 12 | ||
+ | </li> | ||
+ | <li> | ||
+ | 13 | ||
+ | </li> | ||
+ | <li> | ||
+ | 14 | ||
+ | </li> | ||
+ | <li> | ||
+ | 15 | ||
+ | </li> | ||
+ | <li> | ||
+ | 16 | ||
+ | </li> | ||
+ | <li> | ||
+ | 17 | ||
+ | </li> | ||
+ | <li> | ||
+ | 18 | ||
+ | </li> | ||
+ | </div> | ||
+ | |||
+ | <div id="protocolcontent">Protocol Content</div> | ||
+ | <div id="notebookcontent"> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | var nm = 1; | ||
+ | $('#weekcontainer li').click(function() | ||
+ | { | ||
+ | var nm = $(this).text(); | ||
+ | $('#titlecontainer').fadeOut(300).delay(900); | ||
+ | document.getElementById("titlecontainer").innerHTML = "<p> Notebook - Week " + nm + "</p>"; | ||
+ | $('#titlecontainer').fadeIn(); | ||
+ | }); | ||
+ | </script> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | $("#notebook").click(function () { | ||
+ | $("#protocolcontent").fadeOut(250, function () { | ||
+ | $("#notebookcontent").fadeIn(250); | ||
+ | }); | ||
+ | return false; | ||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | <script> | ||
+ | $("#protocols").click(function () { | ||
+ | $("#notebookcontent").fadeOut(250, function () { | ||
+ | $("#protocolcontent").fadeIn(250); | ||
+ | }); | ||
+ | return false; | ||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </div> | ||
+ | <script type="text/javascript"> | ||
+ | $('#weekcontainer li').hover(function(e) | ||
+ | { | ||
+ | $(this).filter(':not(:animated)').animate({ left: "0px", opacity: 1 }); | ||
+ | }, function() { | ||
+ | $(this).animate({ left: "25px", opacity: 0.8 }); | ||
+ | }); | ||
+ | $('#notebookselector').hover(function(e) | ||
+ | { | ||
+ | $(this).filter(':not(:animated)').animate({ opacity: 1 }); | ||
+ | }, function() { | ||
+ | $(this).animate({ opacity: 0.8 }); | ||
+ | }); | ||
+ | $('#protocolselector').hover(function(e) | ||
+ | { | ||
+ | $(this).filter(':not(:animated)').animate({ opacity: 1 }); | ||
+ | }, function() { | ||
+ | $(this).animate({ opacity: 0.8 }); | ||
+ | }); | ||
+ | |||
- | </ | + | </script> |
+ | </body> |
Latest revision as of 18:09, 16 August 2012
Control
Notebook
Protocols
Notebook - Week 1
Protocol Content