|
|
Line 18: |
Line 18: |
| <h1>LacI</h1> | | <h1>LacI</h1> |
| | | |
- | <script>
| |
- | $(document).ready(function(){
| |
- | //Convert the ul to a table for some reason.
| |
- | $('#mutantwidget').wrapInner('<table/>').wrapInner('<div id="mw_selectmenu"/>');
| |
- | $('#mutantwidget h3').wrapInner('<td/>').children().unwrap().wrap('<tr/>');
| |
- | $('#mutantwidget').prepend('<div id="mw_grapharea"/>');
| |
- | $('#mutantwidget').append('<div id="mw_sequencearea"/>');
| |
- | $('#mutantwidget .sequence').hide().appendTo($('#mutantwidget #mw_sequencearea'));
| |
- | $('#mutantwidget td').toggle(
| |
- | function() {
| |
- | $(this).addClass("selement");
| |
- | $('#mw_sequencearea').children().eq($(this).parent().index()).show();
| |
- | },
| |
- | function() {
| |
- | $(this).removeClass("selement");
| |
- | $('#mw_sequencearea').children().eq($(this).parent().index()).hide();
| |
- | }
| |
- | );
| |
- | $('#mutantwidget #mw_grapharea').html('<img src="plot_linear.png" style="width:100%; height:100%; position:absolute; left:0px;z-index:-1"/>');
| |
- | //Split sequences
| |
- | $('#mutantwidget .sequence').each(
| |
- | function(index) {
| |
- | var curloc = 0;
| |
- | var curseq = $(this).text();
| |
- | $(this).html('');
| |
- | while(curloc < curseq.length)
| |
- | {
| |
- | oldloc = curloc;
| |
- | $(this).append(curseq.substr(oldloc, 10)).append(" ");
| |
- | curloc += 10;
| |
- | }
| |
- | }
| |
- | );
| |
- |
| |
- | });
| |
- | </script>
| |
- |
| |
- | <style>
| |
- | #mw_grapharea {
| |
- | right:0px;
| |
- | z-index: -1;
| |
- | }
| |
- | #mw_selectmenu {
| |
- | border-width:2px;
| |
- | border-style:solid;
| |
- | border-radius: 3px;
| |
- | left:0px;
| |
- | margin: 4px;
| |
- | display:inline-block;
| |
- | }
| |
- | #mw_sequencearea {
| |
- | font-family: monospace;
| |
- | clear:both;
| |
- | }
| |
- |
| |
- | #mutantwidget {
| |
- | position:relative;
| |
- | border-width:3px;
| |
- | border-style:solid;
| |
- | border-radius: 5px;
| |
- | width: 700px;
| |
- | height: 400px;
| |
- | }
| |
- |
| |
- | #mutantwidget td{
| |
- | background: #eee;
| |
- | padding: 5px;
| |
- | cursor:pointer;
| |
- | border: 2px;
| |
- | }
| |
- |
| |
- | #mutantwidget td.selement{
| |
- | background: #fa0;
| |
- | }
| |
- |
| |
- | #mutantwidget .sequence {
| |
- | display:block;
| |
- | }
| |
- |
| |
- | #grapharea {
| |
- | width: 700px;
| |
- | height: 300px;
| |
- | border-width:3px;
| |
- | border-style:solid;
| |
- | border-radius: 5px;
| |
- | marin-top: 10px;
| |
- | }
| |
- | </style>
| |
- |
| |
- | </head>
| |
- | <body>
| |
- | <div id="floatbox mutantwidget">
| |
- | <h3>Wildtype</h3>
| |
- | <span class="sequence">caatacgcaaaccgcctctccccgcgcgttggccgattcattaatgcagctggcacgacaggtttcccgactggaaagcgggcagtgagcgcaacgcaattaatgtgagttagctcactcattaggcaccccaggctttacactttatgcttccggctcgtatgttgtgtggaattgtgagcggataacaatttcacaca</span>
| |
- | <h3>K611021</h3>
| |
- | <span class="sequence">caatacgcaaaccgcctctccccgcgcgttggccgattcattaatgcagctggcacgacaggtttcccgactggaaagcgggcagtgagcgcaacgcaattaatgtgagttagctcactcattaggcaccccaggctttacactttatgcttccggctcgtatgttgtgtggaattgtgagcggataacaatttcacaca</span>
| |
- | <h3>K611022</h3>
| |
- | <span class="sequence">caatacgcaaaccgcctctccccgcgcgttggccgattcattaatgcagctggcacgacaggtttcccgactggaaagcgggcagtgagcgcaacgcaattattgtgagttagctcactcattaggcaccccaggctttacactttatgcttccggctcgtatgttgtgtggaattgtgagcggataacaatttcacgca</span>
| |
- | <h3>K611023</h3>
| |
- | <span class="sequence">caatacgcaaaccgcctctccccgcgcgttggccgattcattaatgcagctggcacgacaggtttcccgactggaaagcgggcagtgagcgcaacgcaattaaagtgagttagctcactcattaggcaccccaggctttacactttaagcttccggctcgtatgttgtgtggaattgtgagcggataacaatttcacaca</span>
| |
- | <h3>K611024</h3>
| |
- | <span class="sequence">caatacgcaaaccgcctctccccgcgcgttggccgattcattaatgcagctggcacgacaggtttcccgactggaaagcgggcagtgcgcgcaacgcaactaatgtgagttagctcactcattaggcaccccaggctttacactttatgcttccggctcgtatgttgtgtggaattgtgagcggataacaatttcacgca</span>
| |
- | <h3>K611025</h3>
| |
- | <span class="sequence">caatacgcaaaccgcctctccccgcgcgtcggccgattcattaatgcagctggcacgacaggtttcccgactggaaagcgggcagtgagcgcaacgcaattaatgtgagttagctccctcatcaggcaccccaggctttacactttatgcttccggctcgtatgttgtgtggaattgtgagcggataacaatttcacaca</span>
| |
- | <h3>K611026</h3>
| |
- | <span class="sequence">caatacgcaaaccgcctctccccgcgcgttggccgattcattaatgcagctggcacgacaggtttcccgactggaaagcgggcagtgagcgcaacgcaattaatgtgagttagctcactcattaggcaccccaggctctacactttatgcttccggcttgtatgttgtgtggaattgtgagcggataacaatttcacaca</span>
| |
- | <h3>K611027</h3>
| |
- | <span class="sequence">caatacgcaaaccgcctctccccgcgcgttggccgattcattagtgcagctggcacgacaggtttcccgactggaaagcgggcagtgagcgcaacgcaattaatgtgagttagctcactcattaggcaccccaggctttacactttatgcttccggctcgtatgtagtgtggaattgtgagcggatatcaatttcacaca</span>
| |
- |
| |
- |
| |
- | </div>
| |
| <div class="floatbox2"> | | <div class="floatbox2"> |
| <h2>3D model</h2> | | <h2>3D model</h2> |