BerkiGEM2007 WikiPlaying2

From 2007.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
 +
 +
<script type="text/javascript">
<script type="text/javascript">
 +
var Spry;
var Spry;
-
if(!Spry)
+
if (!Spry) Spry = {};
 +
if (!Spry.Widget) Spry.Widget = {};
 +
 
 +
Spry.Widget.Accordion = function(element, opts)
{
{
-
Spry = {};
+
this.element = this.getElement(element);
-
}
+
this.defaultPanel = 0;
-
if(!Spry.Widget)
+
this.hoverClass = "AccordionPanelTabHover";
 +
this.openClass = "AccordionPanelOpen";
 +
this.closedClass = "AccordionPanelClosed";
 +
this.focusedClass = "AccordionFocused";
 +
this.enableAnimation = true;
 +
this.enableKeyboardNavigation = true;
 +
this.currentPanel = null;
 +
this.animator = null;
 +
this.hasFocus = null;
 +
this.duration = 500;
 +
 
 +
this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
 +
this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
 +
 
 +
this.useFixedPanelHeights = true;
 +
this.fixedPanelHeight = 0;
 +
 
 +
Spry.Widget.Accordion.setOptions(this, opts, true);
 +
 
 +
// Unfortunately in some browsers like Safari, the Stylesheets our
 +
// page depends on may not have been loaded at the time we are called.
 +
// This means we have to defer attaching our behaviors until after the
 +
// onload event fires, since some of our behaviors rely on dimensions
 +
// specified in the CSS.
 +
 
 +
if (Spry.Widget.Accordion.onloadDidFire)
 +
this.attachBehaviors();
 +
else
 +
Spry.Widget.Accordion.loadQueue.push(this);
 +
};
 +
 
 +
Spry.Widget.Accordion.onloadDidFire = false;
 +
Spry.Widget.Accordion.loadQueue = [];
 +
 
 +
Spry.Widget.Accordion.addLoadListener = function(handler)
{
{
-
Spry.Widget = {};
+
if (typeof window.addEventListener != 'undefined')
-
}
+
window.addEventListener('load', handler, false);
 +
else if (typeof document.addEventListener != 'undefined')
 +
document.addEventListener('load', handler, false);
 +
else if (typeof window.attachEvent != 'undefined')
 +
window.attachEvent('onload', handler);
 +
};
-
// Constructor for Menu Bar
+
Spry.Widget.Accordion.processLoadQueue = function(handler)
-
// element should be an ID of an unordered list (<ul> tag)
+
-
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
+
-
Spry.Widget.MenuBar = function(element, opts)
+
{
{
-
this.init(element, opts);
+
Spry.Widget.Accordion.onloadDidFire = true;
 +
var q = Spry.Widget.Accordion.loadQueue;
 +
var qlen = q.length;
 +
for (var i = 0; i < qlen; i++)
 +
q[i].attachBehaviors();
};
};
-
Spry.Widget.MenuBar.prototype.init = function(element, opts)
+
Spry.Widget.Accordion.addLoadListener(Spry.Widget.Accordion.processLoadQueue);
 +
 
 +
Spry.Widget.Accordion.prototype.getElement = function(ele)
{
{
-
this.element = this.getElement(element);
+
if (ele && typeof ele == "string")
 +
return document.getElementById(ele);
 +
return ele;
 +
};
-
// represents the current (sub)menu we are operating on
+
Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
-
this.currMenu = null;
+
{
 +
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
 +
return;
 +
ele.className += (ele.className ? " " : "") + className;
 +
};
-
var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
+
Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
-
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
+
{
 +
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
 +
return;
 +
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
 +
};
 +
 
 +
Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
 +
{
 +
if (!optionsObj)
 +
return;
 +
for (var optionName in optionsObj)
{
{
-
// bail on older unsupported browsers
+
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
 +
continue;
 +
obj[optionName] = optionsObj[optionName];
 +
}
 +
};
 +
 
 +
Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(panel)
 +
{
 +
if (panel)
 +
this.addClassName(this.getPanelTab(panel), this.hoverClass);
 +
};
 +
 
 +
Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(panel)
 +
{
 +
if (panel)
 +
this.removeClassName(this.getPanelTab(panel), this.hoverClass);
 +
};
 +
 
 +
Spry.Widget.Accordion.prototype.openPanel = function(panel)
 +
{
 +
var panelA = this.currentPanel;
 +
var panelB = panel;
 +
 +
if (!panelB || panelA == panelB)
return;
return;
 +
 +
var contentA;
 +
if( panelA )
 +
contentA = this.getPanelContent(panelA);
 +
var contentB = this.getPanelContent(panelB);
 +
 +
if (! contentB)
 +
return;
 +
 +
if (this.useFixedPanelHeights && !this.fixedPanelHeight)
 +
{
 +
this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
}
}
-
// load hover images now
+
if (this.enableAnimation)
-
if(opts)
+
{
{
-
for(var k in opts)
+
if (this.animator)
-
{
+
this.animator.stop();
-
var rollover = new Image;
+
this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration });
-
rollover.src = opts[k];
+
this.animator.start();
-
}
+
}
 +
else
 +
{
 +
if(contentA)
 +
contentA.style.height = "0px";
 +
contentB.style.height = (this.useFixedPanelHeights ? this.fixedPanelHeight : contentB.scrollHeight) + "px";
}
}
-
if(this.element)
+
if(panelA)
{
{
-
this.currMenu = this.element;
+
this.removeClassName(panelA, this.openClass);
-
var items = this.element.getElementsByTagName('li');
+
this.addClassName(panelA, this.closedClass);
-
for(var i=0; i<items.length; i++)
+
-
{
+
-
this.initialize(items[i], element, isie);
+
-
if(isie)
+
-
{
+
-
this.addClassName(items[i], "MenuBarItemIE");
+
-
items[i].style.position = "static";
+
-
}
+
-
}
+
-
if(isie)
+
-
{
+
-
if(this.hasClassName(this.element, "MenuBarVertical"))
+
-
{
+
-
this.element.style.position = "relative";
+
-
}
+
-
var linkitems = this.element.getElementsByTagName('a');
+
-
for(var i=0; i<linkitems.length; i++)
+
-
{
+
-
linkitems[i].style.position = "relative";
+
-
}
+
-
}
+
}
}
 +
 +
this.removeClassName(panelB, this.closedClass);
 +
this.addClassName(panelB, this.openClass);
 +
 +
this.currentPanel = panelB;
};
};
-
Spry.Widget.MenuBar.prototype.getElement = function(ele)
+
Spry.Widget.Accordion.prototype.openNextPanel = function()
{
{
-
if (ele && typeof ele == "string")
+
var panels = this.getPanels();
-
return document.getElementById(ele);
+
var curPanelIndex = this.getCurrentPanelIndex();
-
return ele;
+
 +
if( panels && curPanelIndex >= 0 && (curPanelIndex+1) < panels.length )
 +
this.openPanel(panels[curPanelIndex+1]);
};
};
-
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
+
Spry.Widget.Accordion.prototype.openPreviousPanel = function()
{
{
-
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
+
var panels = this.getPanels();
-
{
+
var curPanelIndex = this.getCurrentPanelIndex();
-
return false;
+
-
}
+
if( panels && curPanelIndex > 0 && curPanelIndex < panels.length )
-
return true;
+
this.openPanel(panels[curPanelIndex-1]);
};
};
-
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
+
Spry.Widget.Accordion.prototype.openFirstPanel = function()
{
{
-
if (!ele || !className || this.hasClassName(ele, className))
+
var panels = this.getPanels();
-
return;
+
if( panels )
-
ele.className += (ele.className ? " " : "") + className;
+
this.openPanel(panels[0]);
};
};
-
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
+
Spry.Widget.Accordion.prototype.openLastPanel = function()
{
{
-
if (!ele || !className || !this.hasClassName(ele, className))
+
var panels = this.getPanels();
-
return;
+
if( panels )
-
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
+
this.openPanel(panels[panels.length-1]);
};
};
-
// addEventListener for Menu Bar
+
Spry.Widget.Accordion.prototype.onPanelClick = function(panel)
-
// attach an event to a tag without creating obtrusive HTML code
+
-
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
+
{
{
-
try
+
// if (this.enableKeyboardNavigation)
-
{
+
// this.element.focus();
-
if (element.addEventListener)
+
if (panel != this.currentPanel)
-
{
+
this.openPanel(panel);
-
element.addEventListener(eventType, handler, capture);
+
this.focus();
-
}
+
-
else if (element.attachEvent)
+
-
{
+
-
element.attachEvent('on' + eventType, handler);
+
-
}
+
-
}
+
-
catch (e) {}
+
};
};
-
// createIframeLayer for Menu Bar
+
Spry.Widget.Accordion.prototype.onFocus = function(e)
-
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
+
-
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
+
{
{
-
var layer = document.createElement('iframe');
+
// this.element.focus();
-
layer.tabIndex = '-1';
+
this.hasFocus = true;
-
layer.src = 'javascript:false;';
+
this.addClassName(this.element, this.focusedClass);
-
menu.parentNode.appendChild(layer);
+
-
+
-
layer.style.left = menu.offsetLeft + 'px';
+
-
layer.style.top = menu.offsetTop + 'px';
+
-
layer.style.width = menu.offsetWidth + 'px';
+
-
layer.style.height = menu.offsetHeight + 'px';
+
};
};
-
// removeIframeLayer for Menu Bar
+
Spry.Widget.Accordion.prototype.onBlur = function(e)
-
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
+
-
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
+
{
{
-
var layers = menu.parentNode.getElementsByTagName('iframe');
+
// this.element.blur();
-
while(layers.length > 0)
+
this.hasFocus = false;
 +
this.removeClassName(this.element, this.focusedClass);
 +
};
 +
 
 +
Spry.Widget.Accordion.KEY_UP = 38;
 +
Spry.Widget.Accordion.KEY_DOWN = 40;
 +
 
 +
Spry.Widget.Accordion.prototype.onKeyDown = function(e)
 +
{
 +
var key = e.keyCode;
 +
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
 +
return true;
 +
 +
var panels = this.getPanels();
 +
if (!panels || panels.length < 1)
 +
return false;
 +
var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
 +
var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;
 +
 +
while (nextPanel)
{
{
-
layers[0].parentNode.removeChild(layers[0]);
+
if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
 +
break;
 +
nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
}
}
 +
 +
if (nextPanel && currentPanel != nextPanel)
 +
this.openPanel(nextPanel);
 +
 +
if (e.stopPropagation)
 +
e.stopPropagation();
 +
if (e.preventDefault)
 +
e.preventDefault();
 +
 +
return false;
};
};
-
// clearMenus for Menu Bar
+
Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
-
// root is the top level unordered list (<ul> tag)
+
-
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
+
{
{
-
var menus = root.getElementsByTagName('ul');
+
if (!panel)
-
for(var i=0; i<menus.length; i++)
+
return;
 +
 
 +
var tab = this.getPanelTab(panel);
 +
 
 +
if (tab)
{
{
-
this.hideSubmenu(menus[i]);
+
var self = this;
 +
Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelClick(panel); }, false);
 +
Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(panel); }, false);
 +
Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(panel); }, false);
}
}
-
this.removeClassName(this.element, "MenuBarActive");
 
};
};
-
// bubbledTextEvent for Menu Bar
+
Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
-
// identify bubbled up text events in Safari so we can ignore them
+
-
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
+
{
{
-
return (navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget)));
+
try
 +
{
 +
if (element.addEventListener)
 +
element.addEventListener(eventType, handler, capture);
 +
else if (element.attachEvent)
 +
element.attachEvent("on" + eventType, handler);
 +
}
 +
catch (e) {}
};
};
-
// showSubmenu for Menu Bar
+
Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
-
// set the proper CSS class on this menu to show it
+
-
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
+
{
{
-
if(this.currMenu)
+
var content = this.getPanelContent(panel);
 +
if (isDefault)
{
{
-
this.clearMenus(this.currMenu);
+
this.currentPanel = panel;
-
this.currMenu = null;
+
this.removeClassName(panel, this.closedClass);
 +
this.addClassName(panel, this.openClass);
}
}
-
+
else
-
if(menu)
+
{
{
-
this.addClassName(menu, "MenuBarSubmenuVisible");
+
this.removeClassName(panel, this.openClass);
-
if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
+
this.addClassName(panel, this.closedClass);
-
{
+
content.style.height = "0px";
-
if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element)
+
-
{
+
-
menu.style.top = menu.parentNode.offsetTop + 'px';
+
-
}
+
-
}
+
-
if(typeof document.uniqueID != "undefined")
+
-
{
+
-
this.createIframeLayer(menu);
+
-
}
+
}
}
-
this.addClassName(this.element, "MenuBarActive");
+
 +
this.attachPanelHandlers(panel);
};
};
-
// hideSubmenu for Menu Bar
+
Spry.Widget.Accordion.prototype.attachBehaviors = function()
-
// remove the proper CSS class on this menu to hide it
+
-
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
+
{
{
-
if(menu)
+
var panels = this.getPanels();
 +
for (var i = 0; i < panels.length; i++)
{
{
-
this.removeClassName(menu, "MenuBarSubmenuVisible");
+
this.initPanel(panels[i], i == this.defaultPanel);
-
if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
+
}
 +
 
 +
if (this.enableKeyboardNavigation)
 +
{
 +
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
 +
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
 +
// by default.
 +
 
 +
var tabIndexAttr = this.element.attributes.getNamedItem("tabindex");
 +
// if (!tabIndexAttr) this.element.tabindex = 0;
 +
if (tabIndexAttr)
{
{
-
menu.style.top = '';
+
var self = this;
-
menu.style.left = '';
+
Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
 +
Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
 +
Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
}
}
-
this.removeIframeLayer(menu);
 
}
}
};
};
-
// initialize for Menu Bar
+
Spry.Widget.Accordion.prototype.getPanels = function()
-
// create event listeners for the Menu Bar widget so we can properly
+
-
// show and hide submenus
+
-
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element, isie)
+
{
{
-
var opentime, closetime;
+
return this.getElementChildren(this.element);
-
var link = listitem.getElementsByTagName('a')[0];
+
};
-
var submenus = listitem.getElementsByTagName('ul');
+
-
var menu = (submenus.length > 0 ? submenus[0] : null);
+
-
var hasSubMenu = false;
+
Spry.Widget.Accordion.prototype.getCurrentPanel = function()
-
if(menu)
+
{
-
{
+
return this.currentPanel;
-
this.addClassName(link, "MenuBarItemSubmenu");
+
};
-
hasSubMenu = true;
+
-
}
+
-
if(!isie)
+
Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
 +
{
 +
var panels = this.getPanels();
 +
for( var i = 0 ; i < panels.length; i++ )
{
{
-
// define a simple function that comes standard in IE to determine
+
if( this.currentPanel == panels[i] )
-
// if a node is within another node
+
return i;
-
listitem.contains = function(testNode)
+
-
{
+
-
// this refers to the list item
+
-
if(testNode == null)
+
-
{
+
-
return false;
+
-
}
+
-
if(testNode == this)
+
-
{
+
-
return true;
+
-
}
+
-
else
+
-
{
+
-
return this.contains(testNode.parentNode);
+
-
}
+
-
};
+
}
}
-
+
return 0;
-
// need to save this for scope further down
+
};
-
var self = this;
+
-
this.addEventListener(listitem, 'mouseover', function(e)
+
Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
-
{
+
{
-
if(self.bubbledTextEvent())
+
if (!panel)
-
{
+
return null;
-
// ignore bubbled text events
+
return this.getElementChildren(panel)[0];
-
return;
+
};
-
}
+
-
clearTimeout(closetime);
+
-
if(self.currMenu == listitem)
+
-
{
+
-
self.currMenu = null;
+
-
}
+
-
// show menu highlighting
+
-
self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
+
-
if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible"))
+
-
{
+
-
opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
+
-
}
+
-
}, false);
+
-
this.addEventListener(listitem, 'mouseout', function(e)
+
Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
 +
{
 +
if (!panel)
 +
return null;
 +
return this.getElementChildren(panel)[1];
 +
};
 +
 
 +
Spry.Widget.Accordion.prototype.getElementChildren = function(element)
 +
{
 +
var children = [];
 +
var child = element.firstChild;
 +
while (child)
{
{
-
if(self.bubbledTextEvent())
+
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
-
{
+
children.push(child);
-
// ignore bubbled text events
+
child = child.nextSibling;
-
return;
+
}
-
}
+
return children;
 +
};
-
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
+
Spry.Widget.Accordion.prototype.focus = function()
-
if(!listitem.contains(related))
+
{
-
{
+
if (this.element && this.element.focus)
-
clearTimeout(opentime);
+
this.element.focus();
-
self.currMenu = listitem;
+
-
 
+
-
// remove menu highlighting
+
-
self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
+
-
if(menu)
+
-
{
+
-
closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
+
-
}
+
-
}
+
-
}, false);
+
};
};
-
</script>
 
-
<script type="text/javascript">
+
Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
-
@charset "UTF-8";
+
{
 +
this.timer = null;
 +
this.interval = 0;
 +
this.stepCount = 0;
-
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
+
this.fps = 0;
 +
this.steps = 10;
 +
this.duration = 500;
 +
this.onComplete = null;
-
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
+
this.panel = panel;
 +
this.panelToOpen = accordion.getElement(panel);
 +
this.panelData = [];
-
/*******************************************************************************
+
Spry.Widget.Accordion.setOptions(this, opts, true);
-
LAYOUT INFORMATION: describes box model, positioning, z-order
 
-
*******************************************************************************/
+
// If caller specified speed in terms of frames per second,
 +
// convert them into steps.
-
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
+
if (this.fps > 0)
-
ul.MenuBarHorizontal
+
{
-
{
+
this.interval = Math.floor(1000 / this.fps);
-
margin: 0;
+
this.steps = parseInt((this.duration + (this.interval - 1)) / this.interval);
-
padding: 0;
+
}
-
list-style-type: none;
+
else if (this.steps > 0)
-
font-size: 100%;
+
this.interval = this.duration / this.steps;
-
cursor: default;
+
-
width: auto;
+
-
}
+
-
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
+
-
ul.MenuBarActive
+
-
{
+
-
z-index: 1000;
+
-
}
+
-
/* Menu item containers, position children relative to this container and are a fixed width */
+
-
ul.MenuBarHorizontal li
+
-
{
+
-
margin: 0;
+
-
padding: 0;
+
-
list-style-type: none;
+
-
font-size: 100%;
+
-
position: relative;
+
-
text-align: left;
+
-
cursor: pointer;
+
-
width: 8em;
+
-
float: left;
+
-
}
+
-
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
+
-
ul.MenuBarHorizontal ul
+
-
{
+
-
margin: 0;
+
-
padding: 0;
+
-
list-style-type: none;
+
-
font-size: 100%;
+
-
z-index: 1020;
+
-
cursor: default;
+
-
width: 8.2em;
+
-
position: absolute;
+
-
left: -1000em;
+
-
}
+
-
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
+
-
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
+
-
{
+
-
left: auto;
+
-
}
+
-
/* Menu item containers are same fixed width as parent */
+
-
ul.MenuBarHorizontal ul li
+
-
{
+
-
width: 8.2em;
+
-
}
+
-
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
+
-
ul.MenuBarHorizontal ul ul
+
-
{
+
-
position: absolute;
+
-
margin: -5% 0 0 95%;
+
-
}
+
-
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
+
-
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
+
-
{
+
-
left: auto;
+
-
top: 0;
+
-
}
+
-
/*******************************************************************************
+
// Set up the array of panels we want to animate.
-
DESIGN INFORMATION: describes color scheme, borders, fonts
+
var panels = accordion.getPanels();
 +
for (var i = 0; i < panels.length; i++)
 +
{
 +
var p = panels[i];
 +
var c = accordion.getPanelContent(p);
 +
if (c)
 +
{
 +
var h = c.offsetHeight;
 +
if (h == undefined)
 +
h = 0;
 +
if (p == panel || h > 0)
 +
{
 +
var obj = new Object;
 +
obj.panel = p;
 +
obj.content = c;
 +
obj.fromHeight = h;
 +
obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
 +
obj.increment = (obj.toHeight - obj.fromHeight) / this.steps;
 +
obj.overflow = c.style.overflow;
 +
this.panelData.push(obj);
-
*******************************************************************************/
+
c.style.overflow = "hidden";
 +
c.style.height = h + "px";
 +
}
 +
}
 +
}
 +
};
-
/* Submenu containers have borders on all sides */
+
Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
-
ul.MenuBarHorizontal ul
+
{
{
-
border: 1px solid #CCC;
+
var self = this;
-
}
+
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
-
/* Menu items are a light gray block with padding and no text decoration */
+
};
-
ul.MenuBarHorizontal a
+
 
 +
Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
{
{
-
display: block;
+
if (this.timer)
-
cursor: pointer;
+
{
-
background-color: #EEE;
+
clearTimeout(this.timer);
-
padding: 0.5em 0.75em;
+
-
color: #333;
+
-
text-decoration: none;
+
-
}
+
-
/* Menu items that have mouse over or focus have a blue background and white text */
+
-
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
+
-
{
+
-
background-color: #33C;
+
-
color: #FFF;
+
-
}
+
-
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
+
-
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
+
-
{
+
-
background-color: #33C;
+
-
color: #FFF;
+
-
}
+
-
/*******************************************************************************
+
// If we're killing the timer, restore the overflow
 +
// properties on the panels we were animating!
-
SUBMENU INDICATION: styles if there is a submenu under a given menu item
+
if (this.stepCount < this.steps)
 +
{
 +
for (i = 0; i < this.panelData.length; i++)
 +
{
 +
obj = this.panelData[i];
 +
obj.content.style.overflow = obj.overflow;
 +
}
 +
}
 +
}
-
*******************************************************************************/
+
this.timer = null;
 +
};
-
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
+
Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
-
ul.MenuBarHorizontal a.MenuBarItemSubmenu
+
-
{
+
-
background-image: url(SpryMenuBarDown.gif);
+
-
background-repeat: no-repeat;
+
-
background-position: 95% 50%;
+
-
}
+
-
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
+
-
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
+
{
{
-
background-image: url(SpryMenuBarRight.gif);
+
++this.stepCount;
-
background-repeat: no-repeat;
+
-
background-position: 95% 50%;
+
-
}
+
-
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
+
-
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
+
-
{
+
-
background-image: url(SpryMenuBarDownHover.gif);
+
-
background-repeat: no-repeat;
+
-
background-position: 95% 50%;
+
-
}
+
-
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
+
-
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
+
-
{
+
-
background-image: url(SpryMenuBarRightHover.gif);
+
-
background-repeat: no-repeat;
+
-
background-position: 95% 50%;
+
-
}
+
-
/*******************************************************************************
+
this.animate();
-
BROWSER HACKS: the hacks below should not be changed unless you are an expert
+
if (this.stepCount < this.steps)
-
 
+
this.start();
-
*******************************************************************************/
+
else if (this.onComplete)
 +
this.onComplete();
 +
};
-
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
+
Spry.Widget.Accordion.PanelAnimator.prototype.animate = function()
-
ul.MenuBarHorizontal iframe
+
{
{
-
position: absolute;
+
var i, obj;
-
z-index: 1010;
+
 
-
}
+
if (this.stepCount >= this.steps)
-
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
+
-
@media screen, projection
+
-
{
+
-
ul.MenuBarHorizontal li.MenuBarItemIE
+
{
{
-
display: inline;
+
for (i = 0; i < this.panelData.length; i++)
-
f\loat: left;
+
{
-
background: #FFF;
+
obj = this.panelData[i];
 +
if (obj.panel != this.panel)
 +
obj.content.style.height = "0px";
 +
obj.content.style.overflow = obj.overflow;
 +
obj.content.style.height = obj.toHeight + "px";
 +
}
}
}
-
}
+
else
 +
{
 +
for (i = 0; i < this.panelData.length; i++)
 +
{
 +
obj = this.panelData[i];
 +
obj.fromHeight += obj.increment;
 +
obj.content.style.height = obj.fromHeight + "px";
 +
}
 +
}
 +
};
 +
 
</script>
</script>
 +
<style type="text/css">
 +
.Accordion {
 +
border-left: solid 1px gray;
 +
border-right: solid 1px black;
 +
border-bottom: solid 1px gray;
 +
overflow: hidden;
 +
}
 +
.AccordionPanel {
 +
margin: 0px;
 +
padding: 0px;
 +
}
 +
.AccordionPanelTab {
 +
background-color: #CCCCCC;
 +
border-top: solid 1px black;
 +
border-bottom: solid 1px gray;
 +
margin: 0px;
 +
padding: 2px;
 +
cursor: pointer;
 +
-moz-user-select: none;
 +
-khtml-user-select: none;
 +
}
 +
.AccordionPanelContent {
 +
overflow: auto;
 +
margin: 0px;
 +
padding: 0px;
 +
height: 200px;
 +
}
 +
.AccordionPanelOpen .AccordionPanelTab {
 +
background-color: #EEEEEE;
 +
}
 +
.AccordionPanelTabHover {
 +
color: #555555;
 +
}
 +
.AccordionPanelOpen .AccordionPanelTabHover {
 +
color: #555555;
 +
}
 +
.AccordionFocused .AccordionPanelTab {
 +
background-color: #3399FF;
 +
}
 +
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
 +
background-color: #33CCFF;
 +
}
 +
</style>
-
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
+
 
-
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
+
<div id="Accordion1" class="Accordion" tabindex="0">
-
<ul id="MenuBar1" class="MenuBarHorizontal">
+
  <div class="AccordionPanel">
-
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
+
    <div class="AccordionPanelTab">Label 1</div>
-
      <ul>
+
    <div class="AccordionPanelContent">Content 1</div>
-
        <li><a href="#">Item 1.1</a></li>
+
   </div>
-
        <li><a href="#">Item 1.2</a></li>
+
   <div class="AccordionPanel">
-
        <li><a href="#">Item 1.3</a></li>
+
    <div class="AccordionPanelTab">Label 2</div>
-
      </ul>
+
    <div class="AccordionPanelContent">Content 2</div>
-
   </li>
+
   </div>
-
   <li><a href="#">Item 2</a></li>
+
</div>
-
  <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
+
-
      <ul>
+
-
        <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
+
-
            <ul>
+
-
              <li><a href="#">Item 3.1.1</a></li>
+
-
              <li><a href="#">Item 3.1.2</a></li>
+
-
            </ul>
+
-
        </li>
+
-
        <li><a href="#">Item 3.2</a></li>
+
-
        <li><a href="#">Item 3.3</a></li>
+
-
      </ul>
+
-
   </li>
+
-
  <li><a href="#">Item 4</a></li>
+
-
</ul>
+
<script type="text/javascript">
<script type="text/javascript">
<!--
<!--
-
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
+
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
//-->
-
</script></html>
+
</script>
 +
 
 +
 
 +
</html>

Revision as of 20:24, 1 October 2007

Label 1
Content 1
Label 2
Content 2

Retrieved from "http://2007.igem.org/wiki/index.php/BerkiGEM2007_WikiPlaying2"