"

From 2011.igem.org

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

1. mw_grapharea {

right:0px; z-index: -1; }

1. mw_selectmenu {

border-width:2px; border-style:solid; border-radius: 3px; left:0px; margin: 4px; display:inline-block; }

1. mw_sequencearea {

font-family: monospace; clear:both; }

1. mutantwidget {

position:relative; border-width:3px; border-style:solid; border-radius: 5px; width: 700px; height: 400px; }

1. mutantwidget td{

background: #eee; padding: 5px; cursor:pointer; border: 2px; }

1. mutantwidget td.selement{

background: #fa0; }

1. mutantwidget .sequence {

display:block; }

1. grapharea {

width: 700px; height: 300px; border-width:3px; border-style:solid; border-radius: 5px; marin-top: 10px; } </style>