Team:Queens Canada/Notebook

From 2012.igem.org

(Difference between revisions)
 
(5 intermediate revisions not shown)
Line 1: Line 1:
-
{{Template:Queens_Canada/Header}}
+
{{Template:Queens_Canada/Notebook}}
<html>
<html>
-
<div id="NotebookNav" style="display:inline">
+
<head>
-
<div class="menu">
+
-
<ul class="primary-menu">
+
-
Week
+
-
<li>
+
-
<a href="#">1</a>&nbsp;
+
-
<a href="#">2</a>&nbsp;
+
-
<a href="#">3</a>&nbsp;
+
-
<a href="#">4</a>&nbsp;
+
-
<a href="#">5</a>&nbsp;
+
-
<a href="#">6</a>&nbsp;
+
-
<a href="#">7</a>&nbsp;
+
-
<a href="#">8</a>&nbsp;
+
-
<a href="#">9</a>&nbsp;
+
-
<a href="#">10</a>&nbsp;
+
-
<a href="#">11</a>&nbsp;
+
-
<a href="#">12</a>&nbsp;
+
-
<a href="#">13</a>&nbsp;
+
-
<a href="#">14</a>&nbsp;
+
-
<a href="#">15</a>&nbsp;
+
-
<a href="#">16</a>&nbsp;
+
-
<a href="#">17</a>&nbsp;
+
-
<a href="#">18</a>&nbsp;
+
 +
<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>
 +
<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>
</li>
-
</ul>
 
</div>
</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>
</div>
-
</html>
+
 
 +
   
 +
<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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
    • Protocol Content

    Retrieved from "http://2012.igem.org/Team:Queens_Canada/Notebook"