Difference between revisions of "Template:Team:TU Eindhoven/Home HTML"

Line 16: Line 16:
  
 
iGEM is the world’s leading competition in the field of Synthetic Biology <br /></span></div>
 
iGEM is the world’s leading competition in the field of Synthetic Biology <br /></span></div>
 
<script>
 
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'];
 
 
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;
 
    }
 
}
 
 
$(document).ready(function() {
 
 
        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">' + title[j-1] + '</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() + "' >").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
 
            });
 
    });
 
</script>
 
  
 
<div id="hexagonwrapper">
 
<div id="hexagonwrapper">

Revision as of 10:39, 18 July 2015







Welcome to the wiki of iGEM TU Eindhoven 2015!



iGEM is the world’s leading competition in the field of Synthetic Biology
For more information, you can contact us.