Team:UC Davis/LacI
From 2011.igem.org
(Difference between revisions)
Aheuckroth (Talk | contribs) m |
|||
Line 17: | Line 17: | ||
<div class="floatbox"> | <div class="floatbox"> | ||
<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> |
Revision as of 23:49, 20 September 2011
Start a Family
Got a favorite BioBrick? Check our our process for expanding basic parts into part families.Criteria
View our judging criteria for iGEM 2011 here.