images/arrowdown.gif
images/arrowleft.gif
images/arrowright.gif
images/arrowup.gif
images/bl.gif
images/bl.png
images/br.gif
images/br.png
images/darrowdown.gif
images/darrowleft.gif
images/darrowright.gif
images/darrowup.gif
images/rarrowdown.gif
images/rarrowleft.gif
images/rarrowright.gif
images/rarrowup.gif
images/tl.gif
images/tl.png
images/tr.gif
images/tr.png
jquery.cluetip.css
jquery.cluetip.js
jquery.dimensions.js
jquery.hoverIntent.js
wait.gif
@@ -3,10 +3,20 @@
<title>DNA<->RNA->protein</title>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="logic.js"></script>
+
<script type="text/javascript" src="jquery-1.2.6.js"></script>
+ <!-- required by clue-tip -->
+ <script type="text/javascript" src="jquery.dimensions.js"></script>
+ <script type="text/javascript" src="jquery.hoverIntent.js"></script>
+ <!-- cluetip, flexible tooltips -->
+ <script type="text/javascript" src="jquery.cluetip.js"></script>
+ <!-- functions for displaying the results of the dna/rna logic stuff -->
<script type="text/javascript" src="views.js"></script>
+
+ <link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
<link rel="stylesheet" href="style.css" />
</head>
+
<body>
<div id="info">
<h1>Transcription and Translation Tool</h1>
@@ -22,13 +32,32 @@
<div id="content">
<div id="sequences">
<div id="dna-sequence">
- <h3>DNA Sequence</h3>
+ <h3 class="load-local"
+ title="<strong>DNA</strong> (<strong>D</strong>eoxyribo<strong>N</strong>ucleic <strong>A</strong>cid)"
+ rel="#dna-explanation">DNA Sequence</a></h3>
+ <div class="tooltip" id="dna-explanation">
+ <ul>
+ <li>a permanent copy of genetic information.</li>
+ <li>uses “T” instead of “U”</li>
+ <li>no 2' <code>OH</code> group</li>
+ <li>more stable than RNA</li>
+ <li>lower error frequency during replication than RNA
+ </ul>
+ </div>
<p>
<textarea id="dnaString" rows="10" cols="30"></textarea>
</p>
</div>
<div id="rna-sequence">
- <h3>RNA Sequence</h3>
+ <h3 class="load-local"
+ title="<strong>RNA</strong> (<strong>R</strong>ibo<strong>N</strong>ucleic <strong>A</strong>cid)"
+ rel="#rna-explanation">RNA Sequence</a></h3>
+ <div class="tooltip" id="rna-explanation">
+ <ul>
+ <li>messenger RNA (mRNA) is a temporary copy of the gene
+ sequence in which protein is encoded.</li>
+ </ul>
+ </div>
<p>
<textarea id="rnaString" rows="10" cols="30"></textarea>
</p>
@@ -82,24 +111,12 @@
<span style="color: #00d;">DNA</span>
(DeoxyriboNucleic Acid)
</div>
- <ul>
- <li>a permanent copy of genetic information.</li>
- <li>uses “T” instead of “U”</li>
- <li>no 2' <code>OH</code> group</li>
- <li>more stable than RNA</li>
- <li>lower error frequency during replication than RNA
- </ul>
+
</td>
<td><!-- empty cell --></td>
<td style="text-align:center;">
<div class="nameAbbr">
- <span style="color: #d00;">RNA</span>
- (RiboNucleic Acid)
- </div>
- <ul>
- <li>messenger RNA (mRNA) is a temporary copy of the gene
- sequence in which protein is encoded.</li>
- </ul>
+
</td>
<td><!-- empty cell --></td>
<td>
dna_rna_amino.html
@@ -1,3 +1,7 @@
+h3 {
+ background-color: #eee;
+}
+
#info, .nameAbbr, .results, .buttons {
text-align: center;
}
style.css
@@ -12,6 +12,15 @@ function view_dna_conversion () {
$("#dna-sequence").addClass("invalid");
}
+function view_rna_conversion () {
+ var rna = getRNASequence();
+ displayDNASequence(reverseTranscribe(rna));
+ if (isSequenceCorrectLength(rna))
+ $("#rna-sequence").removeClass("invalid");
+ else
+ $("#rna-sequence").addClass("invalid");
+}
+
function view_amino_acids (results) {
$("#aminoAcids").empty();
for (var i = 0; i < results.length; i++) {
@@ -53,7 +62,10 @@ function insertAminoAcidTable () {
}
$(document).ready(function () {
- $("#dnaString").keyup(function (e) {
- view_dna_conversion();
- });
- });
+ $("#dnaString").keyup(function (e) { view_dna_conversion(); });
+ $("#rnaString").keyup(function (e) { view_rna_conversion(); });
+ $("h3.load-local").cluetip({ local: true, cursor: "pointer",
+ hideLocal: false, arrows: true,
+ attribute: "rel", sticky: true});
+ $("div.tooltip").hide();
+ });
views.js
54057f47f4bfa4c09ef7a2d96e9a21e62f8a8c66
unknown
omouse@gmail.com
http://github.com/omouse/dna-rna-amino/commit/b216398f23817cf217bf1662e1e4f2b0d3c7c82c
b216398f23817cf217bf1662e1e4f2b0d3c7c82c
2008-10-13T11:00:55-07:00
2008-10-13T11:00:55-07:00
Added the ClueTip jQuery plugin and made changes to the website to include it
dcd5e851ea916ed5bbe15b94314193daedc36bef
unknown
omouse@gmail.com