Team:LMU-Munich/Primer Design/Design Primers

From 2011.igem.org

(Difference between revisions)
(mathias: second part of pd)
 
(15 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;
}
}
-
#content-full input, #content-full select {
+
.rightbox input, .rightbox select {
float: right;
float: right;
width: 150px;
width: 150px;
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>DNA sequence</h2>
+
<p><label for="seq_n"><h2>Upstream region</h2></label>
-
<textarea name="seq" cols="40" rows="10" 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>
 +
</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;">
 +
<h3>Options</h3>
 +
<label>Restriction Enzyme: <input type="text" name="enzyme_n" id="enzyme_n" /></label>
 +
<label>Primer Length: <input type="text" name="length_n" value="20" /></label>
 +
</div>
 +
-->
 +
<div id="noncoding" class="leftbox" style="width: 630px">
 +
<p><label><h2>Coding Sequence</h2>
 +
<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" />
-
<label>Source Genome: <select name="genome" rows="1">
+
-
<option value="k12">K12</option>
+
-
</select></label>
+
-
<label>enzyme: <input type="text" name="enzyme" id="enzyme" /></label>
+
-
<div id="enzyme-list">
+
-
<a href="#">List enzymes</a>
+
-
<ul id="enzymes">
+
-
<li>AaaI</li>
+
-
<li>AacLI</li>
+
-
<li>AaeI</li>
+
-
<li>AagI</li>
+
-
<li>AanI</li>
+
-
<li>AaqI</li>
+
-
<li>AarI</li>
+
-
<li>AasI</li>
+
-
<li>AatI</li>
+
-
<li>AatII</li>
+
-
<li>AauI</li>
+
-
<li>AbaI</li>
+
-
<li>AbeI</li>
+
-
<li>AbrI</li>
+
-
<li>AbsI</li>
+
-
<li>AcaI</li>
+
-
<li>AcaII</li>
+
-
<li>AcaIII</li>
+
-
<li>AcaIV</li>
+
-
<li>AccI</li>
+
-
<li>AccII</li>
+
-
<li>AccIII</li>
+
-
<li>Acc16I</li>
+
-
<li>Acc36I</li>
+
-
</ul>
+
</div>
</div>
<script type="text/javascript">
<script type="text/javascript">
-
var enzymes = document.getElementById('enzymes').getElementsByTagName('li');
+
//document.getElementById('entropy').onclick = function() {
-
for(var i = 0; i < enzymes.length; ++i) {
+
//document.getElementById('na').disabled = false;
-
enzymes[i].onclick = function() {
+
//}
-
document.getElementById('enzymes').style.display='none';
+
//document.getElementById('wallace').onclick = function() {
-
document.getElementById('enzyme').value=this.firstChild.nodeValue;
+
//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('radio-coding').onclick = function() {
 +
document.getElementById('noncoding').style.display = "block";
 +
document.getElementById('coding1').style.display = "none";
 +
document.getElementById('coding2').style.display = "none";
 +
}
 +
document.getElementById('noncoding').style.display = "none";
-
document.getElementById('enzyme-list').style.display='inline-block';
+
var enzymes = [
-
document.getElementById('enzyme-list').getElementsByTagName('a')[0].onclick = function() {
+
</html>{{:Team:LMU-Munich/Templates/Enzymes}}<html>
-
document.getElementById('enzymes').style.display='block';
+
];
-
return false;
+
 
 +
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';
}
}
-
document.getElementById('enzymes').style.display='none';
+
}
-
</script>
+
var button = document.createElement('input');
-
</div>
+
button.setAttribute('value', 'Show enzymes…');
-
<div class="rightbox" style="width: 290px;">
+
button.setAttribute('type', 'button');
-
<input type="submit" style="width: 49%;" value="N" name="do_n" />
+
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);
 +
};
-
<input type="submit" style="width: 49%;" value="C" name="do_c" />
+
//populate(document.getElementById('enzyme_n'));
-
</div>
+
//populate(document.getElementById('enzyme_c'));
 +
</script>
</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"