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;
-
   left: 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;
-
   right: 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_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;
 +
  display: block;
}
}
-
#PKU_navi_R
+
#PKU_navi_history_menu
{
{
   position: fixed;
   position: fixed;
   bottom: 46px;
   bottom: 46px;
-
   right: 15px;
+
   left: 15px;
-
   width: 150px;
+
   width: 158px;
   padding: 0;
   padding: 0;
 +
  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;
+
   overflow: hidden;
-
  padding: 0 10px;
+
}
}
-
 
+
#PKU_navi_index_menu ul ,
-
#PKU_navi_L ul li
+
#PKU_navi_history_menu ul
{
{
-
   width: 460px;
+
   line-height: 11px;
-
   padding: 0;
+
}
 +
#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 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="PKU_navi_R">
+
  <ul id="PKU_navi_history_menu" class="vertical" onmouseover="HoldNaviHistoryMenu();" onmouseout="WithdrawNaviHistoryMenu();">
-
   <li>
+
   <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>
 
-
  <img src="/wiki/images/e/e3/Peking2012_Above_E.png" alt="" />
 
   </li>
   </li>
  </ul>
  </ul>
</div>
</div>
-
<!--
 
<div>
<div>
-
  <ul id="PKU_navi_L">
+
  <ul id="PKU_navi_index_menu" class="vertical" onmouseover="HoldNaviIndexMenu();" onmouseout="WithdrawNaviIndexMenu();">
-
   <li>
+
   <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>
+
   <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>
</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

  • Peking Peking

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