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: | + | * Version: 20071017 |
* Latest version: | * Latest version: | ||
- | * www.jtricks.com/javascript/navigation/ | + | * www.jtricks.com/javascript/navigation/floating.html |
*/ | */ | ||
- | + | var floatingMenuId = 'SideBar'; | |
- | + | var floatingMenu = | |
- | var | + | |
{ | { | ||
+ | targetX: -250, | ||
+ | targetY: 10, | ||
+ | |||
hasInner: typeof(window.innerWidth) == 'number', | hasInner: typeof(window.innerWidth) == 'number', | ||
- | hasElement: document.documentElement | + | hasElement: typeof(document.documentElement) == 'object' |
- | + | && typeof(document.documentElement.clientWidth) == 'number', | |
- | menu: document.getElementById | + | menu: |
- | ? document.getElementById( | + | document.getElementById |
+ | ? document.getElementById(floatingMenuId) | ||
: document.all | : document.all | ||
- | ? document.all[ | + | ? document.all[floatingMenuId] |
- | : document.layers[ | + | : document.layers[floatingMenuId] |
}; | }; | ||
- | + | floatingMenu.move = function () | |
{ | { | ||
- | + | floatingMenu.menu.style.left = floatingMenu.nextX + 'px'; | |
- | ? pageXOffset | + | floatingMenu.menu.style.top = floatingMenu.nextY + 'px'; |
- | : | + | } |
- | ? | + | |
- | : document.body.scrollLeft; | + | floatingMenu.computeShifts = function () |
- | if ( | + | { |
- | + | var de = document.documentElement; | |
- | + | ||
+ | floatingMenu.shiftX = | ||
+ | floatingMenu.hasInner | ||
+ | ? pageXOffset | ||
+ | : floatingMenu.hasElement | ||
+ | ? de.scrollLeft | ||
+ | : document.body.scrollLeft; | ||
+ | if (floatingMenu.targetX < 0) | ||
{ | { | ||
- | + | floatingMenu.shiftX += | |
- | + | floatingMenu.hasElement | |
- | + | ? de.clientWidth | |
- | + | : document.body.clientWidth; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | floatingMenu.shiftY = | |
+ | floatingMenu.hasInner | ||
? pageYOffset | ? pageYOffset | ||
- | : | + | : floatingMenu.hasElement |
- | ? | + | ? de.scrollTop |
: document.body.scrollTop; | : document.body.scrollTop; | ||
- | if ( | + | if (floatingMenu.targetY < 0) |
- | + | ||
- | + | ||
{ | { | ||
- | + | if (floatingMenu.hasElement && floatingMenu.hasInner) | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
{ | { | ||
- | + | // Handle Opera 8 problems | |
- | + | floatingMenu.shiftY += | |
+ | de.clientHeight > window.innerHeight | ||
+ | ? window.innerHeight | ||
+ | : de.clientHeight | ||
} | } | ||
else | else | ||
{ | { | ||
- | + | floatingMenu.shiftY += | |
- | + | 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); | ||
- | + | var cornerX = | |
- | + | floatingMenu.hasElement | |
+ | ? (floatingMenu.hasInner | ||
+ | ? pageXOffset | ||
+ | : document.documentElement.scrollLeft) + | ||
+ | (document.documentElement.clientWidth - width)/2 | ||
+ | : document.body.scrollLeft + | ||
+ | (document.body.clientWidth - width)/2; | ||
+ | return cornerX; | ||
}; | }; | ||
- | + | floatingMenu.calculateCornerY = function() | |
{ | { | ||
- | + | if (floatingMenu.targetY != 'center') | |
- | setTimeout(' | + | 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 | ||
- | + | 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 = | + | for(var i = element[listener + '_num'] -1; i >= 0; i--) |
- | if(element[listener + i](e) | + | { |
+ | if(element[listener + i](e) == false) | ||
r = false; | r = false; | ||
+ | } | ||
return r; | return r; | ||
} | } | ||
Line 167: | Line 239: | ||
}; | }; | ||
- | + | floatingMenu.init = function() | |
{ | { | ||
- | + | floatingMenu.initSecondary(); | |
- | + | floatingMenu.doFloat(); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
}; | }; | ||
- | + | // Some browsers init scrollbars only after | |
+ | // full document load. | ||
+ | floatingMenu.initSecondary = function() | ||
{ | { | ||
- | + | floatingMenu.computeShifts(); | |
- | + | floatingMenu.nextX = floatingMenu.calculateCornerX(); | |
- | + | floatingMenu.nextY = floatingMenu.calculateCornerY(); | |
- | + | floatingMenu.move(); | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | if (document.layers) | |
- | + | floatingMenu.addEvent(window, 'onload', floatingMenu.init); | |
- | + | else | |
- | + | { | |
+ | floatingMenu.init(); | ||
+ | floatingMenu.addEvent(window, 'onload', | ||
+ | floatingMenu.initSecondary); | ||
+ | } | ||
+ | //--></script> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
<div id="Long"> | <div id="Long"> | ||
<div id="apDiv2"> | <div id="apDiv2"> |
Revision as of 04:28, 30 August 2010
Min Lin
Min Lin
MIN
MIN
MIN