Team:NCTU Formosa/source/header-notebook

From 2014.igem.org

(Difference between revisions)
 
(48 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<style>
<style>
-
.effect {
+
 
-
  left: 81.25%;
+
-
}
+
-
#cover{
+
-
background-color: #fbfbfb;
+
-
}
+
.download li {
.download li {
Line 16: Line 11:
padding:0;
padding:0;
margin:0;
margin:0;
-
background: #efefef;
+
background: #000;
border:0;
border:0;
margin-bottom: 5px;
margin-bottom: 5px;
}
}
-
 
+
.download2 li {
 +
display: inline-block;
 +
border-radius: 3px;
 +
text-align: center;
 +
font-weight: 700;
 +
width: 90%;
 +
padding:0;
 +
margin:0;
 +
background: #000;
 +
border:0;
 +
margin-bottom: 5px;
 +
}
 +
.cal li {
 +
display: inline-block;
 +
border-radius: 3px;
 +
text-align: center;
 +
font-weight: 700;
 +
width: 13%;
 +
padding:0;
 +
margin:0;
 +
background: #000;
 +
border:0;
 +
margin-bottom: 5px;
 +
cursor: pointer;
 +
}
 +
.cal li:hover {color:red;}
h3 {
h3 {
padding-top: 0px;
padding-top: 0px;
Line 29: Line 49:
.cal-wrapper {
.cal-wrapper {
display: block;
display: block;
-
background: blue;
+
background: #133453;
border-radius: 5px;
border-radius: 5px;
padding: 5px;
padding: 5px;
Line 35: Line 55:
}
}
.calendar {
.calendar {
-
background-color: white;
+
background-color: black;
border-radius: 5px;
border-radius: 5px;
-
width: 60%;
+
width: 40%;
float: left;
float: left;
padding-top:5px;
padding-top:5px;
Line 52: Line 72:
text-align: center;
text-align: center;
font-weight: 700;
font-weight: 700;
-
width: 13.4%;
+
width: 12.5%;
padding:0;
padding:0;
margin:0;
margin:0;
Line 58: Line 78:
border:0;
border:0;
margin-bottom: 5px;
margin-bottom: 5px;
 +
color:black;
}
}
.calendar-day li {
.calendar-day li {
Line 63: Line 84:
border-radius: 3px;
border-radius: 3px;
text-align: center;
text-align: center;
-
width: 13.4%;
+
width: 12.5%;
padding:0;
padding:0;
margin:0;
margin:0;
Line 76: Line 97:
.calendar-day:hover li {
.calendar-day:hover li {
background: black;
background: black;
-
color: white;
+
color: #F00;
}
}
.clear {
.clear {
Line 82: Line 103:
}
}
.calendar-note {
.calendar-note {
-
background-color: white;
+
background-color: black;
border-radius: 5px;
border-radius: 5px;
-
width: 39%;
+
width: 59%;
float: right;
float: right;
-
height: 100%;
+
height: 216px;
 +
overflow:scroll;
}
}
.note {
.note {
Line 93: Line 115:
}
}
.calendar-day:nth-child(2) li {
.calendar-day:nth-child(2) li {
-
background: yellow ;
+
background: #C2C2C2 ;
}
}
.note:nth-child(1) {
.note:nth-child(1) {
Line 99: Line 121:
}
}
.calendar-day:nth-child(3) li {
.calendar-day:nth-child(3) li {
-
background: red;
+
background: #909090;
}
}
.note:nth-child(2) {
.note:nth-child(2) {
Line 105: Line 127:
}
}
.calendar-day:nth-child(4) li {
.calendar-day:nth-child(4) li {
-
background: green;
+
background: #777;
}
}
.note:nth-child(3) {
.note:nth-child(3) {
Line 111: Line 133:
}
}
.calendar-day:nth-child(5) li {
.calendar-day:nth-child(5) li {
-
background: blue;
+
background: #545454;
}
}
.note:nth-child(4) {
.note:nth-child(4) {
 +
border-left: blue 3px solid;
 +
}
 +
.calendar-day:nth-child(6) li {
 +
background:#424242;
 +
}
 +
.note:nth-child(5) {
 +
border-left: blue 3px solid;
 +
}
 +
.calendar-day:nth-child(7) li {
 +
background:rgba(39, 39, 39, 1)
 +
}
 +
.note:nth-child(6) {
border-left: blue 3px solid;
border-left: blue 3px solid;
}
}
Line 120: Line 154:
function initMenu() {
function initMenu() {
var block = $(".calendar-day");
var block = $(".calendar-day");
-
var index, indexi;
+
var index;
block.hover(function(){window.status = $(this)}, function(){window.status = ""});
block.hover(function(){window.status = $(this)}, function(){window.status = ""});
$('.note').hide();
$('.note').hide();
Line 126: Line 160:
block.click(
block.click(
function() {
function() {
-
index = block.index(this)+1;
+
index = $(this).closest('.calendar').find('.calendar-day').index(this)+1;
-
indexi = block.closest('.calendar').find('.note:nth-child(1)').index(this);
+
-
index-= indexi;
+
$(this).closest('.cal-wrapper').find('.note:nth-child('+index+')').slideToggle('fast');
$(this).closest('.cal-wrapper').find('.note:nth-child('+index+')').slideToggle('fast');
 +
$(this).closest('.cal-wrapper').find('.note:nth-child('+index+')').siblings().hide();
}
}
);}
);}
$(document).ready(function() {initMenu();});
$(document).ready(function() {initMenu();});
</script>
</script>
 +
<script>
 +
$(document).ready(function(){
 +
$(".doo2").hide(500) ;
 +
$(".doo3").hide(500) ;
 +
$(".doo4").hide(500) ;
 +
$(".doo5").hide(500) ;
 +
$(".doo6").hide(500) ;
 +
$(".doo7").hide(500) ;
 +
$(".doo8").hide(500) ;
 +
$(".doo9").hide(500) ;
 +
  $("#move1").click(function(){
 +
$(".doo1").slideToggle(500);
 +
$(".doo2").hide(500) ;
 +
$(".doo3").hide(500) ;
 +
$(".doo4").hide(500) ;
 +
$(".doo5").hide(500) ;
 +
$(".doo6").hide(500) ;
 +
$(".doo7").hide(500) ;
 +
$(".doo8").hide(500) ;
 +
$(".doo9").hide(500) ;
 +
  });
 +
  $("#move2").click(function(){
 +
  $(".doo2").slideToggle(500);
 +
$(".doo1").hide(500) ;
 +
 +
$(".doo3").hide(500) ;
 +
$(".doo4").hide(500) ;
 +
$(".doo5").hide(500) ;
 +
$(".doo6").hide(500) ;
 +
$(".doo7").hide(500) ;
 +
$(".doo8").hide(500) ;
 +
$(".doo9").hide(500) ;
 +
  });
 +
  $("#move3").click(function(){
 +
  $(".doo3").slideToggle(500);
 +
$(".doo1").hide(500) ;
 +
$(".doo2").hide(500) ;
 +
 +
$(".doo4").hide(500) ;
 +
$(".doo5").hide(500) ;
 +
$(".doo6").hide(500) ;
 +
$(".doo7").hide(500) ;
 +
$(".doo8").hide(500) ;
 +
$(".doo9").hide(500) ;
 +
  });
 +
  $("#move4").click(function(){
 +
  $(".doo4").toggle(500);
 +
$(".doo1").hide(500) ;
 +
$(".doo2").hide(500) ;
 +
$(".doo3").hide(500) ;
 +
 +
$(".doo5").hide(500) ;
 +
$(".doo6").hide(500) ;
 +
$(".doo7").hide(500) ;
 +
$(".doo8").hide(500) ;
 +
$(".doo9").hide(500) ;
 +
  });
 +
  $("#move5").click(function(){
 +
  $(".doo5").toggle(500);
 +
$(".doo1").hide(500) ;
 +
$(".doo2").hide(500) ;
 +
$(".doo3").hide(500) ;
 +
$(".doo4").hide(500) ;
 +
 +
$(".doo6").hide(500) ;
 +
$(".doo7").hide(500) ;
 +
$(".doo8").hide(500) ;
 +
$(".doo9").hide(500) ;
 +
  });
 +
  $("#move6").click(function(){
 +
  $(".doo6").toggle(500);
 +
$(".doo1").hide(500) ;
 +
$(".doo2").hide(500) ;
 +
$(".doo3").hide(500) ;
 +
$(".doo4").hide(500) ;
 +
$(".doo5").hide(500) ;
 +
 +
$(".doo7").hide(500) ;
 +
$(".doo8").hide(500) ;
 +
$(".doo9").hide(500) ;
 +
  });
 +
  $("#move7").click(function(){
 +
  $(".doo7").toggle(500);
 +
$(".doo1").hide(500) ;
 +
$(".doo2").hide(500) ;
 +
$(".doo3").hide(500) ;
 +
$(".doo4").hide(500) ;
 +
$(".doo5").hide(500) ;
 +
$(".doo6").hide(500) ;
 +
 +
$(".doo8").hide(500) ;
 +
$(".doo9").hide(500) ;
 +
  });
 +
  $("#move8").click(function(){
 +
  $(".doo8").toggle(500);
 +
$(".doo1").hide(500) ;
 +
$(".doo2").hide(500) ;
 +
$(".doo3").hide(500) ;
 +
$(".doo4").hide(500) ;
 +
$(".doo5").hide(500) ;
 +
$(".doo6").hide(500) ;
 +
$(".doo7").hide(500) ;
 +
 +
$(".doo9").hide(500) ;
 +
  });
 +
  $("#move9").click(function(){
 +
  $(".doo9").toggle(500);
 +
$(".doo1").hide(500) ;
 +
$(".doo2").hide(500) ;
 +
$(".doo3").hide(500) ;
 +
$(".doo4").hide(500) ;
 +
$(".doo5").hide(500) ;
 +
$(".doo6").hide(500) ;
 +
$(".doo7").hide(500) ;
 +
$(".doo8").hide(500) ;
 +
 +
  });
 +
});
 +
</script>
 +
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
 +
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
 +
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
 +
<link rel="stylesheet" href="/resources/demos/style.css">

Latest revision as of 06:07, 28 August 2015

Retrieved from "http://2014.igem.org/Team:NCTU_Formosa/source/header-notebook"