|
|
| 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> |
"
