Team:Bard-Annandale/java
From 2011.igem.org
(Difference between revisions)
(3 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | < | + | <head> |
- | <style type="text/css" | + | |
- | <script type="text/javascript | + | |
+ | |||
+ | <style type="text/css"> | ||
+ | div.sdmenu { | ||
+ | width: 150px; | ||
+ | font-family: Arial, sans-serif; | ||
+ | font-size: 12px; | ||
+ | padding-bottom: 10px; | ||
+ | background: url(bottom.gif) no-repeat right bottom; | ||
+ | color: #fff; | ||
+ | } | ||
+ | div.sdmenu div { | ||
+ | background: url(title.gif) repeat-x; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | div.sdmenu div:first-child { | ||
+ | background: url(toptitle.gif) no-repeat; | ||
+ | } | ||
+ | div.sdmenu div.collapsed { | ||
+ | height: 25px; | ||
+ | } | ||
+ | div.sdmenu div span { | ||
+ | display: block; | ||
+ | padding: 5px 25px; | ||
+ | font-weight: bold; | ||
+ | color: white; | ||
+ | background: url(expanded.gif) no-repeat 10px center; | ||
+ | cursor: default; | ||
+ | border-bottom: 1px solid #ddd; | ||
+ | } | ||
+ | div.sdmenu div.collapsed span { | ||
+ | background-image: url(collapsed.gif); | ||
+ | } | ||
+ | div.sdmenu div a { | ||
+ | padding: 5px 10px; | ||
+ | background: #eee; | ||
+ | display: block; | ||
+ | border-bottom: 1px solid #ddd; | ||
+ | color: #066; | ||
+ | } | ||
+ | div.sdmenu div a.current { | ||
+ | background : #ccc; | ||
+ | } | ||
+ | div.sdmenu div a:hover { | ||
+ | background : #066 url(linkarrow.gif) no-repeat right center; | ||
+ | color: #fff; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | |||
/*********************************************** | /*********************************************** | ||
+ | |||
* Slashdot Menu script- By DimX | * Slashdot Menu script- By DimX | ||
+ | |||
* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com | * Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com | ||
+ | |||
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code | * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code | ||
+ | |||
***********************************************/ | ***********************************************/ | ||
- | </script> | + | |
+ | function SDMenu(id) { | ||
+ | if (!document.getElementById || !document.getElementsByTagName) | ||
+ | return false; | ||
+ | this.menu = document.getElementById(id); | ||
+ | this.submenus = this.menu.getElementsByTagName("div"); | ||
+ | this.remember = true; | ||
+ | this.speed = 3; | ||
+ | this.markCurrent = true; | ||
+ | this.oneSmOnly = false; | ||
+ | } | ||
+ | SDMenu.prototype.init = function() { | ||
+ | var mainInstance = this; | ||
+ | for (var i = 0; i < this.submenus.length; i++) | ||
+ | this.submenus[i].getElementsByTagName("span")[0].onclick = function() { | ||
+ | mainInstance.toggleMenu(this.parentNode); | ||
+ | }; | ||
+ | if (this.markCurrent) { | ||
+ | var links = this.menu.getElementsByTagName("a"); | ||
+ | for (var i = 0; i < links.length; i++) | ||
+ | if (links[i].href == document.location.href) { | ||
+ | links[i].className = "current"; | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | if (this.remember) { | ||
+ | var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)"); | ||
+ | var match = regex.exec(document.cookie); | ||
+ | if (match) { | ||
+ | var states = match[1].split(""); | ||
+ | for (var i = 0; i < states.length; i++) | ||
+ | this.submenus[i].className = (states[i] == 0 ? "collapsed" : ""); | ||
+ | } | ||
+ | } | ||
+ | }; | ||
+ | SDMenu.prototype.toggleMenu = function(submenu) { | ||
+ | if (submenu.className == "collapsed") | ||
+ | this.expandMenu(submenu); | ||
+ | else | ||
+ | this.collapseMenu(submenu); | ||
+ | }; | ||
+ | SDMenu.prototype.expandMenu = function(submenu) { | ||
+ | var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight; | ||
+ | var links = submenu.getElementsByTagName("a"); | ||
+ | for (var i = 0; i < links.length; i++) | ||
+ | fullHeight += links[i].offsetHeight; | ||
+ | var moveBy = Math.round(this.speed * links.length); | ||
+ | |||
+ | var mainInstance = this; | ||
+ | var intId = setInterval(function() { | ||
+ | var curHeight = submenu.offsetHeight; | ||
+ | var newHeight = curHeight + moveBy; | ||
+ | if (newHeight < fullHeight) | ||
+ | submenu.style.height = newHeight + "px"; | ||
+ | else { | ||
+ | clearInterval(intId); | ||
+ | submenu.style.height = ""; | ||
+ | submenu.className = ""; | ||
+ | mainInstance.memorize(); | ||
+ | } | ||
+ | }, 30); | ||
+ | this.collapseOthers(submenu); | ||
+ | }; | ||
+ | SDMenu.prototype.collapseMenu = function(submenu) { | ||
+ | var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight; | ||
+ | var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length); | ||
+ | var mainInstance = this; | ||
+ | var intId = setInterval(function() { | ||
+ | var curHeight = submenu.offsetHeight; | ||
+ | var newHeight = curHeight - moveBy; | ||
+ | if (newHeight > minHeight) | ||
+ | submenu.style.height = newHeight + "px"; | ||
+ | else { | ||
+ | clearInterval(intId); | ||
+ | submenu.style.height = ""; | ||
+ | submenu.className = "collapsed"; | ||
+ | mainInstance.memorize(); | ||
+ | } | ||
+ | }, 30); | ||
+ | }; | ||
+ | SDMenu.prototype.collapseOthers = function(submenu) { | ||
+ | if (this.oneSmOnly) { | ||
+ | for (var i = 0; i < this.submenus.length; i++) | ||
+ | if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed") | ||
+ | this.collapseMenu(this.submenus[i]); | ||
+ | } | ||
+ | }; | ||
+ | SDMenu.prototype.expandAll = function() { | ||
+ | var oldOneSmOnly = this.oneSmOnly; | ||
+ | this.oneSmOnly = false; | ||
+ | for (var i = 0; i < this.submenus.length; i++) | ||
+ | if (this.submenus[i].className == "collapsed") | ||
+ | this.expandMenu(this.submenus[i]); | ||
+ | this.oneSmOnly = oldOneSmOnly; | ||
+ | }; | ||
+ | SDMenu.prototype.collapseAll = function() { | ||
+ | for (var i = 0; i < this.submenus.length; i++) | ||
+ | if (this.submenus[i].className != "collapsed") | ||
+ | this.collapseMenu(this.submenus[i]); | ||
+ | }; | ||
+ | SDMenu.prototype.memorize = function() { | ||
+ | if (this.remember) { | ||
+ | var states = new Array(); | ||
+ | for (var i = 0; i < this.submenus.length; i++) | ||
+ | states.push(this.submenus[i].className == "collapsed" ? 0 : 1); | ||
+ | var d = new Date(); | ||
+ | d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000)); | ||
+ | document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/"; | ||
+ | } | ||
+ | }; | ||
+ | </script> | ||
+ | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
+ | |||
// <![CDATA[ | // <![CDATA[ | ||
+ | |||
var myMenu; | var myMenu; | ||
+ | |||
window.onload = function() { | window.onload = function() { | ||
+ | |||
myMenu = new SDMenu("my_menu"); | myMenu = new SDMenu("my_menu"); | ||
+ | |||
myMenu.init(); | myMenu.init(); | ||
+ | |||
}; | }; | ||
+ | |||
// ]]> | // ]]> | ||
+ | |||
</script> | </script> | ||
- | + | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | |||
+ | <div style="float: left" id="my_menu" class="sdmenu"> | ||
+ | |||
<div> | <div> | ||
+ | |||
<span>Online Tools</span> | <span>Online Tools</span> | ||
+ | |||
<a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a> | <a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a> | ||
+ | |||
<a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a> | <a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a> | ||
+ | |||
<a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a> | <a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a> | ||
+ | |||
<a href="http://tools.dynamicdrive.com/password/">htaccess Password</a> | <a href="http://tools.dynamicdrive.com/password/">htaccess Password</a> | ||
+ | |||
<a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a> | <a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a> | ||
+ | |||
<a href="http://tools.dynamicdrive.com/button/">Button Maker</a> | <a href="http://tools.dynamicdrive.com/button/">Button Maker</a> | ||
+ | |||
</div> | </div> | ||
+ | |||
<div> | <div> | ||
+ | |||
<span>Support Us</span> | <span>Support Us</span> | ||
+ | |||
<a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a> | <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a> | ||
+ | |||
<a href="http://www.dynamicdrive.com/link.htm">Link to Us</a> | <a href="http://www.dynamicdrive.com/link.htm">Link to Us</a> | ||
+ | |||
<a href="http://www.dynamicdrive.com/resources/">Web Resources</a> | <a href="http://www.dynamicdrive.com/resources/">Web Resources</a> | ||
+ | |||
</div> | </div> | ||
+ | |||
<div class="collapsed"> | <div class="collapsed"> | ||
+ | |||
<span>Partners</span> | <span>Partners</span> | ||
+ | |||
<a href="http://www.javascriptkit.com">JavaScript Kit</a> | <a href="http://www.javascriptkit.com">JavaScript Kit</a> | ||
+ | |||
<a href="http://www.cssdrive.com">CSS Drive</a> | <a href="http://www.cssdrive.com">CSS Drive</a> | ||
+ | |||
<a href="http://www.codingforums.com">CodingForums</a> | <a href="http://www.codingforums.com">CodingForums</a> | ||
+ | |||
<a href="http://www.dynamicdrive.com/style/">CSS Examples</a> | <a href="http://www.dynamicdrive.com/style/">CSS Examples</a> | ||
+ | |||
</div> | </div> | ||
+ | |||
<div> | <div> | ||
+ | |||
<span>Test Current</span> | <span>Test Current</span> | ||
+ | |||
<a href="?foo=bar">Current or not</a> | <a href="?foo=bar">Current or not</a> | ||
+ | |||
<a href="./">Current or not</a> | <a href="./">Current or not</a> | ||
+ | |||
<a href="index.html">Current or not</a> | <a href="index.html">Current or not</a> | ||
+ | |||
<a href="index.html?query">Current or not</a> | <a href="index.html?query">Current or not</a> | ||
+ | |||
</div> | </div> | ||
+ | |||
</div> | </div> | ||
- | </body> | + | |
+ | |||
+ | |||
+ | |||
+ | |||
+ | </body> | ||
+ | |||
</html> | </html> |
Latest revision as of 08:14, 28 September 2011