Team:UT Dallas/test haccordian

From 2012.igem.org

(Difference between revisions)
 
(56 intermediate revisions not shown)
Line 8: Line 8:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
-
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/haccordion.js"></script>
+
<script type="text/javascript" src="https://2012.igem.org/Team:UT_Dallas/haccordion.js?action=raw&ctype=text/javascript"></script>
<script type='text/javascript' src='https://2012.igem.org/Team:UT_Dallas/script.js?action=raw&ctype=text/javascript'></script>
<script type='text/javascript' src='https://2012.igem.org/Team:UT_Dallas/script.js?action=raw&ctype=text/javascript'></script>
<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css&pu=khhkhhyw" rel="stylesheet">
<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css&pu=khhkhhyw" rel="stylesheet">
-
<link href="http://www.dynamicdrive.com/dynamicindex17/haccordion.css" rel="stylesheet">
 
</script>
</script>
<style type="text/css">
<style type="text/css">
-
/*CSS for example Accordion #hc1*/
+
.haccordion{
 +
padding: 0;
 +
}
-
#hc1 li{
+
.haccordion ul{
-
margin:0 3px 0 0; /*Spacing between each LI container*/
+
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
overflow: hidden; /*leave as is*/
}
}
-
#hc1 li .hpanel{
+
 
-
padding: 5px; /*Padding inside each content*/
+
.haccordion li{
-
background: lightblue;
+
margin: 0;
 +
padding: 0;
 +
display: block; /*leave as is*/
 +
width: 100%; /*For users with JS disabled: Width of each content*/
 +
height: 200px; /*For users with JS disabled: Height of each content*/
 +
overflow: hidden; /*leave as is*/
 +
float: left; /*leave as is*/
}
}
-
/*CSS for example Accordion #hc2*/
+
.haccordion li .hpanel{
 +
width: 100%; /*For users with JS disabled: Width of each content*/
 +
height: 200px;  /*For users with JS disabled: Height of each content*/
 +
}
 +
#hc2{
 +
float:right;
 +
position:absolute;z-index:999;
 +
}
#hc2 li{
#hc2 li{
margin:0 0 0 0; /*Spacing between each LI container*/
margin:0 0 0 0; /*Spacing between each LI container*/
-
border: 12px solid black;
+
border: 1px solid black;
}
}
#hc2 li .hpanel{
#hc2 li .hpanel{
-
padding: 5px; /*Padding inside each content*/
+
padding-left: 55px;  
-
background: #E2E9FF;
+
padding-right: 2px;
 +
padding-top: 2px;
 +
padding-bottom: 2px;  
cursor: hand;
cursor: hand;
cursor: pointer;
cursor: pointer;
Line 44: Line 63:
<script type="text/javascript">
<script type="text/javascript">
-
 
-
haccordion.setup({
 
-
accordionid: 'hc1', //main accordion div id
 
-
paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'},
 
-
selectedli: [0, true], //[selectedli_index, persiststate_bool]
 
-
collapsecurrent: false //<- No comma following very last setting!
 
-
})
 
-
 
haccordion.setup({
haccordion.setup({
accordionid: 'hc2', //main accordion div id
accordionid: 'hc2', //main accordion div id
-
paneldimensions: {peekw:'30px', fullw:'450px', h:'150px'},
+
paneldimensions: {peekw:'40px', fullw:'785px', h:'180px'},
selectedli: [-1, true], //[selectedli_index, persiststate_bool]
selectedli: [-1, true], //[selectedli_index, persiststate_bool]
collapsecurrent: true //<- No comma following very last setting!
collapsecurrent: true //<- No comma following very last setting!
})
})
-
 
</script>
</script>
</html>
</html>
Line 65: Line 75:
</div>
</div>
<div id='middle_box'>
<div id='middle_box'>
-
<div id='st_1'><h2 class='title'>Distributed Cellular Processing Units: a synergistic approach to biological computing</h2>
+
<table border='0' width="100%">
-
The goal of the 2012 University of Texas at Dallas IGEM team is to redefine biological information processing using quorum signaling-based biological circuitry in bacteria. Quorum signaling allows bacteria to communicate with each other through the use of chemical signals. Bacteria use this form of signaling in nature to coordinate their behavior. Using three quorum signaling molecules we create unique connections between different populations of engineered bacteria and perform coordinated computing functions. We design and characterize standard and novel modules such as toggle switches, oscillators, signal propagators, and logic gates. As compared to engineering molecular circuitry in single populations, we aim to show that the synergistic approach to information processing leads to improved, scalable, and tunable operation.
+
<tr>
-
</div>
+
<td width="170px" valign='top'>
-
 
+
<div id="hc2" class="haccordion">
-
<h2>Demo 1:</h2>
+
-
 
+
-
<div id="hc1" class="haccordion">
+
<ul>
<ul>
-
<li>
+
<li style="background:url('https://static.igem.org/mediawiki/2012/d/dc/Toggle_switch.png') no-repeat scroll 0 0 #EEEEEE;border-right-width:0">
<div class="hpanel">
<div class="hpanel">
-
<img src="http://img502.imageshack.us/img502/746/thailand.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.
+
Toggle switch
</div>
</div>
</li>
</li>
-
<li>
+
<li style="background:url('https://static.igem.org/mediawiki/2012/b/b7/Oscillator.png') no-repeat scroll 0 0 #EEEEEE;border-right-width:0">
<div class="hpanel">
<div class="hpanel">
-
<img src="http://img264.imageshack.us/img264/7199/japan.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Japan is a constitutional monarchy where the power of the Emperor is very limited.
+
oscillator
</div>
</div>
</li>
</li>
-
<li>
+
<li style="background:url('https://static.igem.org/mediawiki/2012/d/de/And_gate.png') no-repeat scroll 0 0 #EEEEEE;border-right-width:0">
<div class="hpanel">
<div class="hpanel">
-
<img src="http://img101.imageshack.us/img101/516/mayai.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Malaysia is a South Asian country rich in natural resources in areas such as agriculture, forestry and minerals.
+
AND gate
</div>
</div>
</li>
</li>
-
<li>
+
<li style="background:url('https://static.igem.org/mediawiki/2012/4/44/Infographics.png') no-repeat scroll 0 0 #EEEEEE;border-right-width:1px">
<div class="hpanel">
<div class="hpanel">
-
<img src="http://img194.imageshack.us/img194/9553/camam.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Agriculture has long been the most important sector of the Cambodian economy.
+
Infographics
-
</div>
+
-
</li>
+
-
 
+
-
<li>
+
-
<div class="hpanel">
+
-
<img src="http://img408.imageshack.us/img408/5751/langkawi.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Langkawi is particularly known for its beaches which are among the best in Malaysia.
+
</div>
</div>
</li>
</li>
Line 106: Line 107:
</ul>
</ul>
</div>
</div>
-
 
+
</td>
-
<p style="clear:left"><a href="javascript:haccordion.expandli('hc1', 0)">Expand 1 Panel</a> | <a href="javascript:haccordion.expandli('hc1', 1)">Expand 2nd Panel</a> | <a href="javascript:haccordion.expandli('hc1', 2)">Expand 3rd Panel</a> | <a href="javascript:haccordion.expandli('hc1', 3)">Expand 4th Panel</a> | <a href="javascript:haccordion.expandli('hc1', 4)">Expand 5th Panel</a></p>
+
<td>
-
 
+
<div id='st_1'><h2 class='title'>Distributed Cellular Processing Units: a synergistic approach to biological computing</h2>
-
 
+
The goal of the 2012 University of Texas at Dallas IGEM team is to redefine biological information processing using quorum signaling-based biological circuitry in bacteria. Quorum signaling allows bacteria to communicate with each other through the use of chemical signals. Bacteria use this form of signaling in nature to coordinate their behavior. Using three quorum signaling molecules we create unique connections between different populations of engineered bacteria and perform coordinated computing functions. We design and characterize standard and novel modules such as toggle switches, oscillators, signal propagators, and logic gates. As compared to engineering molecular circuitry in single populations, we aim to show that the synergistic approach to information processing leads to improved, scalable, and tunable operation.
-
<br />
+
-
 
+
-
 
+
-
 
+
-
<h2>Demo 2:</h2>
+
-
 
+
-
 
+
-
<div id="hc2" class="haccordion">
+
-
<ul>
+
-
 
+
-
<li style="border-right-width:0">
+
-
<div class="hpanel" style="padding:10px; width:250px">
+
-
This accordion content has a custom full width of 250px. Note where the two inline CSS are added within the markup.
+
-
</div>
+
-
</li>
+
-
 
+
-
<li style="border-right-width:0">
+
-
<div class="hpanel" style="padding:10px; width:180px">
+
-
This accordion content has a custom full width of 180px. Note where the two inline CSS are added within the markup.
+
-
</div>
+
-
</li>
+
-
 
+
-
<li style="border-right-width:0">
+
-
<div class="hpanel" style="padding:10px; width:350px">
+
-
This accordion content has a custom full width of 350px. Note where the two inline CSS are added within the markup.
+
-
</div>
+
-
</li>
+
-
 
+
-
<li>
+
-
<div class="hpanel" style="padding:10px; width:550px">
+
-
This accordion content has a custom full width of 550px. Note where the two inline CSS are added within the markup.
+
-
</div>
+
-
</li>
+
-
 
+
-
</ul>
+
</div>
</div>
 +
</td></tr></table>
</div>
</div>
</html>
</html>

Latest revision as of 01:59, 27 September 2012

  • Toggle switch
  • oscillator
  • AND gate
  • Infographics

Distributed Cellular Processing Units: a synergistic approach to biological computing

The goal of the 2012 University of Texas at Dallas IGEM team is to redefine biological information processing using quorum signaling-based biological circuitry in bacteria. Quorum signaling allows bacteria to communicate with each other through the use of chemical signals. Bacteria use this form of signaling in nature to coordinate their behavior. Using three quorum signaling molecules we create unique connections between different populations of engineered bacteria and perform coordinated computing functions. We design and characterize standard and novel modules such as toggle switches, oscillators, signal propagators, and logic gates. As compared to engineering molecular circuitry in single populations, we aim to show that the synergistic approach to information processing leads to improved, scalable, and tunable operation.
Retrieved from "http://2012.igem.org/Team:UT_Dallas/test_haccordian"