Team:ETH Zurich/Templates/interactive

From 2013.igem.org

(Difference between revisions)
Line 12: Line 12:
#cell_holder {
#cell_holder {
   float: left;
   float: left;
-
   margin: 100px 100px 100px 100px;
+
   margin: 0px 0px 0px 100px;
}
}
.cell_selector{
.cell_selector{
-
height: 200px;
+
height: 18px;
width: 250px;
width: 250px;
background-color: green;
background-color: green;
 +
color: white;
 +
border: 1px solid black;
 +
}
 +
.cell_img{
 +
height: 400px;
 +
width: 400px;
 +
background-color: red;
color: white;
color: white;
border: 1px solid black;
border: 1px solid black;
Line 34: Line 41:
<div id="cell_holder">
<div id="cell_holder">
 +
<p class="cell_selecto">
 +
SENDER CELL
 +
</p>
<p class="cell_selector">
<p class="cell_selector">
SENDER CELL
SENDER CELL
Line 39: Line 49:
-
<!--<div id="receiver_cell" class="cell_img"><img src="https://static.igem.org/mediawiki/2013/a/a7/Receiver_cell.png"></div>-->
+
<div id="receiver_cell" class="cell_img"><img src="https://static.igem.org/mediawiki/2013/a/a7/Receiver_cell.png"></div>
-
<p class="cell_selecto">
+
<p id="works" class="cell_selector">
RECEIVER CELL
RECEIVER CELL
</p>
</p>
Line 49: Line 59:
</div>
</div>
<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/2/21/LacZ.png"></div>
-
<div id="test_bild2"><img src="https://static.igem.org/mediawiki/2013/7/76/PhoA.png"></div>
+
<div id="test_bild3"><img src="https://static.igem.org/mediawiki/2013/7/76/PhoA.png"></div>
</div>
</div>
<script>
<script>
Line 56: Line 66:
         var selector = $('.cell_selector');
         var selector = $('.cell_selector');
         var imgs = $('.cell_img');
         var imgs = $('.cell_img');
 +
        imgs.hide();
$('#test_bild2').nextAll().delay(5000).fadeIn()
$('#test_bild2').nextAll().delay(5000).fadeIn()
         selector.click(function() {
         selector.click(function() {
 +
          $('#test_bild2').delay(50).fadeOut()
           var cur = $('this');
           var cur = $('this');
-
           cur.siblings('div').slideUp();
+
           $('cur').delay(50).fadeOut()
-
           cur.next('div').slideDown();
+
          getElementById("works").siblings('.cell_img').slideUp();
 +
           getElementById("works").next('.cell_img').show();
});
});
});
});

Revision as of 09:54, 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"