Text Selection Flickers

August 21, 2024 Post a Comment

How can I make text selection smooth for the where divs are laid out in the following format http://jsfiddle.net/SQ39f/2/. You can see that during selection process selection highl

Solution 1:

Here's what I've come up with:

HTML-

<div><divclass="tag"style="position:absolute;left:100.178px;top:10.523px;">FIRST</div><divclass="line"style="position:absolute;left:180.61px;top:10.523px;">LINE</div><div></div><divclass="tag"style="position:absolute;left:100.178px;top:30.523px;">SECOND</div><divstyle="position:absolute;left:160.61px;top:30.523px;display:none;" >&nbsp;&nbsp;&nbsp;&nbsp;</div><divclass="line"style="position:absolute;left:180.61px;top:30.523px;" >LINE</div></div>

CSS-

.tag {
    width:81px;
    height:18px;
}
.line {
    padding-right:100px;
    height:18px;
}

Setting height:18px; normalizes the selection height; setting width:81px bridges the gap between the left and right divs just enough so they touch, but do not overlap. The div full of non-breaking spaces is not needed, so I set its display to none. If you can, remove that element entirely.

Preventing selection of the second line from jumping to the first is done by adding a div between the first "LINE" div and the "SECOND" div. This acts as a spacer between the lines, so when the selection jumps to the previous div you don't see any graphical change.

padding-right:100px extends the div's box and allows you to drag your cursor further to the right of the text and still maintain selection of that line. I wouldn't advise setting it below 10px, otherwise you may get flickering on the last character of the first line when selecting the second line.

This method should work for any number of lines, so long as you repeat the classes correctly and add in the spacer div between each div.line and the following div.tag.

DEMO: http://jsfiddle.net/SQ39f/10/

Solution 2:

To expand on my comment about extending the divs to remove the gap, here's some css you could add to the page in your example.

Set the width of the divs to cover the gap between the left- and right-hand columns. I've zeroed the border, margin, and padding, and set the line height to make things look neat:

div { border: 0; margin: 0; padding: 0; line-height: 18px; }
divdiv { width: 81px; height: 18px; }

Fiddle: http://jsfiddle.net/SQ39f/18/

If you know what the text looks like in advance (e.g. if you've got a table of results), this is the easiest option.

If the lines are not uniformly laid out, you can use javascript to calculate the appropriate width for the divs -- iterate through the lefthand divs, subtract the 'left' position from that of the next sibling. This is fairly easily achieved with JQuery.

Solution 3:

You are going to have to replace the absolute positioning and reposition as relative. I did this using the following jQuery but it could be done in straight javascript if necessary.

$(document).ready(function() {
    $('div[style*="position"]').each(function() {
        var $this = $(this);
        if ($this.css('position') === 'absolute') {
            var offset = $this.offset();
            $this.css('position', 'relative');
            $this.offset(offset);
        }
    });
});

Working fiddle here: http://jsfiddle.net/k24p90jh/1/

Solution 4:

Try out this solustion JSFiddle Link

<table>
    <tr>
        <td>FIRST</td>
        <td>LINE</td>
    </tr>

    <tr>
        <td>SECOND</td>
        <td>LINE</td>
    </tr>
</table>

It renders/displays the same way, just different code, and fixed your highlighting problem.. tables act like regular div tags, just make sure that you have no border (border="0"). Hope this helped =)

Solution 5:

First of all you would need to get rid of position: absolute to improve selecting, anyway I guess that it isn't possible? In that case only solution that comes to my mind is creating white filling of ' ` between next part of text

Demo: http://jsfiddle.net/SQ39f/3/

JavaScript Apprenticeships