Template:Peking2012 Epilogue

From 2012.igem.org

(Difference between revisions)
m
m
 
(45 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;
-
   left: 15px;
+
   right: 15px;
   width: 88px;
   width: 88px;
   height: 31px;
   height: 31px;
Line 23: Line 24:
   position: fixed;
   position: fixed;
   bottom: 15px;
   bottom: 15px;
-
   right: 15px;
+
   left: 15px;
   width: 88px;
   width: 88px;
   height: 31px;
   height: 31px;
Line 41: Line 42:
}
}
-
#PKU_navi_L
+
#PKU_navi_index_menu
{
{
   position: fixed;
   position: fixed;
   bottom: 46px;
   bottom: 46px;
-
   left: 15px;
+
   right: 15px;
-
   width: 480px;
+
   width: 498px;
   padding: 0;
   padding: 0;
   overflow: hidden;
   overflow: hidden;
 +
  display: block;
}
}
-
#PKU_navi_R
+
#PKU_navi_history_menu
{
{
   position: fixed;
   position: fixed;
   bottom: 46px;
   bottom: 46px;
-
   right: 200px;
+
   left: 15px;
-
   width: 150px;
+
   width: 158px;
   padding: 0;
   padding: 0;
   overflow: hidden;
   overflow: hidden;
 +
  display: block;
}
}
-
#PKU_navi_L ul ,
+
#PKU_navi_index_menu * ,
-
#PKU_navi_R ul
+
#PKU_navi_history_menu *
{
{
-
   background-image: url("/wiki/images/1/1c/Peking2012_Above_B.png");
+
   margin: 0;
-
  background-color: transparent;
+
   padding: 0;
-
  background-repeat: repeat-y;
+
-
   padding: 0 10px;
+
   overflow: hidden;
   overflow: hidden;
}
}
-
 
+
#PKU_navi_index_menu ul ,
-
#PKU_navi_L ul li
+
#PKU_navi_history_menu ul
{
{
-
   width: 460px;
+
   line-height: 11px;
-
  padding: 0;
+
}
-
   overflow: hidden;
+
#PKU_navi_index_menu ul#PKU_navi_menu ,
 +
#PKU_navi_history_menu ul#PKU_navi_history_menu_BoxC
 +
{
 +
   line-height: 17px;
}
}
-
#PKU_navi_L ul a ,
+
#PKU_navi_index_menu a ,
-
#PKU_navi_L ul a:link ,
+
#PKU_navi_index_menu a:link ,
-
#PKU_navi_L ul a:visited ,
+
#PKU_navi_index_menu a:visited ,
-
#PKU_navi_R ul a ,
+
#PKU_navi_history_menu a ,
-
#PKU_navi_R ul a:link ,
+
#PKU_navi_history_menu a:link ,
-
#PKU_navi_R ul a:visited
+
#PKU_navi_history_menu a:visited
{
{
   color: #d3d3d3;
   color: #d3d3d3;
}
}
-
#PKU_navi_L ul a:hover ,
+
#PKU_navi_index_menu a:hover ,
-
#PKU_navi_L ul a:active ,
+
#PKU_navi_index_menu a:active ,
-
#PKU_navi_R ul a:hover ,
+
#PKU_navi_history_menu a:hover ,
-
#PKU_navi_R ul a:active
+
#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 99: Line 203:
<div>
<div>
-
  <ul id="PKU_navi_index" onmousemove="ShowNaviL();" onmouseout="WithdrawNaviL();">
+
  <ul id="PKU_navi_index">
-
   <li 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 111: Line 215:
<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 118: Line 222:
</div>
</div>
<div>
<div>
-
  <ul id="PKU_navi_R">
+
  <ul id="PKU_navi_history_menu" class="vertical" onmouseover="HoldNaviHistoryMenu();" onmouseout="WithdrawNaviHistoryMenu();">
-
   <li style="line-height:11px;">
+
   <li class="PKU_BoxBorderT">
-
   <img src="/wiki/images/6/68/Peking2012_Above_S.png" alt="" />
+
   <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>
-
     <a href="https://2007.igem.org/Team:Peking" > 2007 Peking </a>
+
     <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>
-
     <a href="https://2009.igem.org/Team:Peking" > 2009 Peking </a>
+
     <p name="PKU_navi_history_menu_BoxLR" class="PKU_BoxR"></p>
     </li>
     </li>
 +
  </ul>
 +
  </li>
 +
  <li class="PKU_BoxBorderB">
 +
  <ul class="horizontal">
     <li>
     <li>
-
     <a href="https://2010.igem.org/Team:Peking" > 2010 Peking </a>
+
     <p class="PKU_Box31" ></p>
     </li>
     </li>
     <li>
     <li>
-
     <a href="https://2011.igem.org/Team:Peking_R" > 2011 Peking R </a>
+
     <p name="PKU_navi_history_menu_BoxTB" class="PKU_BoxB"></p>
     </li>
     </li>
     <li>
     <li>
-
     <a href="https://2011.igem.org/Team:Peking_S" > 2011 Peking S </a>
+
     <p class="PKU_Box33" ></p>
     </li>
     </li>
   </ul>
   </ul>
-
  </li>
 
-
  <li style="line-height:11px;">
 
-
  <img src="/wiki/images/e/e3/Peking2012_Above_E.png" alt="" />
 
   </li>
   </li>
  </ul>
  </ul>
Line 151: Line 285:
<div>
<div>
-
  <ul id="PKU_navi_L" onmouseover="HoldNaviL();" onmouseout="WithdrawNaviL();">
+
  <ul id="PKU_navi_index_menu" class="vertical" onmouseover="HoldNaviIndexMenu();" onmouseout="WithdrawNaviIndexMenu();">
-
   <li style="line-height:11px;">
+
   <li class="PKU_BoxBorderT">
-
   <img src="/wiki/images/6/68/Peking2012_Above_S.png" alt="" />
+
   <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 style="line-height:11px;">
+
   <li class="PKU_BoxBorderB">
-
   <img src="/wiki/images/e/e3/Peking2012_Above_E.png" alt="" />
+
   <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 185: Line 349:
{
{
   var Img = objPointer.getElementsByTagName("img");
   var Img = objPointer.getElementsByTagName("img");
-
  Img[2].style.display = "none";
 
   if (IndexOn == 0)
   if (IndexOn == 0)
   {
   {
Line 196: Line 359:
     Img[0].style.display = "none";
     Img[0].style.display = "none";
   }
   }
 +
  Img[2].style.display = "none";
}
}
-
var NaviL_Cur = 0;
+
var NaviIndexMenu_Cur = 0;
-
var NaviL_Des = 0;
+
var NaviIndexMenu_Des = 0;
-
var NaviR_Cur = 0;
+
var NaviHistoryMenu_Cur = 0;
-
var NaviR_Des = 0;
+
var NaviHistoryMenu_Des = 0;
-
var handle_NaviL = null;
+
var handle_NaviIndexMenuShrink = null;
-
var handle_NaviR = null;
+
var handle_NaviHistoryMenuShrink = null;
 +
var handle_NaviIndexMenuHide = null;
 +
var handle_NaviHistoryMenuHide = null;
-
function ShowNaviL()
+
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()
{
{
-
   HoldNaviL();
+
   IndexOn = 1;
-
   NaviL_Des = 1;
+
   NaviIndexMenu_Des = 1;
 +
  document.getElementById("PKU_navi_index_menu").style.display = 'block';
 +
  HoldNaviIndexMenu();
}
}
-
function HideNaviL()
+
function ShrinkNaviIndexMenu()
{
{
-
  NaviL_Des = 0;
 
-
  if (handle_NaviL) clearTimeout(handleNaviL);
 
-
  handleNaviL = null;
 
   IndexOn = 0;
   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 WithdrawNaviL()
+
function HideNaviIndexMenu()
{
{
-
   handle_NaviL = setTimeout("HideNaviL();",1000);
+
   document.getElementById("PKU_navi_index_menu").style.display = 'none';
 +
  if (handle_NaviIndexMenuHide)
 +
  {
 +
    clearTimeout(handle_NaviIndexMenuHide);
 +
  }
 +
  handle_NaviIndexMenuHide = null;
}
}
-
function HoldNaviL()
+
function WithdrawNaviIndexMenu()
{
{
-
   IndexOn = 1;
+
   handle_NaviIndexMenuShrink = setTimeout("ShrinkNaviIndexMenu();",1000);
-
   if (handle_NaviL)
+
}
 +
function HoldNaviIndexMenu()
 +
{
 +
  if (handle_NaviIndexMenuShrink)
 +
  {
 +
    clearTimeout(handle_NaviIndexMenuShrink);
 +
    handle_NaviIndexMenuShrink = null;
 +
  }
 +
   if (handle_NaviIndexMenuHide)
   {
   {
-
     clearTimeout(handle_NaviL);
+
     clearTimeout(handle_NaviIndexMenuHide);
-
     handle_NaviL = null;
+
     handle_NaviIndexMenuHide = null;
   }
   }
}
}
-
function ShowNaviR()
+
function ShowNaviHistoryMenu()
{
{
-
   HoldNaviR();
+
   HoldNaviHistoryMenu();
-
   NaviR_Des = 1;
+
   document.getElementById("PKU_navi_history_menu").style.display = 'block';
 +
  NaviHistoryMenu_Des = 1;
}
}
-
function HideNaviR()
+
function ShrinkNaviHistoryMenu()
{
{
-
   NaviR_Des = 0;
+
   NaviHistoryMenu_Des = 0;
-
   if (handle_NaviR) clearTimeout(handleNaviR);
+
   if (handle_NaviHistoryMenuShrink)
-
   handleNaviR = null;
+
  {
-
   IndexOn = 0;
+
    clearTimeout(handle_NaviHistoryMenuShrink);
 +
   }
 +
  handle_NaviHistoryMenuShrink = null;
 +
   handle_NaviHistoryMenuHide = setTimeout("HideNaviHistoryMenu();",500);
}
}
-
function WithdrawNaviR()
+
function HideNaviHistoryMenu()
{
{
-
   handle_NaviR = setTimeout("HideNaviR();",1000);
+
   document.getElementById("PKU_navi_history_menu").style.display = 'none';
 +
  if (handle_NaviHistoryMenuHide)
 +
  {
 +
    clearTimeout(handle_NaviHistoryMenuHide);
 +
  }
 +
  handle_NaviHistoryMenuHide = null;
}
}
-
function HoldNaviR()
+
function WithdrawNaviHistoryMenu()
{
{
-
   IndexOn = 1;
+
   handle_NaviHistoryMenuShrink = setTimeout("ShrinkNaviHistoryMenu();",1000);
-
   if (handle_NaviR)
+
}
 +
function HoldNaviHistoryMenu()
 +
{
 +
  if (handle_NaviHistoryMenuShrink)
 +
  {
 +
    clearTimeout(handle_NaviHistoryMenuShrink);
 +
    handle_NaviHistoryMenuShrink = null;
 +
  }
 +
   if (handle_NaviHistoryMenuHide)
   {
   {
-
     clearTimeout(handle_NaviR);
+
     clearTimeout(handle_NaviHistoryMenuHide);
-
     handle_NaviR = null;
+
     handle_NaviHistoryMenuHide = null;
   }
   }
}
}
Line 259: Line 469:
function FreshNavi()
function FreshNavi()
{
{
-
   NaviL_Cur += ( NaviL_Des - NaviL_Cur ) * 0.35;
+
   NaviIndexMenu_Cur += ( NaviIndexMenu_Des - NaviIndexMenu_Cur ) * 0.5;
-
   NaviR_Cur += ( NaviR_Des - NaviR_Cur ) * 0.35;
+
   NaviHistoryMenu_Cur += ( NaviHistoryMenu_Des - NaviHistoryMenu_Cur ) * 0.5;
    
    
-
   var tmp;
+
   var objs;
 +
  var objiter;
-
   tmp = document.getElementById("PKU_navi_L");
+
   objs = document.getElementsByName("PKU_navi_index_menu_BoxTB");
-
   tmp.style.width = NaviL_Cur * 480 + "px";
+
  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";
-
   tmp = document.getElementById("PKU_navi_R");
+
   objs = document.getElementsByName("PKU_navi_history_menu_BoxTB");
-
   tmp.style.width = NaviR_Cur * 150 + "px";
+
  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);
-
var menutitle = document.getElementsByTagName("h3");
+
for (menuiter=1;menuiter<menutitle.length;++menuiter)
-
var menuhtml = "";
+
-
var menuiter = null;
+
-
 
+
-
for (menuiter=0;menuiter<menutitle.length;++menuiter)
+
{
{
   menuhtml += '<li><a href="#title' + menuiter + '">' + menutitle[menuiter].innerHTML + "</a></li>";
   menuhtml += '<li><a href="#title' + menuiter + '">' + menutitle[menuiter].innerHTML + "</a></li>";
Line 285: Line 516:
menunavi.innerHTML = menuhtml;
menunavi.innerHTML = menuhtml;
 +
HideNaviIndexMenu();
 +
HideNaviHistoryMenu();
</script>
</script>
</html>
</html>

Latest revision as of 08:17, 1 September 2012

  • Peking Peking

Retrieved from "http://2012.igem.org/Template:Peking2012_Epilogue"