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

Line 1: Line 1:
 
<html>
 
<html>
−
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'];
+
  
 
$(document).ready(function() {
 
$(document).ready(function() {
Line 121: Line 112:
 
             $("#submenu").css("height", "0");
 
             $("#submenu").css("height", "0");
 
         });
 
         });
−
 
−
    //Hexagon
 
−
 
−
    for (j = 1; j <= amount; j++) {
 
−
        $('<div class="hexagon" id="hexagon' + j.toString() + '"></div>').appendTo($("#hexagonwrapper"));
 
−
        $('<div class="hexagoncontentwrapper" id="hexagoncontentwrapper' + j.toString() + '" ><div class="hexagontext"><span class="tekst1"> ' + title[j - 1] + '</span></div> <div class="hexagonimage"> <img class="hexagonlogos" src="https://static.igem.org/mediawiki/2015/' + image[j - 1] + '" /></div></div>').appendTo($("#hexagon" + j.toString()));
 
−
        for (i = 0; i < steps + 1; i++) {
 
−
            $("<a class='hexagonhitbox" + j.toString() + "' href='https://2015.igem.org/Team:TU_Eindhoven" + links[j - 1].toString() + "' >").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++) {
 
−
            $("<a class='hexagonhitbox" + j.toString() + "' href='https://2015.igem.org/Team:TU_Eindhoven" + links[j - 1].toString() + "' >").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)');
 
−
    }
 
−
 
−
    $('<div class="hexagon" id="hexagon' + (amount + 1).toString() + '"></div>').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) {
 
     ! function(d, s, id) {
Line 222: Line 155:
 
     document.getElementById("contentarrow").style.transform = "rotate(0deg)";
 
     document.getElementById("contentarrow").style.transform = "rotate(0deg)";
 
     document.getElementById("contentmenu").style.transform = "translateX(-90%) scale(1,0.4)";
 
     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;
 
−
    }
 
 
}
 
}
 
</html>
 
</html>

Revision as of 12:56, 21 July 2015

$(document).ready(function() { //background $("

").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"); }); ! 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)"; }