Team:Tokyo Tech
From 2010.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
__NOTOC__ | __NOTOC__ | ||
{{Tokyo_Tech_Template}} | {{Tokyo_Tech_Template}} | ||
- | <html><body id="home" onload="setPageSize()"> | + | <html> |
+ | <body id="home" onload="setPageSize()"> | ||
+ | |||
+ | <!--エレベーターメニュー始まるよ!--> | ||
+ | <script type="text/javascript"> | ||
+ | <!-- | ||
+ | var expand_speed = 150; | ||
+ | var updown_speed = 20; | ||
+ | var steps = 10; | ||
+ | var jump = 1; | ||
+ | var sticky = 0; | ||
+ | |||
+ | var steps2 = 15; | ||
+ | var menu_html = | ||
+ | "<div id='tfm-head'></div>" + | ||
+ | "<div id='tfm-body'>" + | ||
+ | "<div id='item1' class='tf1'><span>笆</span> ITEM 1" + | ||
+ | " <div id='item11' class='tf2'><span>笆。</span> <a href='index.html'>ITEM 1.1</a></div>" + | ||
+ | " <div id='item12' class='tf2'><span>笆。</span> <a href='index.html'>ITEM 1.2</a></div>" + | ||
+ | "</div>" + | ||
+ | "<div id='item2' class='tf1'><span>笆</span> ITEM 2" + | ||
+ | " <div id='item21' class='tf2'><span>笆。</span> <a href='index.html'>ITEM 2.1</a></div>" + | ||
+ | " <div id='item22' class='tf2'><span>笆。</span> <a href='index.html'>ITEM 2.2</a></div>" + | ||
+ | " <div id='item23' class='tf2'><span>笆。</span> <a href='index.html'>ITEM 2.3</a></div>" + | ||
+ | " <div id='item34' class='tf2'><span>笆。</span> <a href='index.html'>ITEM 2.4</a></div>" + | ||
+ | "</div>" + | ||
+ | "<div id='item3' class='tf1'><span>笆</span> ITEM 3" + | ||
+ | " <div id='item31' class='tf2'><span>笆。</span> <a href='index.html'>ITEM 3.1</a></div>" + | ||
+ | " <div id='item32' class='tf2'><span>笆。</span> <a href='index.html'>ITEM 3.2</a></div>" + | ||
+ | "</div>" + | ||
+ | "<div id='item4' class='tf1'><span>笆</span> ITEM 4" + | ||
+ | " <div id='item41' class='tf2'><span>笆。</span> <a href='index.html'>ITEM 4.1</a></div>" + | ||
+ | "</div>" + | ||
+ | "<div id='item5' class='tf1'><span>笆</span> ITEM 5" + | ||
+ | " <div id='item51' class='tf2'><span>笆。</span> <a href='index.html'>ITEM 5.1</a></div>" + | ||
+ | " <div id='item52' class='tf2'><span>笆。</span> <a href='index.html'>ITEM 5.2</a></div>" + | ||
+ | " <div id='item53' class='tf2'><span>笆。</span> <a href='index.html'>ITEM 5.3</a></div>" + | ||
+ | "</div>" + | ||
+ | "</div>" + // end of #tfm-body | ||
+ | "<div id='tfm-foot'>TFMENU</div>"; | ||
+ | var curr_y; | ||
+ | var istimerc_on = 0; | ||
+ | var istimere_on = 0; | ||
+ | var limit_y; | ||
+ | var menu_pos = new Object(); | ||
+ | var status_p; | ||
+ | var tfm_body; | ||
+ | var tfmenu; | ||
+ | var isInternetExplorer; | ||
+ | |||
+ | if (navigator.appName.indexOf("Microsoft") < 0) { | ||
+ | // it's not IE. | ||
+ | steps = steps2; | ||
+ | } | ||
+ | |||
+ | function expandMenu(e) { | ||
+ | var close_only = 0; | ||
+ | var col_elem; | ||
+ | var exp_elem; | ||
+ | var ic; | ||
+ | var ie; | ||
+ | var isopen = 0; | ||
+ | var target_elem; | ||
+ | var target_node; | ||
+ | var timerc; | ||
+ | var timere; | ||
+ | |||
+ | var collapseItem = function() { | ||
+ | if(col_elem[ic]) { | ||
+ | setVisibility(col_elem[ic], "hidden"); | ||
+ | ic++; | ||
+ | } else { | ||
+ | clearInterval(timerc); | ||
+ | istimerc_on = 0; | ||
+ | } | ||
+ | } | ||
+ | var expandItem = function() { | ||
+ | if(!istimerc_on) { | ||
+ | if(exp_elem[ie]) { | ||
+ | setVisibility(exp_elem[ie], "visible"); | ||
+ | ie++; | ||
+ | } else { | ||
+ | clearInterval(timere); | ||
+ | istimere_on = 0; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | if(e.target) { | ||
+ | target_node = e.target; | ||
+ | } else if (e.srcElement) { | ||
+ | target_node = e.srcElement; | ||
+ | } | ||
+ | if (target_node.nodeType == 3) { | ||
+ | target_node = target_node.parentNode; | ||
+ | } | ||
+ | target_elem = target_node.getElementsByTagName("div"); | ||
+ | if(target_node.id == "tfm-body") { | ||
+ | return; | ||
+ | } | ||
+ | if(target_elem[0]) { | ||
+ | if(target_elem[0].style.visibility == "visible") { | ||
+ | close_only = 1; | ||
+ | } | ||
+ | } | ||
+ | if(!istimerc_on && !istimere_on) { | ||
+ | for(var i = 0; i < tfm_body.length && !isopen; ++i) { | ||
+ | col_elem = tfm_body[i].getElementsByTagName("div"); | ||
+ | for(var ii = 0; ii < col_elem.length; ++ii) { | ||
+ | if(col_elem[ii].style.visibility == "visible") { | ||
+ | isopen = 1; | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | if(isopen) { | ||
+ | ic = 0; | ||
+ | istimerc_on = 1; | ||
+ | timerc = setInterval(collapseItem, expand_speed); | ||
+ | } | ||
+ | } | ||
+ | if(!istimere_on && !close_only) { | ||
+ | exp_elem = target_elem; | ||
+ | ie = 0; | ||
+ | istimere_on = 1; | ||
+ | timere = setInterval(expandItem, expand_speed); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function setVisibility(e, value) { | ||
+ | e.style.visibility = value; | ||
+ | if(value == "hidden") { | ||
+ | e.style.lineHeight = "0px"; | ||
+ | e.parentNode.className = "tf1"; | ||
+ | } else { | ||
+ | e.style.lineHeight = "100%"; | ||
+ | e.parentNode.className = "tf1active"; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function setTopPos() { | ||
+ | var target_y = document.body.scrollTop; | ||
+ | var dance_steps = steps; | ||
+ | var distance; | ||
+ | var status; | ||
+ | |||
+ | distance = Math.abs(target_y - curr_y); | ||
+ | |||
+ | if(jump && tfmenu.offsetHeight * 2 < distance) { | ||
+ | dance_steps = steps * 10; | ||
+ | } | ||
+ | if(distance < 25) { | ||
+ | dance_steps = 1; | ||
+ | } | ||
+ | if(limit_y <= target_y) { | ||
+ | target_y = limit_y; | ||
+ | curr_y = limit_y; | ||
+ | } | ||
+ | if(curr_y > target_y) { | ||
+ | curr_y -= dance_steps; | ||
+ | status = "tfm-up"; | ||
+ | } else if(curr_y < target_y) { | ||
+ | curr_y += dance_steps; | ||
+ | status = "tfm-down"; | ||
+ | } else { | ||
+ | status = "tfm-stop"; | ||
+ | } | ||
+ | if(distance != 0) { | ||
+ | tfmenu.style.top = curr_y + "px"; | ||
+ | } | ||
+ | if(status_p != status) { | ||
+ | status_p = status; | ||
+ | tfmenu.className = status; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function setListeners(e) { | ||
+ | var i; | ||
+ | var ii; | ||
+ | tfmenu = document.getElementById("tfmenu"); | ||
+ | tfmenu.innerHTML = menu_html; | ||
+ | tfm_body = document.getElementById("tfm-body") | ||
+ | tfmenu.className = "tfm-stop"; | ||
+ | addListener(tfm_body, 'mouseup', expandMenu, false); | ||
+ | tfm_body = tfm_body.childNodes; | ||
+ | |||
+ | for(i = 0; i < tfm_body.length; ++i) { | ||
+ | var items = tfm_body[i].getElementsByTagName("div"); | ||
+ | var visib = "hidden"; | ||
+ | if(tfmenu.getAttribute('name') == tfm_body[i].id) { | ||
+ | visib = "visible"; | ||
+ | } | ||
+ | for(ii = 0; ii < items.length; ++ii) { | ||
+ | setVisibility(items[ii], visib); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | tfmenu.style.position = "absolute"; | ||
+ | tfmenu.style.left = "0px"; | ||
+ | if(sticky) { | ||
+ | tfmenu.style.top = "0px"; | ||
+ | } else { | ||
+ | curr_y = document.body.scrollTop; | ||
+ | tfmenu.style.top = curr_y + "px"; | ||
+ | setInterval("setTopPos()", updown_speed); | ||
+ | } | ||
+ | limit_y = tfmenu.parentNode.offsetHeight - tfmenu.offsetHeight; | ||
+ | } | ||
+ | |||
+ | function addListener(elem, eventType, func, cap) { | ||
+ | if(elem.addEventListener) { | ||
+ | elem.addEventListener(eventType, func, cap); | ||
+ | } else if(elem.attachEvent) { | ||
+ | elem.attachEvent('on' + eventType, func); | ||
+ | } else { | ||
+ | window.alert("Sorry... Please use Internet Explorer or Firefox."); | ||
+ | return false; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | //--> | ||
+ | </script> | ||
+ | |||
+ | <!-- エレベーターメニュー終わり--> | ||
+ | |||
<div id="super_main_wrapper"> | <div id="super_main_wrapper"> | ||
<div class="clear"></div> | <div class="clear"></div> |
Revision as of 19:00, 19 October 2010
under constructing