Team:UCSF/Search

From 2010.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
<html>
-
<head>
+
    <head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
        <title>悬浮窗口示例</title>
-
<title>Untitled Document</title>
+
        <script type="text/javascript">
-
<style type="text/css">
+
            window.onscroll = function () {
-
#SideBar {
+
                var div = document.getElementById("divSuspended");
-
position:absolute;
+
                 div.style.top = document.body.scrollTop;
-
left:0px;
+
             }
-
top:0px;
+
             window.onresize = window.onscroll;
-
width:276px;
+
             function init(){
-
bottom:0px;
+
                var df = document.createDocumentFragment();
-
z-index:1;
+
                 for(var i=0;i<20;i++){
-
}
+
                    var p = document.createElement("p");
-
#Long {
+
                    p.appendChild(document.createTextNode(" Line "+i));
-
position:absolute;
+
                    df.appendChild(p);
-
left:276px;
+
                }
-
top:0px;
+
                document.body.appendChild(df);
-
width:80px;
+
                window.onscroll();
-
height:1240px;
+
            }
-
z-index:2;
+
         </script>
-
}
+
     </head>
-
#apDiv1 {
+
     <body onload="init()">
-
position:absolute;
+
        <p>Try scrolling this window.</p>
-
left:285px;
+
        <div id="divSuspended" style="position: absolute; buttom: 0px; right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy">这是悬浮窗口</div>
-
top:15px;
+
    </body>
-
width:61px;
+
-
height:25px;
+
-
z-index:3;
+
-
}
+
-
#apDiv2 {
+
-
position:absolute;
+
-
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:32, 30 August 2010

悬浮窗口示例

Try scrolling this window.

这是悬浮窗口

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