Template:Peking2012 Epilogue
From 2012.igem.org
(Difference between revisions)
m (Created page with "<html> <style type="text/css"> - →* Peking 2012 Header * by Sun Sibai * this = /Template:Peking2012_Epilogue: #PKU_navi_index { position: fixed; bottom: 15px; left:...") |
m |
||
(48 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; | ||
padding: 0; | padding: 0; | ||
+ | overflow: hidden; | ||
} | } | ||
Line 22: | Line 24: | ||
position: fixed; | position: fixed; | ||
bottom: 15px; | bottom: 15px; | ||
- | + | left: 15px; | |
width: 88px; | width: 88px; | ||
height: 31px; | height: 31px; | ||
padding: 0; | padding: 0; | ||
+ | overflow: hidden; | ||
} | } | ||
Line 36: | Line 39: | ||
height: 31px; | height: 31px; | ||
padding: 0; | padding: 0; | ||
+ | overflow: hidden; | ||
} | } | ||
- | # | + | #PKU_navi_index_menu |
{ | { | ||
position: fixed; | position: fixed; | ||
bottom: 46px; | bottom: 46px; | ||
- | + | right: 15px; | |
- | width: | + | width: 498px; |
padding: 0; | padding: 0; | ||
+ | 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; | ||
+ | display: block; | ||
} | } | ||
- | # | + | #PKU_navi_index_menu * , |
- | # | + | #PKU_navi_history_menu * |
{ | { | ||
- | + | margin: 0; | |
- | + | padding: 0; | |
- | + | 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 93: | Line 204: | ||
<div> | <div> | ||
<ul id="PKU_navi_index"> | <ul id="PKU_navi_index"> | ||
- | <li> | + | <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 104: | Line 215: | ||
<div> | <div> | ||
<ul id="PKU_navi_history"> | <ul id="PKU_navi_history"> | ||
- | <li> | + | <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 111: | 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> | ||
</div> | </div> | ||
- | |||
<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> | ||
</div> | </div> | ||
- | --> | + | |
+ | <script type="text/javascript" > | ||
+ | /* | ||
+ | * Peking 2012 Index | ||
+ | * by Sun Sibai | ||
+ | * E-mail: sun.niasw@gmail.com | ||
+ | */ | ||
+ | var IndexOn = 0; | ||
+ | |||
+ | function IndexMouseOver(objPointer) | ||
+ | { | ||
+ | var Img = objPointer.getElementsByTagName("img"); | ||
+ | Img[2].style.display = "block"; | ||
+ | Img[1].style.display = "none"; | ||
+ | Img[0].style.display = "none"; | ||
+ | } | ||
+ | |||
+ | function IndexMouseOut(objPointer) | ||
+ | { | ||
+ | var Img = objPointer.getElementsByTagName("img"); | ||
+ | if (IndexOn == 0) | ||
+ | { | ||
+ | Img[0].style.display = "block"; | ||
+ | Img[1].style.display = "none"; | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | Img[1].style.display = "block"; | ||
+ | Img[0].style.display = "none"; | ||
+ | } | ||
+ | Img[2].style.display = "none"; | ||
+ | } | ||
+ | |||
+ | var NaviIndexMenu_Cur = 0; | ||
+ | var NaviIndexMenu_Des = 0; | ||
+ | var NaviHistoryMenu_Cur = 0; | ||
+ | var NaviHistoryMenu_Des = 0; | ||
+ | var handle_NaviIndexMenuShrink = null; | ||
+ | var handle_NaviHistoryMenuShrink = null; | ||
+ | var handle_NaviIndexMenuHide = null; | ||
+ | var handle_NaviHistoryMenuHide = null; | ||
+ | |||
+ | 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 ShrinkNaviIndexMenu() | ||
+ | { | ||
+ | IndexOn = 0; | ||
+ | NaviIndexMenu_Des = 0; | ||
+ | IndexMouseOut(document.getElementById("PKU_navi_index_button")); | ||
+ | if (handle_NaviIndexMenuShrink) | ||
+ | { | ||
+ | clearTimeout(handle_NaviIndexMenuShrink); | ||
+ | } | ||
+ | handle_NaviIndexMenuShrink = null; | ||
+ | handle_NaviIndexMenuHide = setTimeout("HideNaviIndexMenu();",500); | ||
+ | } | ||
+ | function HideNaviIndexMenu() | ||
+ | { | ||
+ | document.getElementById("PKU_navi_index_menu").style.display = 'none'; | ||
+ | if (handle_NaviIndexMenuHide) | ||
+ | { | ||
+ | clearTimeout(handle_NaviIndexMenuHide); | ||
+ | } | ||
+ | handle_NaviIndexMenuHide = null; | ||
+ | } | ||
+ | function WithdrawNaviIndexMenu() | ||
+ | { | ||
+ | handle_NaviIndexMenuShrink = setTimeout("ShrinkNaviIndexMenu();",1000); | ||
+ | } | ||
+ | function HoldNaviIndexMenu() | ||
+ | { | ||
+ | if (handle_NaviIndexMenuShrink) | ||
+ | { | ||
+ | clearTimeout(handle_NaviIndexMenuShrink); | ||
+ | handle_NaviIndexMenuShrink = null; | ||
+ | } | ||
+ | if (handle_NaviIndexMenuHide) | ||
+ | { | ||
+ | clearTimeout(handle_NaviIndexMenuHide); | ||
+ | handle_NaviIndexMenuHide = null; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function ShowNaviHistoryMenu() | ||
+ | { | ||
+ | HoldNaviHistoryMenu(); | ||
+ | document.getElementById("PKU_navi_history_menu").style.display = 'block'; | ||
+ | NaviHistoryMenu_Des = 1; | ||
+ | } | ||
+ | function ShrinkNaviHistoryMenu() | ||
+ | { | ||
+ | NaviHistoryMenu_Des = 0; | ||
+ | if (handle_NaviHistoryMenuShrink) | ||
+ | { | ||
+ | clearTimeout(handle_NaviHistoryMenuShrink); | ||
+ | } | ||
+ | handle_NaviHistoryMenuShrink = null; | ||
+ | handle_NaviHistoryMenuHide = setTimeout("HideNaviHistoryMenu();",500); | ||
+ | } | ||
+ | function HideNaviHistoryMenu() | ||
+ | { | ||
+ | document.getElementById("PKU_navi_history_menu").style.display = 'none'; | ||
+ | if (handle_NaviHistoryMenuHide) | ||
+ | { | ||
+ | clearTimeout(handle_NaviHistoryMenuHide); | ||
+ | } | ||
+ | handle_NaviHistoryMenuHide = null; | ||
+ | } | ||
+ | function WithdrawNaviHistoryMenu() | ||
+ | { | ||
+ | handle_NaviHistoryMenuShrink = setTimeout("ShrinkNaviHistoryMenu();",1000); | ||
+ | } | ||
+ | function HoldNaviHistoryMenu() | ||
+ | { | ||
+ | if (handle_NaviHistoryMenuShrink) | ||
+ | { | ||
+ | clearTimeout(handle_NaviHistoryMenuShrink); | ||
+ | handle_NaviHistoryMenuShrink = null; | ||
+ | } | ||
+ | if (handle_NaviHistoryMenuHide) | ||
+ | { | ||
+ | clearTimeout(handle_NaviHistoryMenuHide); | ||
+ | handle_NaviHistoryMenuHide = null; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function FreshNavi() | ||
+ | { | ||
+ | NaviIndexMenu_Cur += ( NaviIndexMenu_Des - NaviIndexMenu_Cur ) * 0.5; | ||
+ | NaviHistoryMenu_Cur += ( NaviHistoryMenu_Des - NaviHistoryMenu_Cur ) * 0.5; | ||
+ | |||
+ | 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); | ||
+ | |||
+ | for (menuiter=1;menuiter<menutitle.length;++menuiter) | ||
+ | { | ||
+ | menuhtml += '<li><a href="#title' + menuiter + '">' + menutitle[menuiter].innerHTML + "</a></li>"; | ||
+ | } | ||
+ | |||
+ | var menunavi = document.getElementById("PKU_navi_menu"); | ||
+ | menunavi.innerHTML = menuhtml; | ||
+ | |||
+ | HideNaviIndexMenu(); | ||
+ | HideNaviHistoryMenu(); | ||
+ | </script> | ||
</html> | </html> |
Latest revision as of 08:17, 1 September 2012