Team:ZJU-China/Notebook

From 2011.igem.org

(Difference between revisions)
Line 67: Line 67:
</div>
</div>
<div class="main">
<div class="main">
-
<script type="text/javascript">
+
<div  class="pagetitle" id="nbook">
-
//<![CDATA[
+
      <h3>Notebook/Diaries</h3>  
-
window.onload = function() {
+
</div>
-
rolinTab("rolin")
+
<div class="leftul">
-
}
+
<ul id="week">
-
function rolinTab(obj) {
+
<li id="w1">week1</li>
-
var list = $(obj).getElementsByTagName("LI");
+
<li id="w2">week2</li>
-
var state = {show:false,hidden:false,showObj:false};
+
<li id="w3">week3</li>
-
for (var i=0; i<list.length; i++) {
+
<li id="w4">week4</li>
-
var tmp = new rolinItem(list[i],state);
+
<li id="w5">week5</li>
-
if (i == 0) tmp.pShow();
+
<li id="w6">week6</li>
-
}
+
-
}
+
-
function rolinItem(obj,state) {
+
-
var speed = 0.0666;
+
-
var range = 1;
+
-
var interval;
+
-
var tarH;
+
-
var tar = this;
+
-
var head = getFirstChild(obj);
+
-
var content = getNextChild(head);
+
-
var isOpen = false;
+
-
this.pHidden = function() {
+
-
if (isOpen) hidden();
+
-
}
+
-
this.pShow = show;
+
-
var baseH = content.offsetHeight;
+
-
content.style.display = "none";
+
-
var isOpen = false;
+
-
head.onmouseover = function() {
+
-
this.style.background = "#EFEFEF";
+
-
}
+
-
head.onmouseout = mouseout;
+
-
head.onclick = function() {
+
-
this.style.background = "#EFEFEF";
+
-
if (!state.show && !state.hidden) {
+
-
if (!isOpen) {
+
-
head.onmouseout = null;
+
-
show();
+
-
} else {
+
-
hidden();
+
-
}
+
-
}
+
-
}
+
-
function mouseout() {
+
-
this.style.background = "#FFF"
+
-
}
+
-
function show() {
+
-
head.style.borderBottom = "1px solid #DADADA";
+
-
state.show = true;
+
-
if (state.openObj && state.openObj != tar ) {
+
-
state.openObj.pHidden();
+
-
}
+
-
content.style.height = "0px";
+
-
content.style.display = "block";
+
-
content.style.overflow = "hidden";
+
-
state.openObj = tar;
+
-
tarH = baseH;
+
-
interval = setInterval(move,10);
+
-
}
+
-
function showS() {
+
-
isOpen = true;
+
-
state.show = false;
+
-
}
+
-
function hidden() {
+
-
state.hidden = true;
+
-
tarH = 0;
+
-
interval = setInterval(move,10);
+
-
}
+
-
function hiddenS() {
+
-
head.style.borderBottom = "none";
+
-
head.onmouseout = mouseout;
+
-
head.onmouseout();
+
-
content.style.display = "none";
+
-
isOpen = false;
+
-
state.hidden = false;
+
-
}
+
-
function move() {
+
-
var dist = (tarH - content.style.height.pxToNum())*speed;
+
-
if (Math.abs(dist) < 1) dist = dist > 0 ? 1: -1;
+
-
content.style.height = (content.style.height.pxToNum() + dist) + "px";
+
-
if (Math.abs(content.style.height.pxToNum() - tarH) <= range ) {
+
-
clearInterval(interval);
+
-
content.style.height = tarH + "px";
+
-
if (tarH != 0) {
+
-
showS()
+
-
} else {
+
-
hiddenS();
+
-
}
+
-
}
+
-
}
+
-
}
+
-
var $ = function($) {return document.getElementById($)};
+
-
String.prototype.pxToNum = function() {return Number(this.replace("px",""))}
+
-
function getFirstChild(obj) {
+
-
var result = obj.firstChild;
+
-
while (!result.tagName) {
+
-
result = result.nextSibling;
+
-
}
+
-
return result;
+
-
}
+
-
function getNextChild(obj) {
+
-
var result = obj.nextSibling;
+
-
while (!result.tagName) {
+
-
result = result.nextSibling;
+
-
}
+
-
return result;
+
-
}
+
-
//]]>
+
-
</script>
+
-
<ul class="rolinList" id="rolin">
+
-
<li>
+
-
<h3>WEEK 1</h3>
+
-
<div class="n_content"><p>comming soon...<br /><br />
+
-
comming soon...<br />
+
-
comming soon...<br />
+
-
comming soon...<br />
+
-
comming soon...</p><a href="javascript:jumpto('week2.html')">More info</a></div>
+
-
</li>
+
-
<li>
+
-
<h3>WEEK 2</h3>
+
-
<div class="n_content"><p>comming soon...<br /><br />
+
-
comming soon...<br />
+
-
comming soon...<br />
+
-
comming soon...<br />
+
-
comming soon...</p><a href="javascript:jumpto('week2.html')">More info</a></div>
+
-
</li>
+
-
<li>
+
-
<h3>WEEK 3 </h3>
+
-
<div class="n_content"><p>comming soon...<br /><br />
+
-
comming soon...<br />
+
-
comming soon...<br />
+
-
comming soon...<br />
+
-
comming soon...</p><a href="javascript:jumpto('week2.html')">More info</a></div></li>
+
-
<li>
+
-
<h3>WEEK 4</h3>
+
-
<div class="n_content"><p>comming soon...<br /><br />
+
-
comming soon...<br />
+
-
comming soon...<br />
+
-
comming soon...<br />
+
-
comming soon...</p><a href="javascript:jumpto('week2.html')">More info</a></div></li>
+
-
<li>
+
-
<h3>WEEK 5</h3>
+
-
<div class="n_content"><p>comming soon...<br /><br />
+
-
comming soon...<br />
+
-
comming soon...<br />
+
-
comming soon...<br />
+
-
comming soon...</p><a href="javascript:jumpto('week2.html')">More info</a></div>
+
-
</li>
+
-
<li>
+
-
<h3>WEEK 6</h3>
+
-
<div class="n_content"><p>comming soon...<br /><br />
+
-
comming soon...<br />
+
-
comming soon...<br />
+
-
comming soon...<br />
+
-
comming soon...</p><a href="javascript:jumpto('week2.html')">More info</a></div>
+
-
</li>
+
</ul>
</ul>
 +
</div>
 +
<div class="bigblock" id="week1">
 +
<div class="block" id="monday">
 +
<h1>Monday</h1>
 +
<hr/>
 +
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
 +
</div>
 +
<div class="block" id="tuesday">
 +
<h1>Tuesday</h1>
 +
<hr/>
 +
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p></div>
 +
</div>
<script type="text/javascript">
<script type="text/javascript">
-
<!--
+
document.getElementById('w1').onclick= function(){
-
var displaymode=0
+
        document.getElementById('week1').style.display='block'
-
var iframecode='<iframe id="external" src="https://2011.igem.org/Team:ZJU-China/Notebook/week1" name= "week" frameborder="no" width="730" height="1500" align="right" scrolling="auto" ></iframe>'
+
    };
-
if (displaymode==0)
+
-
document.write(iframecode)
+
-
function jumpto(inputurl){
+
-
if (document.getElementById&&displaymode==0)
+
-
document.getElementById("external").src=inputurl
+
-
else if (document.all&&displaymode==0)
+
-
document.all.external.src=inputurl
+
-
else{
+
-
if (!window.win2||win2.closed)
+
-
win2=window.open(inputurl)
+
-
else{
+
-
win2.location=inputurl
+
-
win2.focus()
+
-
}
+
-
}
+
-
}
+
-
//-->
+
</script>
</script>
-
 
+
<p style ="clear:both"></p>
<p style ="clear:both"></p>
<p style ="clear:both"></p>
             </div>
             </div>

Revision as of 11:24, 9 September 2011

Notebook/Diaries

  • week1
  • week2
  • week3
  • week4
  • week5
  • week6

Monday


aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Tuesday


bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb