Team:UCSF/Search

From 2010.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
-
    <head>
+
<head>
-
      <style>
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
                h1.firstHeading {
+
<title>Untitled Document</title>
-
display: none;
+
<style type="text/css">
-
}
+
-
      </style>
+
 +
h1.firstHeading {
 +
display: none;
 +
}
-
        <title>悬浮窗口示例</title>
+
#SideBar {
-
        <script type="text/javascript">
+
position:absolute;
-
            window.onscroll = function () {
+
left:0px;
-
                var div = document.getElementById("divSuspended");
+
top:0px;
-
                 div.style.top = document.body.scrollTop;
+
width:276px;
-
             }
+
bottom:0px;
-
             window.onresize = window.onscroll;
+
z-index:1;
-
             function init(){
+
}
-
                var df = document.createDocumentFragment();
+
#Long {
-
                 for(var i=0;i<20;i++){
+
position:absolute;
-
                    var p = document.createElement("p");
+
left:276px;
-
                    p.appendChild(document.createTextNode(" Line "+i));
+
top:0px;
-
                    df.appendChild(p);
+
width:80px;
-
                }
+
height:1240px;
-
                document.body.appendChild(df);
+
z-index:2;
-
                window.onscroll();
+
}
-
            }
+
#apDiv1 {
-
         </script>
+
position:absolute;
-
     </head>
+
left:285px;
-
     <body onload="init()">
+
top:15px;
-
        <p>Try scrolling this window.</p>
+
width:61px;
-
        <p>Try scrolling this window.</p>
+
height:25px;
-
        <p>Try scrolling this window.</p>
+
z-index:3;
-
        <p>Try scrolling this window.</p>
+
}
-
        <p>Try scrolling this window.</p>
+
#apDiv2 {
-
        <div id="divSuspended" style="position: absolute; buttom: 0px; right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy">这是悬浮窗口</div>
+
position:absolute;
-
    </body>
+
width:80px;
 +
height:115px;
 +
z-index:1;
 +
}
 +
</style>
 +
</head>
 +
 
 +
<body>
 +
 
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<div id="SideBar"><img src="https://static.igem.org/mediawiki/2008/0/0e/UCSF2008logo2.jpg" width="276" height="288" longdesc="https://static.igem.org/mediawiki/2008/0/0e/UCSF2008logo2.jpg" /></div>
 +
<div id="Long">
 +
  <div id="apDiv2">
 +
    <p>Min Lin</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>Min Lin</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>MIN</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>MIN</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
  </div>
 +
</div>
 +
<script type="text/javascript"><!--
 +
/* Script by: www.jtricks.com
 +
* Version: 20071127
 +
* Latest version:
 +
* www.jtricks.com/javascript/navigation/fixed_menu.html
 +
*/
 +
fixedMenuId = 'SideBar';
 +
 
 +
var fixedMenu =
 +
{
 +
    hasInner: typeof(window.innerWidth) == 'number',
 +
    hasElement: document.documentElement != null
 +
      && document.documentElement.clientWidth,
 +
 
 +
    menu: document.getElementById
 +
        ? document.getElementById(fixedMenuId)
 +
        : document.all
 +
          ? document.all[fixedMenuId]
 +
          : document.layers[fixedMenuId]
 +
};
 +
 
 +
fixedMenu.computeShifts = function()
 +
{
 +
    fixedMenu.shiftX = fixedMenu.hasInner
 +
        ? pageXOffset
 +
        : fixedMenu.hasElement
 +
          ? document.documentElement.scrollLeft
 +
          : document.body.scrollLeft;
 +
    if (fixedMenu.targetLeft > 0)
 +
        fixedMenu.shiftX += fixedMenu.targetLeft;
 +
    else
 +
    {
 +
        fixedMenu.shiftX +=
 +
            (fixedMenu.hasElement
 +
              ? document.documentElement.clientWidth
 +
              : fixedMenu.hasInner
 +
                 ? window.innerWidth - 20
 +
                : document.body.clientWidth)
 +
            - fixedMenu.targetRight
 +
            - fixedMenu.menu.offsetWidth;
 +
    }
 +
 
 +
    fixedMenu.shiftY = fixedMenu.hasInner
 +
        ? pageYOffset
 +
        : fixedMenu.hasElement
 +
          ? document.documentElement.scrollTop
 +
          : document.body.scrollTop;
 +
    if (fixedMenu.targetTop > 0)
 +
        fixedMenu.shiftY += fixedMenu.targetTop;
 +
    else
 +
    {
 +
        fixedMenu.shiftY +=
 +
             (fixedMenu.hasElement
 +
             ? document.documentElement.clientHeight
 +
            : fixedMenu.hasInner
 +
              ? window.innerHeight - 20
 +
              : document.body.clientHeight)
 +
            - fixedMenu.targetBottom
 +
            - fixedMenu.menu.offsetHeight;
 +
    }
 +
};
 +
 
 +
fixedMenu.moveMenu = function()
 +
{
 +
    fixedMenu.computeShifts();
 +
 
 +
    if (fixedMenu.currentX != fixedMenu.shiftX
 +
        || fixedMenu.currentY != fixedMenu.shiftY)
 +
    {
 +
        fixedMenu.currentX = fixedMenu.shiftX;
 +
        fixedMenu.currentY = fixedMenu.shiftY;
 +
 
 +
        if (document.layers)
 +
        {
 +
             fixedMenu.menu.left = fixedMenu.currentX;
 +
            fixedMenu.menu.top = fixedMenu.currentY;
 +
        }
 +
        else
 +
        {
 +
            fixedMenu.menu.style.left = fixedMenu.currentX + 'px';
 +
            fixedMenu.menu.style.top = fixedMenu.currentY + 'px';
 +
        }
 +
    }
 +
 
 +
    fixedMenu.menu.style.right = '';
 +
    fixedMenu.menu.style.bottom = '';
 +
};
 +
 
 +
fixedMenu.floatMenu = function()
 +
{
 +
    fixedMenu.moveMenu();
 +
    setTimeout('fixedMenu.floatMenu()', 20);
 +
};
 +
 
 +
// addEvent designed by Aaron Moore
 +
fixedMenu.addEvent = function(element, listener, handler)
 +
{
 +
    if(typeof element[listener] != 'function' ||
 +
      typeof element[listener + '_num'] == 'undefined')
 +
    {
 +
        element[listener + '_num'] = 0;
 +
        if (typeof element[listener] == 'function')
 +
        {
 +
            element[listener + 0] = element[listener];
 +
            element[listener + '_num']++;
 +
        }
 +
        element[listener] = function(e)
 +
        {
 +
            var r = true;
 +
            e = (e) ? e : window.event;
 +
            for(var i = 0; i < element[listener + '_num']; i++)
 +
                 if(element[listener + i](e) === false)
 +
                    r = false;
 +
            return r;
 +
        }
 +
    }
 +
 
 +
    //if handler is not already stored, assign it
 +
    for(var i = 0; i < element[listener + '_num']; i++)
 +
        if(element[listener + i] == handler)
 +
            return;
 +
    element[listener + element[listener + '_num']] = handler;
 +
    element[listener + '_num']++;
 +
};
 +
 
 +
fixedMenu.supportsFixed = function()
 +
{
 +
    var testDiv = document.createElement("div");
 +
    testDiv.id = "testingPositionFixed";
 +
    testDiv.style.position = "fixed";
 +
    testDiv.style.top = "0px";
 +
    testDiv.style.right = "0px";
 +
    document.body.appendChild(testDiv);
 +
    var offset = 1;
 +
    if (typeof testDiv.offsetTop == "number"
 +
        && testDiv.offsetTop != null
 +
        && testDiv.offsetTop != "undefined")
 +
    {
 +
        offset = parseInt(testDiv.offsetTop);
 +
    }
 +
    if (offset == 0)
 +
    {
 +
         return true;
 +
     }
 +
 
 +
     return false;
 +
};
 +
 
 +
fixedMenu.init = function()
 +
{
 +
    if (fixedMenu.supportsFixed())
 +
        fixedMenu.menu.style.position = "fixed";
 +
    else
 +
    {
 +
        var ob =
 +
            document.layers
 +
            ? fixedMenu.menu
 +
            : fixedMenu.menu.style;
 +
 
 +
        fixedMenu.targetLeft = parseInt(ob.left);
 +
        fixedMenu.targetTop = parseInt(ob.top);
 +
        fixedMenu.targetRight = parseInt(ob.right);
 +
        fixedMenu.targetBottom = parseInt(ob.bottom);
 +
 
 +
        if (document.layers)
 +
        {
 +
            menu.left = 0;
 +
            menu.top = 0;
 +
        }
 +
        fixedMenu.addEvent(window, 'onscroll', fixedMenu.moveMenu);
 +
        fixedMenu.floatMenu();
 +
    }
 +
};
 +
 
 +
fixedMenu.addEvent(window, 'onload', fixedMenu.init);
 +
 
 +
//--></script>
 +
</body>
</html>
</html>

Revision as of 04:42, 30 August 2010

Untitled Document

 

 

Min Lin

 

 

 

 

 

 

 

 

Min Lin

 

 

 

 

 

MIN

 

 

 

 

 

 

MIN

 

 

 

 

 

 

 

 

 

 

Retrieved from "http://2010.igem.org/Team:UCSF/Search"