|
|
| Line 77: |
Line 77: |
| | | | |
| | | | |
| − | $("#hexagon5").css({'left':'800px','top':'800px'}); | + | $("#hexagon5").css({'left':'20px','top':'0px'}); |
| | | | |
| | }); | | }); |
Revision as of 03:19, 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"));
$('
').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
});
$("#hexagon5").css({'left':'20px','top':'0px'});
});
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;
}
}
