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

 
(16 intermediate revisions by 2 users not shown)
Line 4: Line 4:
 
var afknot = 50;
 
var afknot = 50;
 
var amount = 6;
 
var amount = 6;
−
var radius = 250;
+
var radius = 200;
 
var width = 320;
 
var width = 320;
 
var height = 0.5 * Math.sqrt(3) * width;
 
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', 'Collaborations', 'Sponsors', 'Home', 'Team', 'Project'];
 
−
var links = ['/Practices', '/Collaborations', '/Team/Sponsors', '', '/Team', '/Description'];
 
  
 +
var image = ['5/56/TU_Eindhoven_menu_team.png', '5/53/TU_Eindhoven_menu_collaborations.png', 'b/bc/TU_Eindhoven_Results_Icon_Small.png', '1/1a/TU_Eindhoven_menu_project.png', '1/1d/TU_Eindhoven_menu_modeling.png', 'f/f0/TU_Eindhoven_menu_policypractice.png'];
  
 +
var title = ['Team','Collaborations','Results','Project','Modeling','Policy Practices'];
 +
var links = ['/Team','/Collaborations','/ResultsHome','/Project','/Modeling','/Practices'];
  
 
$(document).ready(function() {
 
$(document).ready(function() {
Line 56: Line 56:
  
 
     $('<div class="hexagon" id="hexagon' + (amount + 1).toString() + '"></div>').appendTo($("#hexagonwrapper"));
 
     $('<div class="hexagon" id="hexagon' + (amount + 1).toString() + '"></div>').appendTo($("#hexagonwrapper"));
 +
 +
  
 
     $("#hexagon" + (amount + 1).toString()).css({
 
     $("#hexagon" + (amount + 1).toString()).css({
Line 61: Line 63:
 
         'transform': 'scale(0.66,0.66) rotate(-90deg)',
 
         'transform': 'scale(0.66,0.66) rotate(-90deg)',
 
         'top': (radius).toString() + "px",
 
         'top': (radius).toString() + "px",
−
         'background-image': 'url("https://static.igem.org/mediawiki/2015/0/06/Logo_website.png")'
+
         'background-image':'url("https://static.igem.org/mediawiki/2015/0/06/Logo_website.png")'
 
     });
 
     });
 +
  
 
     $(".hexagon").css({
 
     $(".hexagon").css({
Line 80: Line 83:
 
     if (vergroot == 0) {
 
     if (vergroot == 0) {
 
         $("#hexagon" + id).css('transition', 'transform 0.5s');
 
         $("#hexagon" + id).css('transition', 'transform 0.5s');
−
         $("#hexagon" + id).css('transform', 'rotate(' + (360 / amount * (id - 1) - 30).toString() + 'deg) translate(55px, 30px)');
+
         $("#hexagon" + id).css('transform', 'rotate(' + (360 / amount * (id - 1) - 30).toString() + 'deg) translate(45px, 23px)');
 
         $("#hexagon" + id).css('z-index', 50);
 
         $("#hexagon" + id).css('z-index', 50);
 
         vergroot = 1;
 
         vergroot = 1;

Latest revision as of 03:27, 19 September 2015

var vergroot = 0; var steps = 13; var afknot = 50; var amount = 6; var radius = 200; var width = 320; var height = 0.5 * Math.sqrt(3) * width; var image = ['5/56/TU_Eindhoven_menu_team.png', '5/53/TU_Eindhoven_menu_collaborations.png', 'b/bc/TU_Eindhoven_Results_Icon_Small.png', '1/1a/TU_Eindhoven_menu_project.png', '1/1d/TU_Eindhoven_menu_modeling.png', 'f/f0/TU_Eindhoven_menu_policypractice.png']; var title = ['Team','Collaborations','Results','Project','Modeling','Policy Practices']; var links = ['/Team','/Collaborations','/ResultsHome','/Project','/Modeling','/Practices']; $(document).ready(function() { //Hexagon for (j = 1; j <= amount; j++) { $('

').appendTo($("#hexagonwrapper")); $('
' + title[j - 1] + '
').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 groter(id) { if (vergroot == 0) { $("#hexagon" + id).css('transition', 'transform 0.5s'); $("#hexagon" + id).css('transform', 'rotate(' + (360 / amount * (id - 1) - 30).toString() + 'deg) translate(45px, 23px)'); $("#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; } }