"
Team:Freiburg/Team/Members
From 2014.igem.org
(Difference between revisions)
| (4 intermediate revisions not shown) | |||
| Line 5: | Line 5: | ||
<style> | <style> | ||
.header-right { | .header-right { | ||
| - | background: -moz-linear-gradient(0deg, #181617 0%, #181617 10%, rgba(24, 22, 23, 0) 30%), url(https://static.igem.org/mediawiki/2014/ | + | background: -moz-linear-gradient(0deg, #181617 0%, #181617 10%, rgba(24, 22, 23, 0) 30%), url(https://static.igem.org/mediawiki/2014/5/5b/Freiburg2014-panorama_Thumbnail.jpg); |
| - | background: -webkit-linear-gradient(0deg, #181617 0%, #181617 10%, rgba(24, 22, 23, 0) 30%), url(https://static.igem.org/mediawiki/2014/ | + | background: -webkit-linear-gradient(0deg, #181617 0%, #181617 10%, rgba(24, 22, 23, 0) 30%), url(https://static.igem.org/mediawiki/2014/5/5b/Freiburg2014-panorama_Thumbnail.jpg); |
| - | background: linear-gradient(90deg, #181617 0%, #181617 10%, rgba(24, 22, 23, 0) 30%), url(https://static.igem.org/mediawiki/2014/ | + | background: linear-gradient(90deg, #181617 0%, #181617 10%, rgba(24, 22, 23, 0) 30%), url(https://static.igem.org/mediawiki/2014/5/5b/Freiburg2014-panorama_Thumbnail.jpg); |
background-size: 100% auto, 100% auto; | background-size: 100% auto, 100% auto; | ||
background-position: center center, center center; | background-position: center center, center center; | ||
| Line 28: | Line 28: | ||
<ul class="nav"> | <ul class="nav"> | ||
<li class="active"> | <li class="active"> | ||
| - | + | <a href="#Team-Team">Team</a> | |
| - | <a href="# | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
</li> | </li> | ||
</ul> | </ul> | ||
| Line 52: | Line 43: | ||
{{: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)'); | ||
| + | |||
| + | 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); | ||
| + | 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 | ||
Latest revision as of 21:04, 17 October 2014
