Team:LMU-Munich/Primer Design/Design Primers

From 2011.igem.org

(Difference between revisions)
(mathias: some fun with the entropy/na^+ concentration controls)
 
(10 intermediate revisions not shown)
Line 7: Line 7:
<style type="text/css">
<style type="text/css">
-
#enzyme-list {
+
.popup {
position: relative;
position: relative;
-
display: none;
 
}
}
-
#enzymes {
+
.popup ul {
position:absolute;
position:absolute;
background: white;
background: white;
border: 1px solid black;
border: 1px solid black;
margin: 0;
margin: 0;
 +
right: 0;
 +
top: 2em;
padding: 4px;
padding: 4px;
-
height: 10em;
+
height: 30em;
-
width: 10em;
+
width: 150px;
overflow:auto;
overflow:auto;
 +
z-index: 100;
}
}
-
#enzymes li:hover {
+
.popup li:hover {
background: black;
background: black;
color: white;
color: white;
Line 34: Line 36:
#content-full label {
#content-full label {
clear: both;
clear: both;
 +
}
 +
 +
.radios {
 +
clear: right;
 +
}
 +
 +
.radios div {
 +
width: 180px;
 +
float: right;
 +
}
 +
 +
.radios input {
 +
float: none;
 +
width: auto;
 +
}
 +
 +
.radios label {
 +
clear: none;
}
}
</style>
</style>
<form action="http://wrtlprnft.ath.cx/~igem/primer_designer/primer_designer.php" method="post" enctype="multipart/form-data" target="result">
<form action="http://wrtlprnft.ath.cx/~igem/primer_designer/primer_designer.php" method="post" enctype="multipart/form-data" target="result">
-
<div class="leftbox" style="width: 630px">
+
<div class="rightbox" style="width: 290px;">
 +
<h2>Options</h2>
 +
<div class="radios">
 +
Mode:
 +
<div>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="cmode" value="coding" id="radio-coding" />Coding
 +
  </label>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="cmode" value="noncoding" checked="checked" id="radio-noncoding" />Non-Coding
 +
  </label>
 +
</div>
 +
</div>
 +
<div class="radios">
 +
Standard:
 +
<div>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="standard" value="biobrick" checked="checked" />Classic Biobrick
 +
  </label>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="standard" value="freiburg" />Freiburg
 +
  </label>
 +
</div>
 +
</div>
 +
<div class="radios">
 +
Check for restriction sites?
 +
<div>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="restriction" value="yes"  />Yes
 +
  </label>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="restriction" value="only" checked="checked"/>Only used for Biobricks
 +
  </label>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="restriction" value="no" />No
 +
  </label>
 +
</div>
 +
</div>
 +
<!--
 +
<div class="radios">
 +
Melting point:
 +
<div>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="melting" value="wallace" checked="checked" id="wallace" />Wallace
 +
  </label>
 +
  <label style="clear: none;">
 +
  <input type="radio" name="melting" value="entropy" id="entropy" />Entropy based
 +
  </label>
 +
</div>
 +
</div>
 +
<label>Na<sup>+</sup> concentration: <input type="text" name="na" id="na" value="0.8" /></label>
 +
-->
 +
</div>
 +
<div id="coding1" class="leftbox" style="width: 630px">
<input type="hidden" name="mode" value="primer" />
<input type="hidden" name="mode" value="primer" />
-
<p><label><h2>Before 5'</h2>
+
<p><label for="seq_n"><h2>Upstream region</h2></label>
-
<textarea name="seq_n" cols="40" rows="6" style="width: 98%; margin: 0; padding: 0;"></textarea></label></p>
+
<label>Primer Length: <input type="text" id="length_n" name="length_n" value="20" /></label>
 +
<textarea name="seq_n" id="seq_n" cols="40" rows="6" style="width: 98%; margin: 0; padding: 0;"></textarea></p>
<p><label>You can also upload a FASTA file: <input type="file" name="seq_n-file" /></label></p>
<p><label>You can also upload a FASTA file: <input type="file" name="seq_n-file" /></label></p>
</div>
</div>
 +
<div id="coding2" class="leftbox" style="width: 630px">
 +
<p><label for="seq_c"><h2>Downstream region</h2></label>
 +
<label>Primer Length: <input type="text" id="length_c" name="length_c" value="20" /></label>
 +
<textarea name="seq_c" id="seq_c" cols="40" rows="6" style="width: 98%; margin: 0; padding: 0;"></textarea></p>
 +
<p><label>You can also upload a FASTA file: <input type="file" name="seq_c-file" /></label></p>
 +
</div>
 +
<!--
<div class="rightbox" style="width: 290px;">
<div class="rightbox" style="width: 290px;">
<h3>Options</h3>
<h3>Options</h3>
Line 48: Line 129:
<label>Primer Length: <input type="text" name="length_n" value="20" /></label>
<label>Primer Length: <input type="text" name="length_n" value="20" /></label>
</div>
</div>
-
<div class="leftbox" style="width: 630px">
+
-->
-
<p><label><h2>After 3'</h2>
+
<div id="noncoding" class="leftbox" style="width: 630px">
-
<textarea name="seq_c" cols="40" rows="6" style="width: 98%; margin: 0; padding: 0;"></textarea></label></p>
+
<p><label><h2>Coding Sequence</h2>
-
<p><label>You can also upload a FASTA file: <input type="file" name="seq_c-file" /></label></p>
+
-
</div>
+
-
<div class="rightbox" style="width: 290px;">
+
-
<h3>Options</h3>
+
-
<label>Restriction Enzyme: <input type="text" name="enzyme_c" id="enzyme_c" /></label>
+
-
<label>Primer Length: <input type="text" name="length_c" value="20" /></label>
+
-
</div>
+
-
<div class="leftbox" style="width: 630px">
+
-
<p><label><h2>Surrounding Region</h2>
+
<textarea name="seq" cols="40" rows="6" style="width: 98%; margin: 0; padding: 0;"></textarea></label></p>
<textarea name="seq" cols="40" rows="6" style="width: 98%; margin: 0; padding: 0;"></textarea></label></p>
<p><label>You can also upload a FASTA file: <input type="file" name="seq-file" /></label></p>
<p><label>You can also upload a FASTA file: <input type="file" name="seq-file" /></label></p>
</div>
</div>
<div class="rightbox" style="width: 290px;">
<div class="rightbox" style="width: 290px;">
-
<h2>Options</h2>
+
<input type="submit" style="width: 99%;" value="Submit" />
-
Melting point:<div style="width:150px; float:right"><label style="clear: none;"><input type="radio" name="melting" value="wallace" checked="checked" style="float: none; width: auto" id="wallace" />Wallace</label><label style="clear: none;"><input type="radio" name="melting" value="entropy" style="float: none; width: auto;" id="entropy" />Entropy based</label></div>
+
</div>
-
<label>Na<sup>+</sup> concentration: <input type="text" name="na" id="na" value="0.8" /></label>
+
<script type="text/javascript">
<script type="text/javascript">
-
document.getElementById('entropy').onclick = function() {
+
//document.getElementById('entropy').onclick = function() {
-
document.getElementById('na').disabled = false;
+
//document.getElementById('na').disabled = false;
 +
//}
 +
//document.getElementById('wallace').onclick = function() {
 +
//document.getElementById('na').disabled = true;
 +
//}
 +
//document.getElementById('na').disabled = true;
 +
 
 +
document.getElementById('radio-noncoding').onclick = function() {
 +
document.getElementById('coding1').style.display = "block";
 +
document.getElementById('coding2').style.display = "block";
 +
document.getElementById('noncoding').style.display = "none";
}
}
-
document.getElementById('wallace').onclick = function() {
+
document.getElementById('radio-coding').onclick = function() {
-
document.getElementById('na').disabled = true;
+
document.getElementById('noncoding').style.display = "block";
 +
document.getElementById('coding1').style.display = "none";
 +
document.getElementById('coding2').style.display = "none";
}
}
-
document.getElementById('na').disabled = true;
+
document.getElementById('noncoding').style.display = "none";
 +
 
 +
var enzymes = [
 +
</html>{{:Team:LMU-Munich/Templates/Enzymes}}<html>
 +
];
 +
 
 +
populate = function(elem) {
 +
var div = document.createElement('div');
 +
var ul = document.createElement('ul');
 +
for(var i = 0; i < enzymes.length; ++i) {
 +
var li = document.createElement('li');
 +
var text = document.createTextNode(enzymes[i]);
 +
li.appendChild(text);
 +
ul.appendChild(li);
 +
li.onclick = function() {
 +
elem.value = this.firstChild.nodeValue;
 +
ul.style.display = 'none';
 +
}
 +
}
 +
var button = document.createElement('input');
 +
button.setAttribute('value', 'Show enzymes…');
 +
button.setAttribute('type', 'button');
 +
button.onclick = function() {
 +
ul.style.display = 'block';
 +
}
 +
div.appendChild(button);
 +
div.appendChild(ul);
 +
div.setAttribute('class', 'popup');
 +
ul.style.display = 'none';
 +
elem.parentNode.parentNode.insertBefore(div, elem.parentNode.nextSibling);
 +
};
 +
 
 +
//populate(document.getElementById('enzyme_n'));
 +
//populate(document.getElementById('enzyme_c'));
</script>
</script>
-
</div>
 
-
<div class="rightbox" style="width: 290px;">
 
-
<input type="submit" style="width: 99%;" value="Submit" />
 
-
</div>
 
</form>
</form>

Latest revision as of 21:25, 21 September 2011


Options

Mode:
Standard:
Check for restriction sites?

Upstream region

Downstream region

Coding Sequence


Retrieved from "http://2011.igem.org/Team:LMU-Munich/Primer_Design/Design_Primers"