Difference between revisions of "Template:Team:TU Eindhoven/Menu Script"

").appendTo("body"); $('').appendTo("#background"); var a = 0; $("#twitter_logo,#twitter").hover( function() { $("#twitter").css("z-index", "2"); }, function() { $("#twitter").css("z-index", "-1"); }); $("#facebook_logo,#facebook").hover( function() { $("#facebook").css("z-index", "2"); }, function() { $("#facebook").css("z-index", "-1"); }); $("#menu1").hover( function() { a = 1; }); $("#menu2").hover( function() { a = 2; }); $("#menu3").hover( function() { a = 3; }); $("#menu4").hover( function() { a = 4; }); $("#menu5").hover( function() { a = 5; }); $("#menu6").hover( function() { a = 6; }); $("#submenuwrapper").hover( function() { switch (a) { case 2: $("#menu2").css("color", "#9DC671"); $("#submenu").css("height", "60px"); break; case 3: $("#menu3").css("color", "#9DC671"); $("#submenu").css("height", "60px"); break; case 4: $("#menu4").css("color", "#9DC671"); $("#submenu").css("height", "60px"); break; case 5: $("#menu5").css("color", "#9DC671"); $("#submenu").css("height", "60px"); break; } }, function() { $("#submenu").css("height", "0"); $("#menu1,#menu2,#menu3,#menu4,#menu5,#menu6").css("color", "#004415"); }); $("#menu1,#menu2,#menu3,#menu4,#menu5,#menu6").hover( function() { //reset alles en display dan alleen de juiste $("#menu1,#menu2,#menu3,#menu4,#menu5,#menu6").css("color", "#004415"); $("#sub2,#sub3,#sub4,#sub5").css("display", "none"); switch (a) { case 1: $("#menu1").css("color", "#9DC671"); break; case 2: $("#menu2").css("color", "#9DC671"); $("#sub2").css("display", "block"); $("#submenu").css("height", "60px"); break; case 3: $("#menu3").css("color", "#9DC671"); $("#sub3").css("display", "block"); $("#submenu").css("height", "60px"); break; case 4: $("#menu4").css("color", "#9DC671"); $("#sub4").css("display", "block"); $("#submenu").css("height", "60px"); break; case 5: $("#menu5").css("color", "#9DC671"); $("#sub5").css("display", "block"); $("#submenu").css("height", "60px"); break; case 6: $("#menu6").css("color", "#9DC671"); break; } }, function() { $("#menu1,#menu2,#menu3,#menu4,#menu5,#menu6").css("color", "#004415"); $("#submenu").css("height", "0"); }); //Hexagon var vergroot = 0; var steps = 13; var afknot = 50; var amount = 6; var radius = 170; var width = 270; var height = 0.5 * Math.sqrt(3) * width; var image = ['f/f0/TU_Eindhoven_menu_policypractice.png','5/53/TU_Eindhoven_menu_collaborations.png','1/14/TU_Eindhoven_menu_sponsors.png','b/bb/TU_Eindhoven_menu_home.png','5/56/TU_Eindhoven_menu_team.png','1/1a/TU_Eindhoven_menu_project.png']; var title = ['Policy Practices','Collaboratons','Sponsors','Home','Team','Project']; var links = ['/Policy_Practices/Educational_outreach','/Collaborations/CloningGuide','/Team/Sponsors','','/Team/Members','/Project/Abstract']; for (j = 1; j <= amount; j++) { $('').appendTo($("#hexagonwrapper")); $('').appendTo($("#hexagon" + j.toString())); for (i = 0; i < steps + 1; i++) { $("").appendTo("#hexagon" + j.toString()).css({ 'display': 'block', 'width': ((100 - afknot) + afknot * (i / steps)).toString() + '%', 'height': 'calc(100% / ' + (steps * 2 + 1).toString() + ')', 'margin': '0 auto' }); } for (i = 1; i < steps + 1; i++) { $("").appendTo("#hexagon" + j.toString()).css({ 'display': 'block', 'width': (100 - afknot * (i / steps)).toString() + '%', 'height': 'calc(100% / ' + (steps * 2 + 1).toString() + ')', 'margin': '0 auto' }); } $("#hexagon" + j.toString()).css({ 'left': (radius * Math.cos(2 * Math.PI * (j - 1) / amount) + radius).toString() + "px", 'top': (radius * Math.sin(2 * Math.PI * (j - 1) / amount) + radius).toString() + "px", 'transform': 'scale(0.66, 0.66) rotate(' + (360 / amount * (j - 1) - 30).toString() + 'deg)' }); $("#hexagon" + j.toString()).hover(function() { groter($(this).attr('id').match(/\d+/)) }, function() { kleiner($(this).attr('id').match(/\d+/)) }); $(".hexagonhitbox" + j.toString()).css("pointer-events", "auto"); $("#hexagoncontentwrapper" + j.toString()).css('transform', 'rotate(' + (-(360 / amount * (j - 1) + 60)).toString() + 'deg)'); } $('

').appendTo($("#hexagonwrapper")); $("#hexagon" + (amount + 1).toString()).css({ 'left': (radius).toString() + "px", 'transform': 'scale(0.66,0.66) rotate(-90deg)', 'top': (radius).toString() + "px", 'background-image': 'url("https://static.igem.org/mediawiki/2015/0/06/Logo_website.png")' }); $(".hexagon").css({ "width": width, "height": height }); $("#hexagonwrapper").css({ "width": radius * 2 + width, "height": radius * 2 + height }); ! function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs"); (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); //Content Menu if (sessionStorage.hidden == "" || sessionStorage.hidden == "1") { direct_hide(); } }); function toggle_hide() { document.getElementById("contentmenu").style.transition = "transform 0.5s"; if (sessionStorage.hidden != "1") { document.getElementById("contentmenu").style.transform = "translateX(-90%) scale(1,0.4)"; document.getElementById("contentarrow").style.transform = "rotate(0deg)"; sessionStorage.hidden = "1"; } else { document.getElementById("contentmenu").style.transform = "translateX(0) scale(1,1)"; document.getElementById("contentarrow").style.transform = "rotate(180deg)"; sessionStorage.hidden = "0"; } } function direct_hide() { document.getElementById("contentarrow").style.transform = "rotate(0deg)"; document.getElementById("contentmenu").style.transform = "translateX(-90%) scale(1,0.4)"; } function groter(id) { if (vergroot == 0) { $("#hexagon" + id).css('transition', 'transform 0.5s'); $("#hexagon" + id).css('transform', 'scale(1,1) rotate(' + (360 / amount * (id - 1) - 30).toString() + 'deg)'); $("#hexagon" + id).css('z-index', 50); vergroot = 1; } } function kleiner(id) { if (vergroot == 1) { $("#hexagon" + id).css('transition', 'transform 0.5s, z-index 0.5s'); $("#hexagon" + id).css('transform', 'scale(0.66, 0.66) rotate(' + (360 / amount * (id - 1) - 30).toString() + 'deg)'); $("#hexagon" + id).css('z-index', 0); vergroot = 0; } }