Austin Day Notebook/new

From 2007.igem.org

< Austin Day Notebook(Difference between revisions)
 
(2 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<script src="http://ns495.hostgator.com/~jpalmerx/austin/SpryMenuBar.js" type="text/javascript"></script>
+
<script type="text/javascript">
-
<link href="http://ns495.hostgator.com/~jpalmerx/austin/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
+
var Spry;
 +
if(!Spry)
 +
{
 +
Spry = {};
 +
}
 +
if(!Spry.Widget)
 +
{
 +
Spry.Widget = {};
 +
}
 +
 
 +
// Constructor for Menu Bar
 +
// 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.MenuBar.prototype.init = function(element, opts)
 +
{
 +
this.element = this.getElement(element);
 +
 
 +
// represents the current (sub)menu we are operating on
 +
this.currMenu = null;
 +
 
 +
var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
 +
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
 +
{
 +
// bail on older unsupported browsers
 +
return;
 +
}
 +
 
 +
// load hover images now
 +
if(opts)
 +
{
 +
for(var k in opts)
 +
{
 +
var rollover = new Image;
 +
rollover.src = opts[k];
 +
}
 +
}
 +
 
 +
if(this.element)
 +
{
 +
this.currMenu = this.element;
 +
var items = this.element.getElementsByTagName('li');
 +
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";
 +
}
 +
}
 +
}
 +
};
 +
 
 +
Spry.Widget.MenuBar.prototype.getElement = function(ele)
 +
{
 +
if (ele && typeof ele == "string")
 +
return document.getElementById(ele);
 +
return ele;
 +
};
 +
 
 +
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
 +
{
 +
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
 +
{
 +
return false;
 +
}
 +
return true;
 +
};
 +
 
 +
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
 +
{
 +
if (!ele || !className || this.hasClassName(ele, className))
 +
return;
 +
ele.className += (ele.className ? " " : "") + className;
 +
};
 +
 
 +
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
 +
{
 +
if (!ele || !className || !this.hasClassName(ele, className))
 +
return;
 +
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
 +
};
 +
 
 +
// addEventListener for Menu Bar
 +
// attach an event to a tag without creating obtrusive HTML code
 +
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
 +
{
 +
try
 +
{
 +
if (element.addEventListener)
 +
{
 +
element.addEventListener(eventType, handler, capture);
 +
}
 +
else if (element.attachEvent)
 +
{
 +
element.attachEvent('on' + eventType, handler);
 +
}
 +
}
 +
catch (e) {}
 +
};
 +
 
 +
// createIframeLayer for Menu Bar
 +
// 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');
 +
layer.tabIndex = '-1';
 +
layer.src = 'javascript:false;';
 +
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
 +
// 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');
 +
while(layers.length > 0)
 +
{
 +
layers[0].parentNode.removeChild(layers[0]);
 +
}
 +
};
 +
 
 +
// clearMenus for Menu Bar
 +
// root is the top level unordered list (<ul> tag)
 +
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
 +
{
 +
var menus = root.getElementsByTagName('ul');
 +
for(var i=0; i<menus.length; i++)
 +
{
 +
this.hideSubmenu(menus[i]);
 +
}
 +
this.removeClassName(this.element, "MenuBarActive");
 +
};
 +
 
 +
// bubbledTextEvent for Menu Bar
 +
// 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)));
 +
};
 +
 
 +
// showSubmenu for Menu Bar
 +
// set the proper CSS class on this menu to show it
 +
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
 +
{
 +
if(this.currMenu)
 +
{
 +
this.clearMenus(this.currMenu);
 +
this.currMenu = null;
 +
}
 +
 +
if(menu)
 +
{
 +
this.addClassName(menu, "MenuBarSubmenuVisible");
 +
if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
 +
{
 +
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");
 +
};
 +
 
 +
// hideSubmenu for Menu Bar
 +
// remove the proper CSS class on this menu to hide it
 +
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
 +
{
 +
if(menu)
 +
{
 +
this.removeClassName(menu, "MenuBarSubmenuVisible");
 +
if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
 +
{
 +
menu.style.top = '';
 +
menu.style.left = '';
 +
}
 +
this.removeIframeLayer(menu);
 +
}
 +
};
 +
 
 +
// initialize for Menu Bar
 +
// 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;
 +
var link = listitem.getElementsByTagName('a')[0];
 +
var submenus = listitem.getElementsByTagName('ul');
 +
var menu = (submenus.length > 0 ? submenus[0] : null);
 +
 
 +
var hasSubMenu = false;
 +
if(menu)
 +
{
 +
this.addClassName(link, "MenuBarItemSubmenu");
 +
hasSubMenu = true;
 +
}
 +
 
 +
if(!isie)
 +
{
 +
// define a simple function that comes standard in IE to determine
 +
// if a node is within another node
 +
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);
 +
}
 +
};
 +
}
 +
 +
// need to save this for scope further down
 +
var self = this;
 +
 
 +
this.addEventListener(listitem, 'mouseover', function(e)
 +
{
 +
if(self.bubbledTextEvent())
 +
{
 +
// ignore bubbled text events
 +
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)
 +
{
 +
if(self.bubbledTextEvent())
 +
{
 +
// ignore bubbled text events
 +
return;
 +
}
 +
 
 +
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
 +
if(!listitem.contains(related))
 +
{
 +
clearTimeout(opentime);
 +
self.currMenu = listitem;
 +
 
 +
// remove menu highlighting
 +
self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
 +
if(menu)
 +
{
 +
closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
 +
}
 +
}
 +
}, false);
 +
};
 +
</script>
 +
<style type="text/css">
 +
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
 +
ul.MenuBarHorizontal
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
 +
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;
 +
}
 +
 
 +
/*******************************************************************************
 +
 
 +
DESIGN INFORMATION: describes color scheme, borders, fonts
 +
 
 +
*******************************************************************************/
 +
 
 +
/* Submenu containers have borders on all sides */
 +
ul.MenuBarHorizontal ul
 +
{
 +
border: 1px solid #CCC;
 +
}
 +
/* Menu items are a light gray block with padding and no text decoration */
 +
ul.MenuBarHorizontal a
 +
{
 +
display: block;
 +
cursor: pointer;
 +
background-color: #EEE;
 +
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;
 +
}
 +
 
 +
/*******************************************************************************
 +
 
 +
SUBMENU INDICATION: styles if there is a submenu under a given menu item
 +
 
 +
*******************************************************************************/
 +
 
 +
/* 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 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);
 +
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%;
 +
}
 +
 
 +
/*******************************************************************************
 +
 
 +
BROWSER HACKS: the hacks below should not be changed unless you are an expert
 +
 
 +
*******************************************************************************/
 +
 
 +
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
 +
ul.MenuBarHorizontal iframe
 +
{
 +
position: absolute;
 +
z-index: 1010;
 +
}
 +
/* 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;
 +
f\loat: left;
 +
background: #FFF;
 +
}
 +
}
 +
 
 +
#a1 {
 +
background-image: url(http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif);
 +
}
 +
 
 +
#a2 {
 +
background-image: url(http://www.google.com/intl/en_ALL/images/logo.gif);
 +
}
 +
</style>
<ul id="MenuBar1" class="MenuBarHorizontal">
<ul id="MenuBar1" class="MenuBarHorizontal">
   <li><a class="MenuBarItemSubmenu" id="a1" href="#">Tab1</a>
   <li><a class="MenuBarItemSubmenu" id="a1" href="#">Tab1</a>
Line 33: Line 490:
//-->
//-->
</script>
</script>
 +
 +
 +
<iframe src="http://google.com" width="400" height="400" scroll="auto" />
</html>
</html>

Latest revision as of 08:00, 1 October 2007