"
Team:Freiburg/Team/Members
From 2014.igem.org
(Difference between revisions)
| Line 54: | Line 54: | ||
{{:Team:Freiburg/Templates/html/js.html}} | {{:Team:Freiburg/Templates/html/js.html}} | ||
<html> | <html> | ||
| + | <script> | ||
| + | $(document).ready(function(){ | ||
| + | var animating = false; | ||
| + | var posRecep = [200,270]; // receptorpos | ||
| + | var time = 0.7/300; // s/px | ||
| + | function selectMember(){ | ||
| + | // just don't animate when we are currently docking | ||
| + | if (animating) return; | ||
| + | animating = true; | ||
| + | |||
| + | var $this = $(this); | ||
| + | |||
| + | // move docked head back | ||
| + | $active = $('.team-member-virus .member.active'); | ||
| + | $active.each(function(){ | ||
| + | var $this = $(this); | ||
| + | var pos = $this.data('orig-pos'); | ||
| + | $this.css('-webkit-transform', 'translate('+pos[0]+'px,'+pos[1]+'px)'); | ||
| + | $this.css('-ms-transform', 'translate('+pos[0]+'px,'+pos[1]+'px)'); | ||
| + | $this.css('-o-transform', 'translate('+pos[0]+'px,'+pos[1]+'px)'); | ||
| + | $this.css('transform', 'translate('+pos[0]+'px,'+pos[1]+'px)'); | ||
| + | $this.attr('class', 'member'); | ||
| + | }) | ||
| + | |||
| + | // set current member active | ||
| + | $this.attr('class', 'member active'); | ||
| + | |||
| + | // move head to receptor | ||
| + | $this.css('-webkit-transform', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)'); | ||
| + | $this.css('-ms-transform', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)'); | ||
| + | $this.css('-0', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)'); | ||
| + | $this.css('transform', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)'); | ||
| + | |||
| + | console.log($this.data('duration')); | ||
| + | |||
| + | setTimeout(function(){ | ||
| + | // docked part | ||
| + | |||
| + | // get content of member | ||
| + | var content = $('#data-'+$this.data('id')).html(); | ||
| + | // apply content of member to the red cell content area | ||
| + | $('#member-description').html(content); | ||
| + | |||
| + | // get the image url | ||
| + | var href = $this.find('image').attr('xlink:href'); | ||
| + | // apply to the cellcore | ||
| + | $('#lecell image').attr('xlink:href', href); | ||
| + | |||
| + | animating = false; | ||
| + | |||
| + | }, $this.data('duration') * 1000); | ||
| + | |||
| + | } | ||
| + | $('.team-member-virus .member') | ||
| + | .each(function(){ | ||
| + | // set orig-pos | ||
| + | var $this = $(this); | ||
| + | console.dir($this); | ||
| + | var transform = $this.attr('transform'); | ||
| + | transform = transform.match(/translate\((\d+),(\d+)\)/); | ||
| + | pos = [transform[1],transform[2]]; | ||
| + | $this.data('orig-pos', pos); | ||
| + | $this.css('transform', 'translate('+pos[0]+'px,'+pos[1]+'px)'); | ||
| + | // compute duration | ||
| + | var dist = Math.sqrt(Math.pow(posRecep[0] - pos[0],2) + | ||
| + | Math.pow(posRecep[1] - pos[1],2)); | ||
| + | var dur = dist*time; | ||
| + | $this.css('transition-duration', dur + 's'); | ||
| + | $this.data('duration', dur); | ||
| + | }) | ||
| + | // add the click handler | ||
| + | .click(selectMember); | ||
| + | }); | ||
| + | |||
| + | </script> | ||
<script> | <script> | ||
// set title | // set title | ||
Revision as of 10:34, 17 October 2014
