Team:UCSF/Search

From 2010.igem.org

(Difference between revisions)
Line 44: Line 44:
<script type="text/javascript"><!--
<script type="text/javascript"><!--
/* Script by: www.jtricks.com
/* Script by: www.jtricks.com
-
  * Version: 20071127
+
  * Version: 20071017
  * Latest version:
  * Latest version:
-
  * www.jtricks.com/javascript/navigation/fixed_menu.html
+
  * www.jtricks.com/javascript/navigation/floating.html
  */
  */
-
fixedMenuId = 'SideBar';
+
var floatingMenuId = 'SideBar';
-
 
+
var floatingMenu =
-
var fixedMenu =  
+
{
{
 +
    targetX: -250,
 +
    targetY: 10,
 +
     hasInner: typeof(window.innerWidth) == 'number',
     hasInner: typeof(window.innerWidth) == 'number',
-
     hasElement: document.documentElement != null
+
     hasElement: typeof(document.documentElement) == 'object'
-
      && document.documentElement.clientWidth,
+
        && typeof(document.documentElement.clientWidth) == 'number',
-
     menu: document.getElementById
+
     menu:
-
         ? document.getElementById(fixedMenuId)
+
        document.getElementById
 +
         ? document.getElementById(floatingMenuId)
         : document.all
         : document.all
-
           ? document.all[fixedMenuId]
+
           ? document.all[floatingMenuId]
-
           : document.layers[fixedMenuId]
+
           : document.layers[floatingMenuId]
};
};
-
fixedMenu.computeShifts = function()
+
floatingMenu.move = function ()
{
{
-
     fixedMenu.shiftX = fixedMenu.hasInner
+
     floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
-
         ? pageXOffset
+
    floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
-
         : fixedMenu.hasElement
+
}
-
           ? document.documentElement.scrollLeft
+
 
-
           : document.body.scrollLeft;
+
floatingMenu.computeShifts = function ()
-
     if (fixedMenu.targetLeft > 0)
+
{
-
        fixedMenu.shiftX += fixedMenu.targetLeft;
+
    var de = document.documentElement;
-
    else
+
 
 +
    floatingMenu.shiftX =
 +
        floatingMenu.hasInner
 +
         ? pageXOffset
 +
         : floatingMenu.hasElement
 +
           ? de.scrollLeft
 +
           : document.body.scrollLeft;
 +
     if (floatingMenu.targetX < 0)
     {
     {
-
         fixedMenu.shiftX +=  
+
         floatingMenu.shiftX +=
-
             (fixedMenu.hasElement
+
             floatingMenu.hasElement
-
              ? document.documentElement.clientWidth
+
            ? de.clientWidth
-
              : fixedMenu.hasInner
+
            : document.body.clientWidth;
-
                ? window.innerWidth - 20
+
-
                : document.body.clientWidth)
+
-
            - fixedMenu.targetRight
+
-
            - fixedMenu.menu.offsetWidth;
+
     }
     }
-
     fixedMenu.shiftY = fixedMenu.hasInner
+
     floatingMenu.shiftY =  
 +
        floatingMenu.hasInner
         ? pageYOffset
         ? pageYOffset
-
         : fixedMenu.hasElement
+
         : floatingMenu.hasElement
-
           ? document.documentElement.scrollTop
+
           ? de.scrollTop
           : document.body.scrollTop;
           : document.body.scrollTop;
-
     if (fixedMenu.targetTop > 0)
+
     if (floatingMenu.targetY < 0)
-
        fixedMenu.shiftY += fixedMenu.targetTop;
+
-
    else
+
     {
     {
-
         fixedMenu.shiftY +=
+
         if (floatingMenu.hasElement && floatingMenu.hasInner)
-
            (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;
+
             // Handle Opera 8 problems
-
            fixedMenu.menu.top = fixedMenu.currentY;
+
            floatingMenu.shiftY +=
 +
                de.clientHeight > window.innerHeight
 +
                ? window.innerHeight
 +
                : de.clientHeight
         }
         }
         else
         else
         {
         {
-
             fixedMenu.menu.style.left = fixedMenu.currentX + 'px';
+
             floatingMenu.shiftY +=
-
            fixedMenu.menu.style.top = fixedMenu.currentY + 'px';
+
                floatingMenu.hasElement
 +
                ? de.clientHeight
 +
                : document.body.clientHeight;
         }
         }
     }
     }
 +
}
 +
 +
floatingMenu.calculateCornerX = function()
 +
{
 +
    if (floatingMenu.targetX != 'center')
 +
        return floatingMenu.shiftX + floatingMenu.targetX;
 +
 +
    var width = parseInt(floatingMenu.menu.offsetWidth);
-
     fixedMenu.menu.style.right = '';
+
     var cornerX =
-
    fixedMenu.menu.style.bottom = '';
+
        floatingMenu.hasElement
 +
        ? (floatingMenu.hasInner
 +
          ? pageXOffset
 +
          : document.documentElement.scrollLeft) +
 +
          (document.documentElement.clientWidth - width)/2
 +
        : document.body.scrollLeft +
 +
          (document.body.clientWidth - width)/2;
 +
    return cornerX;
};
};
-
fixedMenu.floatMenu = function()
+
floatingMenu.calculateCornerY = function()
{
{
-
     fixedMenu.moveMenu();
+
     if (floatingMenu.targetY != 'center')
-
     setTimeout('fixedMenu.floatMenu()', 20);
+
        return floatingMenu.shiftY + floatingMenu.targetY;
 +
 
 +
    var height = parseInt(floatingMenu.menu.offsetHeight);
 +
 
 +
    // Handle Opera 8 problems
 +
    var clientHeight =
 +
        floatingMenu.hasElement && floatingMenu.hasInner
 +
        && document.documentElement.clientHeight
 +
            > window.innerHeight
 +
        ? window.innerHeight
 +
        : document.documentElement.clientHeight
 +
 
 +
    var cornerY =
 +
        floatingMenu.hasElement
 +
        ? (floatingMenu.hasInner 
 +
          ? pageYOffset
 +
          : document.documentElement.scrollTop) +
 +
          (clientHeight - height)/2
 +
        : document.body.scrollTop +
 +
          (document.body.clientHeight - height)/2;
 +
    return cornerY;
 +
};
 +
 
 +
floatingMenu.doFloat = function()
 +
{
 +
    // Check if reference to menu was lost due
 +
    // to ajax manipuations
 +
    if (!floatingMenu.menu)
 +
    {
 +
        menu = document.getElementById
 +
            ? document.getElementById(floatingMenuId)
 +
            : document.all
 +
              ? document.all[floatingMenuId]
 +
              : document.layers[floatingMenuId];
 +
 
 +
        initSecondary();
 +
    }
 +
 
 +
    var stepX, stepY;
 +
 
 +
    floatingMenu.computeShifts();
 +
 
 +
    var cornerX = floatingMenu.calculateCornerX();
 +
 
 +
    var stepX = (cornerX - floatingMenu.nextX) * .07;
 +
    if (Math.abs(stepX) < .5)
 +
    {
 +
        stepX = cornerX - floatingMenu.nextX;
 +
    }
 +
 
 +
    var cornerY = floatingMenu.calculateCornerY();
 +
 
 +
    var stepY = (cornerY - floatingMenu.nextY) * .07;
 +
    if (Math.abs(stepY) < .5)
 +
    {
 +
        stepY = cornerY - floatingMenu.nextY;
 +
    }
 +
 
 +
    if (Math.abs(stepX) > 0 ||
 +
        Math.abs(stepY) > 0)
 +
    {
 +
        floatingMenu.nextX += stepX;
 +
        floatingMenu.nextY += stepY;
 +
        floatingMenu.move();
 +
    }
 +
 
 +
     setTimeout('floatingMenu.doFloat()', 20);
};
};
// addEvent designed by Aaron Moore
// addEvent designed by Aaron Moore
-
fixedMenu.addEvent = function(element, listener, handler)
+
floatingMenu.addEvent = function(element, listener, handler)
{
{
     if(typeof element[listener] != 'function' ||  
     if(typeof element[listener] != 'function' ||  
Line 152: Line 222:
             var r = true;
             var r = true;
             e = (e) ? e : window.event;
             e = (e) ? e : window.event;
-
             for(var i = 0; i < element[listener + '_num']; i++)
+
             for(var i = element[listener + '_num'] -1; i >= 0; i--)
-
                 if(element[listener + i](e) === false)
+
            {
 +
                 if(element[listener + i](e) == false)
                     r = false;
                     r = false;
 +
            }
             return r;
             return r;
         }
         }
Line 167: Line 239:
};
};
-
fixedMenu.supportsFixed = function()
+
floatingMenu.init = function()
{
{
-
     var testDiv = document.createElement("div");
+
     floatingMenu.initSecondary();
-
     testDiv.id = "testingPositionFixed";
+
     floatingMenu.doFloat();
-
    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()
+
// Some browsers init scrollbars only after
 +
// full document load.
 +
floatingMenu.initSecondary = function()
{
{
-
     if (fixedMenu.supportsFixed())
+
     floatingMenu.computeShifts();
-
        fixedMenu.menu.style.position = "fixed";
+
    floatingMenu.nextX = floatingMenu.calculateCornerX();
-
     else
+
     floatingMenu.nextY = floatingMenu.calculateCornerY();
-
    {
+
    floatingMenu.move();
-
        var ob =  
+
}
-
            document.layers
+
-
            ? fixedMenu.menu
+
-
            : fixedMenu.menu.style;
+
-
        fixedMenu.targetLeft = parseInt(ob.left);
+
if (document.layers)
-
        fixedMenu.targetTop = parseInt(ob.top);
+
    floatingMenu.addEvent(window, 'onload', floatingMenu.init);
-
        fixedMenu.targetRight = parseInt(ob.right);
+
else
-
        fixedMenu.targetBottom = parseInt(ob.bottom);
+
{
 +
    floatingMenu.init();
 +
    floatingMenu.addEvent(window, 'onload',
 +
        floatingMenu.initSecondary);
 +
}
 +
//--></script>
-
        if (document.layers)
 
-
        {
 
-
            menu.left = 0;
 
-
            menu.top = 0;
 
-
        }
 
-
        fixedMenu.addEvent(window, 'onscroll', fixedMenu.moveMenu);
 
-
        fixedMenu.floatMenu();
 
-
    }
 
-
};
 
-
 
-
fixedMenu.addEvent(window, 'onload', fixedMenu.init);
 
-
 
-
//--></script>
 
<div id="Long">
<div id="Long">
   <div id="apDiv2">
   <div id="apDiv2">

Revision as of 04:28, 30 August 2010

Untitled Document

 

 

Min Lin

 

 

 

 

 

 

 

 

Min Lin

 

 

 

 

 

MIN

 

 

 

 

 

 

MIN

 

 

 

 

 

 

MIN

 

 

 

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