Team:Heidelberg/Templates/StartPage

From 2013.igem.org

(Difference between revisions)
m
 
(65 intermediate revisions not shown)
Line 3: Line 3:
<link rel="stylesheet" href="https://2013.igem.org/Team:Heidelberg/Stylesheet?action=raw&ctype=text/css" type="text/css" />
<link rel="stylesheet" href="https://2013.igem.org/Team:Heidelberg/Stylesheet?action=raw&ctype=text/css" type="text/css" />
 +
<script type="text/javascript">
<script type="text/javascript">
<!--
<!--
-
function check_size() {
+
window.onresize = function() {
-
var viewportWidth = document.documentElement.clientWidth;
+
rotateMenu("menu-team", getMenuAngle(2.2));
-
var top = document.getElementById("top-matter");
+
rotateMenu("menu-project", getMenuAngle(1.2));
-
var top_wiki = document.getElementById("top-section");
+
rotateMenu("menu-notebook", getMenuAngle(0.2));
-
var goto_top = document.getElementById("goto-top");
+
rotateMenu("menu-parts", getMenuAngle(0));
-
var tour_navi = document.getElementById("tour-navi");
+
rotateMenu("menu-modelling", getMenuAngle(0.2), -1);
-
if (viewportWidth >= 1024) {
+
rotateMenu("menu-human", getMenuAngle(1.2), -1);
-
top.style.position = "fixed";
+
rotateMenu("menu-safety", getMenuAngle(2.2), -1);
-
top_wiki.style.position = "fixed";
+
-
goto_top.style.marginLeft = "750px";
+
-
tour_navi.style.marginLeft = "650px";
+
-
} else {
+
-
top_wiki.style.position = "absolute";
+
-
top.style.position = "absolute";
+
-
goto_top.style.marginLeft = (viewportWidth - 270) + "px";
+
-
tour_navi.style.marginLeft = (viewportWidth - 370) + "px";
+
-
}
+
}
}
-
window.onload = function() {
+
-
check_size();
+
window.onload = function() {
var drop_lists = document.getElementsByClassName("drop-navi-left");
var drop_lists = document.getElementsByClassName("drop-navi-left");
for (var i = 0; i < drop_lists.length; i++) {
for (var i = 0; i < drop_lists.length; i++) {
Line 36: Line 28:
for (var i = 0; i < navi_links.length; i++) {
for (var i = 0; i < navi_links.length; i++) {
if (document.documentURI.indexOf(navi_links[i].href) !== -1) {
if (document.documentURI.indexOf(navi_links[i].href) !== -1) {
-
navi_links[i].className = "navi-highlight";
+
navi_links[i].style.color = "#FFCC00";
 +
var element = navi_links[i];
 +
while (element.parentNode.tagName !== "DIV") {
 +
var element = element.parentNode;
 +
if (element.tagName == "LI") element.style.display = "list-item";
 +
else element.style.display = "block";
 +
}
 +
var element = navi_links[i].parentNode;
 +
if (element.className == "drop-navi-left") {
 +
while (element.tagName !== "UL") {
 +
var element = element.nextSibling;
 +
}
 +
element.style.display = "block";
 +
}
break;
break;
}
}
}
}
 +
}
}
-
window.onresize = check_size;
 
function start_tour() {
function start_tour() {
var tour_navi = document.getElementById("tour-navi");
var tour_navi = document.getElementById("tour-navi");
Line 72: Line 77:
} else {
} else {
list.style.display = "none";
list.style.display = "none";
 +
}
 +
}
 +
function getMenuAngle(position) {
 +
var menu = document.getElementById("main-menu");
 +
var width = menu.offsetWidth;
 +
var a = 0.5 * width;
 +
var b = menu.offsetHeight;
 +
var wpos = width * position * 0.1;
 +
var t = Math.acos(wpos / a);
 +
var beta = Math.atan(a / b * Math.tan(t));
 +
var angle = Math.PI * 0.5 - beta;
 +
var y = b - b * Math.sin(t);
 +
return Array(angle,y);
 +
}
 +
function rotateMenu(id, angle, factor) {
 +
if (factor !== undefined)
 +
    angle[0] *= factor;
 +
var root = document.getElementById(id);
 +
root.style.position = "relative";
 +
root.style.top = "calc(5.3em - " + angle[1] + "px)"; // 100px from #main-menu
 +
var children = root.children;
 +
for (var i = 0; i < children.length; ++i) {
 +
                        if (children[i].nodeName == "A") {
 +
                            children[i].style.transform = "rotate(" + angle[0] + "rad)";
 +
                            break;
 +
}
}
}
}
}
Line 82: Line 113:
</html>
</html>
{{:Team:Heidelberg/Templates/TopNavigation}}
{{:Team:Heidelberg/Templates/TopNavigation}}
-
{{{1}}}
 
<html>
<html>
-
 
+
</p></div> <!-- end headline -->
-
</div> <!-- end headline -->
+
</div> <!-- end top-matter -->
</div> <!-- end top-matter -->
Line 110: Line 139:
</ul>
</ul>
</div>
</div>
-
<a href="#top" id="goto-top">Go to top</a>
+
<!--<a href="#top" id="goto-top">Go to top</a>-->
</html>
</html>

Latest revision as of 11:09, 13 September 2013

PHILOSOPHER'S STONE

igem-2013