Template:Peking2012 Epilogue
From 2012.igem.org
(Difference between revisions)
m |
m |
||
(42 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | </div> | ||
<style type="text/css"> | <style type="text/css"> | ||
Line 12: | Line 13: | ||
position: fixed; | position: fixed; | ||
bottom: 15px; | bottom: 15px; | ||
- | + | right: 15px; | |
width: 88px; | width: 88px; | ||
height: 31px; | height: 31px; | ||
Line 23: | Line 24: | ||
position: fixed; | position: fixed; | ||
bottom: 15px; | bottom: 15px; | ||
- | + | left: 15px; | |
width: 88px; | width: 88px; | ||
height: 31px; | height: 31px; | ||
Line 41: | Line 42: | ||
} | } | ||
- | # | + | #PKU_navi_index_menu |
{ | { | ||
position: fixed; | position: fixed; | ||
bottom: 46px; | bottom: 46px; | ||
- | + | right: 15px; | |
- | width: | + | width: 498px; |
padding: 0; | padding: 0; | ||
overflow: hidden; | overflow: hidden; | ||
+ | display: block; | ||
} | } | ||
- | # | + | #PKU_navi_history_menu |
{ | { | ||
position: fixed; | position: fixed; | ||
bottom: 46px; | bottom: 46px; | ||
- | + | left: 15px; | |
- | width: | + | width: 158px; |
padding: 0; | padding: 0; | ||
overflow: hidden; | overflow: hidden; | ||
+ | display: block; | ||
} | } | ||
- | # | + | #PKU_navi_index_menu * , |
- | # | + | #PKU_navi_history_menu * |
{ | { | ||
- | + | margin: 0; | |
- | + | padding: 0; | |
- | + | ||
- | padding: 0 | + | |
overflow: hidden; | overflow: hidden; | ||
} | } | ||
- | + | #PKU_navi_index_menu ul , | |
- | # | + | #PKU_navi_history_menu ul |
{ | { | ||
- | + | line-height: 11px; | |
- | + | ||
- | + | ||
} | } | ||
- | # | + | #PKU_navi_index_menu ul#PKU_navi_menu , |
+ | #PKU_navi_history_menu ul#PKU_navi_history_menu_BoxC | ||
{ | { | ||
- | + | line-height: 17px; | |
- | + | ||
- | + | ||
} | } | ||
- | # | + | #PKU_navi_index_menu a , |
- | # | + | #PKU_navi_index_menu a:link , |
- | # | + | #PKU_navi_index_menu a:visited , |
- | # | + | #PKU_navi_history_menu a , |
- | # | + | #PKU_navi_history_menu a:link , |
- | # | + | #PKU_navi_history_menu a:visited |
{ | { | ||
color: #d3d3d3; | color: #d3d3d3; | ||
} | } | ||
- | # | + | #PKU_navi_index_menu a:hover , |
- | # | + | #PKU_navi_index_menu a:active , |
- | # | + | #PKU_navi_history_menu a:hover , |
- | # | + | #PKU_navi_history_menu a:active |
{ | { | ||
color: #ffffff; | color: #ffffff; | ||
text-decoration: none; | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | li.PKU_BoxBorderT , | ||
+ | li.PKU_BoxBorderB , | ||
+ | li.PKU_BoxBorderT li , | ||
+ | li.PKU_BoxBorderB li | ||
+ | { | ||
+ | line-height: 11px; | ||
+ | height: 11px; | ||
+ | } | ||
+ | .PKU_BoxT , | ||
+ | .PKU_BoxB | ||
+ | { | ||
+ | background-color: transparent; | ||
+ | background-repeat: repeat-x; | ||
+ | height: 11px; | ||
+ | } | ||
+ | .PKU_Box11 , | ||
+ | .PKU_Box13 , | ||
+ | .PKU_Box31 , | ||
+ | .PKU_Box33 | ||
+ | { | ||
+ | width: 11px; | ||
+ | height: 11px; | ||
+ | } | ||
+ | .PKU_Box11 | ||
+ | { | ||
+ | background-image: url("/wiki/images/6/6a/Peking2012_FloatBox_11.png"); | ||
+ | } | ||
+ | .PKU_Box13 | ||
+ | { | ||
+ | background-image: url("/wiki/images/b/b5/Peking2012_FloatBox_13.png"); | ||
+ | } | ||
+ | .PKU_Box31 | ||
+ | { | ||
+ | background-image: url("/wiki/images/1/1e/Peking2012_FloatBox_31.png"); | ||
+ | } | ||
+ | .PKU_Box33 | ||
+ | { | ||
+ | background-image: url("/wiki/images/1/10/Peking2012_FloatBox_33.png"); | ||
+ | } | ||
+ | |||
+ | .PKU_BoxT | ||
+ | { | ||
+ | background-image: url("/wiki/images/0/0f/Peking2012_FloatBox_12.png"); | ||
+ | } | ||
+ | .PKU_BoxB | ||
+ | { | ||
+ | background-image: url("/wiki/images/e/e6/Peking2012_FloatBox_32.png"); | ||
+ | } | ||
+ | .PKU_BoxC | ||
+ | { | ||
+ | background-color: transparent; | ||
+ | background-repeat: repeat; | ||
+ | background-image: url("/wiki/images/5/5f/Peking2012_FloatBox_22.png"); | ||
+ | } | ||
+ | .PKU_BoxL , | ||
+ | .PKU_BoxR | ||
+ | { | ||
+ | background-color: transparent; | ||
+ | background-repeat: repeat-y; | ||
+ | width: 11px; | ||
+ | } | ||
+ | .PKU_BoxL | ||
+ | { | ||
+ | background-image: url("/wiki/images/3/3c/Peking2012_FloatBox_21.png"); | ||
+ | } | ||
+ | .PKU_BoxR | ||
+ | { | ||
+ | background-image: url("/wiki/images/8/8c/Peking2012_FloatBox_23.png"); | ||
+ | } | ||
+ | #PKU_navi_index_menu .PKU_BoxT , | ||
+ | #PKU_navi_index_menu .PKU_BoxB | ||
+ | { | ||
+ | width: 460px; | ||
+ | } | ||
+ | #PKU_navi_history_menu .PKU_BoxT , | ||
+ | #PKU_navi_history_menu .PKU_BoxB | ||
+ | { | ||
+ | width: 120px; | ||
+ | } | ||
+ | #PKU_navi_index_menu .PKU_BoxL , | ||
+ | #PKU_navi_index_menu .PKU_BoxR | ||
+ | { | ||
+ | height: 0; /* edit in javascript */ | ||
+ | } | ||
+ | #PKU_navi_history_menu .PKU_BoxL , | ||
+ | #PKU_navi_history_menu .PKU_BoxR | ||
+ | { | ||
+ | height: 114px; | ||
+ | } | ||
+ | #PKU_navi_history_menu_BoxC | ||
+ | { | ||
+ | width: 120px; | ||
+ | height: 114px; | ||
+ | } | ||
+ | #PKU_navi_menu | ||
+ | { | ||
+ | width: 460px; | ||
+ | height: 0; /* edit in javascript */ | ||
} | } | ||
Line 105: | Line 203: | ||
<div> | <div> | ||
- | <ul id="PKU_navi_index | + | <ul id="PKU_navi_index"> |
- | <li id="PKU_navi_index_button" onmouseover="IndexMouseOver(this);" onmouseout="IndexMouseOut(this);"> | + | <li id="PKU_navi_index_button" onmouseover="IndexMouseOver(this);ShowNaviIndexMenu();" onmouseout="IndexMouseOut(this);WithdrawNaviIndexMenu();"> |
<a href="#top" title="Back to Top" > | <a href="#top" title="Back to Top" > | ||
<img class="show" src="/wiki/images/a/a9/Peking2012_Index.png" alt="Index" /> | <img class="show" src="/wiki/images/a/a9/Peking2012_Index.png" alt="Index" /> | ||
Line 116: | Line 214: | ||
</div> | </div> | ||
<div> | <div> | ||
- | <ul id="PKU_navi_history | + | <ul id="PKU_navi_history"> |
- | <li onmouseover="ButtonMouseOver(this);" onmouseout="ButtonMouseOut(this);"> | + | <li onmouseover="ButtonMouseOver(this);ShowNaviHistoryMenu();" onmouseout="ButtonMouseOut(this);WithdrawNaviHistoryMenu();"> |
<img class="show" src="/wiki/images/4/46/Peking2012_History.png" alt="Peking" /> | <img class="show" src="/wiki/images/4/46/Peking2012_History.png" alt="Peking" /> | ||
<img class="show" src="/wiki/images/b/b7/Peking2012_History_H.png" alt="Peking" /> | <img class="show" src="/wiki/images/b/b7/Peking2012_History_H.png" alt="Peking" /> | ||
Line 124: | Line 222: | ||
</div> | </div> | ||
<div> | <div> | ||
- | <ul id=" | + | <ul id="PKU_navi_history_menu" class="vertical" onmouseover="HoldNaviHistoryMenu();" onmouseout="WithdrawNaviHistoryMenu();"> |
- | <li | + | <li class="PKU_BoxBorderT"> |
- | < | + | <ul class="horizontal"> |
+ | <li> | ||
+ | <p class="PKU_Box11" ></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p name="PKU_navi_history_menu_BoxTB" class="PKU_BoxT"></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p class="PKU_Box13" ></p> | ||
+ | </li> | ||
+ | </ul> | ||
</li> | </li> | ||
<li> | <li> | ||
- | <ul> | + | <ul class="horizontal"> |
<li> | <li> | ||
- | < | + | <p name="PKU_navi_history_menu_BoxLR" class="PKU_BoxL"></p> |
</li> | </li> | ||
<li> | <li> | ||
- | <a href="https://2008.igem.org/Team:Peking" > 2008 Peking </a> | + | <ul id="PKU_navi_history_menu_BoxC" class="PKU_BoxC vertical"> |
+ | <li> | ||
+ | <a href="https://2007.igem.org/Peking" > 2007 Peking </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2008.igem.org/Team:Peking" > 2008 Peking </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2009.igem.org/Team:Peking" > 2009 Peking </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2010.igem.org/Team:Peking" > 2010 Peking </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2011.igem.org/Team:Peking_R" > 2011 Peking R </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2011.igem.org/Team:Peking_S" > 2011 Peking S </a> | ||
+ | </li> | ||
+ | </ul> | ||
</li> | </li> | ||
<li> | <li> | ||
- | < | + | <p name="PKU_navi_history_menu_BoxLR" class="PKU_BoxR"></p> |
</li> | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="PKU_BoxBorderB"> | ||
+ | <ul class="horizontal"> | ||
<li> | <li> | ||
- | < | + | <p class="PKU_Box31" ></p> |
</li> | </li> | ||
<li> | <li> | ||
- | < | + | <p name="PKU_navi_history_menu_BoxTB" class="PKU_BoxB"></p> |
</li> | </li> | ||
<li> | <li> | ||
- | < | + | <p class="PKU_Box33" ></p> |
</li> | </li> | ||
</ul> | </ul> | ||
- | |||
- | |||
- | |||
</li> | </li> | ||
</ul> | </ul> | ||
Line 157: | Line 285: | ||
<div> | <div> | ||
- | <ul id=" | + | <ul id="PKU_navi_index_menu" class="vertical" onmouseover="HoldNaviIndexMenu();" onmouseout="WithdrawNaviIndexMenu();"> |
- | <li | + | <li class="PKU_BoxBorderT"> |
- | < | + | <ul class="horizontal"> |
+ | <li> | ||
+ | <p class="PKU_Box11" ></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p name="PKU_navi_index_menu_BoxTB" class="PKU_BoxT"></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p class="PKU_Box13" ></p> | ||
+ | </li> | ||
+ | </ul> | ||
</li> | </li> | ||
<li> | <li> | ||
- | <ul id="PKU_navi_menu"> | + | <ul class="horizontal"> |
+ | <li> | ||
+ | <p name="PKU_navi_index_menu_BoxLR" class="PKU_BoxL"></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <ul id="PKU_navi_menu" class="PKU_BoxC vertical"> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p name="PKU_navi_index_menu_BoxLR" class="PKU_BoxR"></p> | ||
+ | </li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
- | <li | + | <li class="PKU_BoxBorderB"> |
- | < | + | <ul class="horizontal"> |
+ | <li> | ||
+ | <p class="PKU_Box31" ></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p name="PKU_navi_index_menu_BoxTB" class="PKU_BoxB"></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p class="PKU_Box33" ></p> | ||
+ | </li> | ||
+ | </ul> | ||
</li> | </li> | ||
</ul> | </ul> | ||
Line 191: | Line 349: | ||
{ | { | ||
var Img = objPointer.getElementsByTagName("img"); | var Img = objPointer.getElementsByTagName("img"); | ||
- | |||
if (IndexOn == 0) | if (IndexOn == 0) | ||
{ | { | ||
Line 202: | Line 359: | ||
Img[0].style.display = "none"; | Img[0].style.display = "none"; | ||
} | } | ||
+ | Img[2].style.display = "none"; | ||
} | } | ||
- | var | + | var NaviIndexMenu_Cur = 0; |
- | var | + | var NaviIndexMenu_Des = 0; |
- | var | + | var NaviHistoryMenu_Cur = 0; |
- | var | + | var NaviHistoryMenu_Des = 0; |
- | var | + | var handle_NaviIndexMenuShrink = null; |
- | var | + | var handle_NaviHistoryMenuShrink = null; |
+ | var handle_NaviIndexMenuHide = null; | ||
+ | var handle_NaviHistoryMenuHide = null; | ||
- | function | + | var menutitle = document.getElementsByTagName("h3"); |
+ | var menuhtml = ""; | ||
+ | var menuiter = null; | ||
+ | var borders = document.getElementsByName("PKU_navi_index_menu_BoxLR"); | ||
+ | var borderiter = null; | ||
+ | var indexheight = 1.5 * (menutitle.length-1) * 16; /* 1em = 16px */ | ||
+ | |||
+ | function ShowNaviIndexMenu() | ||
{ | { | ||
- | + | IndexOn = 1; | |
- | + | NaviIndexMenu_Des = 1; | |
+ | document.getElementById("PKU_navi_index_menu").style.display = 'block'; | ||
+ | HoldNaviIndexMenu(); | ||
} | } | ||
- | function | + | function ShrinkNaviIndexMenu() |
{ | { | ||
- | |||
- | |||
- | |||
IndexOn = 0; | IndexOn = 0; | ||
+ | NaviIndexMenu_Des = 0; | ||
IndexMouseOut(document.getElementById("PKU_navi_index_button")); | IndexMouseOut(document.getElementById("PKU_navi_index_button")); | ||
+ | if (handle_NaviIndexMenuShrink) | ||
+ | { | ||
+ | clearTimeout(handle_NaviIndexMenuShrink); | ||
+ | } | ||
+ | handle_NaviIndexMenuShrink = null; | ||
+ | handle_NaviIndexMenuHide = setTimeout("HideNaviIndexMenu();",500); | ||
} | } | ||
- | function | + | function HideNaviIndexMenu() |
{ | { | ||
- | + | document.getElementById("PKU_navi_index_menu").style.display = 'none'; | |
+ | if (handle_NaviIndexMenuHide) | ||
+ | { | ||
+ | clearTimeout(handle_NaviIndexMenuHide); | ||
+ | } | ||
+ | handle_NaviIndexMenuHide = null; | ||
} | } | ||
- | function | + | function WithdrawNaviIndexMenu() |
{ | { | ||
- | + | handle_NaviIndexMenuShrink = setTimeout("ShrinkNaviIndexMenu();",1000); | |
- | if ( | + | } |
+ | function HoldNaviIndexMenu() | ||
+ | { | ||
+ | if (handle_NaviIndexMenuShrink) | ||
+ | { | ||
+ | clearTimeout(handle_NaviIndexMenuShrink); | ||
+ | handle_NaviIndexMenuShrink = null; | ||
+ | } | ||
+ | if (handle_NaviIndexMenuHide) | ||
{ | { | ||
- | clearTimeout( | + | clearTimeout(handle_NaviIndexMenuHide); |
- | + | handle_NaviIndexMenuHide = null; | |
} | } | ||
} | } | ||
- | function | + | function ShowNaviHistoryMenu() |
{ | { | ||
- | + | HoldNaviHistoryMenu(); | |
- | + | document.getElementById("PKU_navi_history_menu").style.display = 'block'; | |
+ | NaviHistoryMenu_Des = 1; | ||
} | } | ||
- | function | + | function ShrinkNaviHistoryMenu() |
{ | { | ||
- | + | NaviHistoryMenu_Des = 0; | |
- | if ( | + | if (handle_NaviHistoryMenuShrink) |
- | + | { | |
- | + | clearTimeout(handle_NaviHistoryMenuShrink); | |
+ | } | ||
+ | handle_NaviHistoryMenuShrink = null; | ||
+ | handle_NaviHistoryMenuHide = setTimeout("HideNaviHistoryMenu();",500); | ||
} | } | ||
- | function | + | function HideNaviHistoryMenu() |
{ | { | ||
- | + | document.getElementById("PKU_navi_history_menu").style.display = 'none'; | |
+ | if (handle_NaviHistoryMenuHide) | ||
+ | { | ||
+ | clearTimeout(handle_NaviHistoryMenuHide); | ||
+ | } | ||
+ | handle_NaviHistoryMenuHide = null; | ||
} | } | ||
- | function | + | function WithdrawNaviHistoryMenu() |
{ | { | ||
- | + | handle_NaviHistoryMenuShrink = setTimeout("ShrinkNaviHistoryMenu();",1000); | |
- | if ( | + | } |
+ | function HoldNaviHistoryMenu() | ||
+ | { | ||
+ | if (handle_NaviHistoryMenuShrink) | ||
+ | { | ||
+ | clearTimeout(handle_NaviHistoryMenuShrink); | ||
+ | handle_NaviHistoryMenuShrink = null; | ||
+ | } | ||
+ | if (handle_NaviHistoryMenuHide) | ||
{ | { | ||
- | clearTimeout( | + | clearTimeout(handle_NaviHistoryMenuHide); |
- | + | handle_NaviHistoryMenuHide = null; | |
} | } | ||
} | } | ||
Line 266: | Line 469: | ||
function FreshNavi() | function FreshNavi() | ||
{ | { | ||
- | + | NaviIndexMenu_Cur += ( NaviIndexMenu_Des - NaviIndexMenu_Cur ) * 0.5; | |
- | + | NaviHistoryMenu_Cur += ( NaviHistoryMenu_Des - NaviHistoryMenu_Cur ) * 0.5; | |
- | var | + | var objs; |
+ | var objiter; | ||
- | + | objs = document.getElementsByName("PKU_navi_index_menu_BoxTB"); | |
- | + | for (objiter=0;objiter<objs.length;++objiter) | |
+ | { | ||
+ | objs[objiter].style.width = NaviIndexMenu_Cur * 460 + "px"; | ||
+ | } | ||
+ | objs = document.getElementsByName("PKU_navi_index_menu_BoxLR"); | ||
+ | for (objiter=0;objiter<objs.length;++objiter) | ||
+ | { | ||
+ | objs[objiter].style.height = NaviIndexMenu_Cur * indexheight + "px"; | ||
+ | } | ||
+ | objs = document.getElementById("PKU_navi_menu"); | ||
+ | objs.style.width = NaviIndexMenu_Cur * 460 + "px"; | ||
+ | objs.style.height = NaviIndexMenu_Cur * indexheight + "px"; | ||
+ | objs = document.getElementById("PKU_navi_index_menu"); | ||
+ | objs.style.right = (NaviIndexMenu_Cur-1) * 460 + 15 + "px"; | ||
- | + | objs = document.getElementsByName("PKU_navi_history_menu_BoxTB"); | |
- | + | for (objiter=0;objiter<objs.length;++objiter) | |
+ | { | ||
+ | objs[objiter].style.width = NaviHistoryMenu_Cur * 120 + "px"; | ||
+ | } | ||
+ | objs = document.getElementsByName("PKU_navi_history_menu_BoxLR"); | ||
+ | for (objiter=0;objiter<objs.length;++objiter) | ||
+ | { | ||
+ | objs[objiter].style.height = NaviHistoryMenu_Cur * 114 + "px"; | ||
+ | } | ||
+ | objs = document.getElementById("PKU_navi_history_menu_BoxC"); | ||
+ | objs.style.width = NaviHistoryMenu_Cur * 120 + "px"; | ||
+ | objs.style.height = NaviHistoryMenu_Cur * 114 + "px"; | ||
} | } | ||
var handleFreshNavi = setInterval("FreshNavi();",50); | var handleFreshNavi = setInterval("FreshNavi();",50); | ||
- | |||
- | |||
- | |||
- | |||
for (menuiter=1;menuiter<menutitle.length;++menuiter) | for (menuiter=1;menuiter<menutitle.length;++menuiter) | ||
Line 292: | Line 516: | ||
menunavi.innerHTML = menuhtml; | menunavi.innerHTML = menuhtml; | ||
+ | HideNaviIndexMenu(); | ||
+ | HideNaviHistoryMenu(); | ||
</script> | </script> | ||
</html> | </html> |
Latest revision as of 08:17, 1 September 2012