How can I dynamically position a DIV at specific characters within a long DNA sequence displayed as a single line on a webpage, using a mono-width font and JavaScript? I want the solution to be able to adjust to changes in font size made by the user.
Here is an example that illustrates the scenario: http://jsfiddle.net/kQLqV/. The goal is to position a blue box over certain characters, for example, the 10th to 20th letters. I am looking for a way to achieve this dynamically in JavaScript to allow for flexibility in moving the box to different locations within the sequence. While I considered wrapping each letter in a span, the potential overhead of doing this for around 1000 characters seems excessive for what should be a simple task.
<style>
.sequence {
font-family: Courier;
font-size:12px;
width: 70%;
overflow: hidden;
float: left;
position: relative;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<body>
<div id="my_seq" class="sequence">CAGCATCAGCATACGACTACGACGACTCAGCGACTACAGCATACGACGGGSCAAGGTACTGATCATAAATGCATAGACGATAAGACATAGAACGATAAGAGATTACGA...</div>
<script>
$("#my_seq").append("<div style='position:absolute; min-height: 100%; background-color:rgba(30,144,255,0.3); top:0; left:20px; width: 200px;'> </div>");
</script>
</body>