Team:ETH Zurich/Templates/interactive

From 2013.igem.org

(Difference between revisions)
 
(12 intermediate revisions not shown)
Line 3: Line 3:
<head>
<head>
<style>
<style>
 +
#content {
 +
  margin: 50px 0 0 0;
 +
}
 +
#test_bild {
#test_bild {
   float: left;
   float: left;
}
}
-
#test_bild2 {
+
#cell_holder {
   float: left;
   float: left;
   margin: 0px 0px 0px 100px;
   margin: 0px 0px 0px 100px;
}
}
 +
.cell_selector{
 +
height: 18px;
 +
width: 250px;
 +
background-color: green;
 +
color: white;
 +
border: 1px solid black;
 +
}
 +
.cell_img{
 +
height: 400px;
 +
width: 400px;
 +
background-color: red;
 +
color: white;
 +
border: 1px solid black;
 +
}
 +
</style>
</style>
Line 16: Line 35:
</head>
</head>
<body>
<body>
 +
 +
<div id="content">
<div id="test_bild"><img src="https://static.igem.org/mediawiki/2013/e/e7/Plate.png"></div>
<div id="test_bild"><img src="https://static.igem.org/mediawiki/2013/e/e7/Plate.png"></div>
-
<div id="test_bild2"><img src="https://static.igem.org/mediawiki/2013/a/a7/Receiver_cell.png"></div>
+
<div id="cell_holder">
-
<div id="test_bild2"><img src="https://static.igem.org/mediawiki/2013/2/21/LacZ.png"></div>
+
-
<div id="test_bild2"><img src="https://static.igem.org/mediawiki/2013/7/76/PhoA.png"></div>
+
 +
<p class="cell_selecto">
 +
SENDER CELL
 +
</p>
 +
<p class="cell_selector">
 +
SENDER CELL
 +
</p>
 +
 +
 +
<div id="receiver_cell" class="cell_img"><img src="https://static.igem.org/mediawiki/2013/a/a7/Receiver_cell.png"></div>
 +
 +
<p id="works" class="cell_selector">
 +
RECEIVER CELL
 +
</p>
 +
 +
<div id="sender_cell" class="cell_img"><img src="https://static.igem.org/mediawiki/2013/a/a7/Receiver_cell.png"></div>
 +
 +
</div>
 +
<div id="test_bild2"><img src="https://static.igem.org/mediawiki/2013/2/21/LacZ.png"></div>
 +
<div id="test_bild3"><img src="https://static.igem.org/mediawiki/2013/7/76/PhoA.png"></div>
 +
</div>
<script>
<script>
$('#test_bild2').nextAll().hide();
$('#test_bild2').nextAll().hide();
$(document).ready(function() {
$(document).ready(function() {
-
+
        var selector = $('.cell_selector');
-
         $('#test_bild2').nextAll().delay(5000).fadeIn()
+
         var imgs = $('.cell_img');
 +
        imgs.hide();
 +
$('#test_bild2').nextAll().delay(5000).fadeIn()
 +
        selector.click(function() {
 +
          $('#test_bild2').delay(50).fadeOut()
 +
          var cur = $('this');
 +
          $('cur').delay(50).fadeOut()
 +
          ("works").siblings('.cell_img').slideUp();
 +
          document.getElementById("works").next('.cell_img').show();
 +
});
});
});
</script>
</script>

Latest revision as of 10:04, 23 August 2013

Header2.png
80px-Eth igem logo.png

SENDER CELL

SENDER CELL

RECEIVER CELL

Retrieved from "http://2013.igem.org/Team:ETH_Zurich/Templates/interactive"