"
Template:Team:UC Davis/MutantWidget
From 2011.igem.org
| Line 1: | Line 1: | ||
| - | |||
<script> | <script> | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
| Line 60: | Line 59: | ||
border-style:solid; | border-style:solid; | ||
border-radius: 5px; | border-radius: 5px; | ||
| - | |||
height: 400px; | height: 400px; | ||
} | } | ||
| Line 88: | Line 86: | ||
} | } | ||
</style> | </style> | ||
| - | |||
Revision as of 00:00, 21 September 2011
<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; 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>
