Highlight lines of text on mouseover

Question

I'm currently working on a website which will feature a bunch of stories for people to read (basically a blog). I want to make them as easy to read as possible and I figured it would be useful to 'highlight' lines of text with the cursor. Kinda like following the lines of text with your finger when reading a book.

I stumbled upon this answer, however I can't seem to get it to work for my page. It's also a pretty old answer so maybe there's an improved version of this?

If anyone could help me out I'd be forever grateful!

The example there on jsbin looks pretty efficient. Can you post your code so we can see why its not working? — PJH, Aug 16 '12 at 20:15
UPDATE: Added it. It's supposed to only be for the articles on the left of the site (so not the slider). http://www.s-hosting.nl/creepypastaindex/ — Swen, Aug 16 '12 at 20:18

Tom · Accepted Answer · 2014-10-24T14:58:53.720

3

Wrote some jQuery code that, atleast to me, both looks and works better than the code in the post that you are referring to. Hope it fits your needs :)

There's also a live demo up at http://jsfiddle.net/gFTrS/2/

HTML

<div class="textWrapper">
    <div class="highlight"></div>
    <p>Your text goes here</p>
</div>

CSS

.textWrapper
{
    position: relative;
    width: 600px;
    padding: 0px 10px;
    margin: 0 auto;
    cursor: default;
}

.textWrapper p
{
    font: normal 12px Arial;
    color: #000000;
    line-height: 18px;
    padding: 0;
    margin: 0;
}

.highlight
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 18px;
    background: yellow;
    z-index: -1;
    display: none;
}

jQuery

$(document).ready(function()
{
    var lineHeight = 18;

    $('.textWrapper').hover(function()
    {
        $('.highlight', this).show();

        $(this).mousemove(function(e)
        {
            var relativePos = e.pageY - this.offsetTop;
            var textRow = (Math.ceil(relativePos / lineHeight) * lineHeight) - lineHeight;
            if (textRow => 0)
            {
                $('.highlight', this).css('top', textRow + 'px');
            }
        });
    }, function()
    {
        $('.highlight', this).hide();
    });
});

edited Oct 24 '14 at 14:58

answered Aug 16 '12 at 20:39

Tom

3,450
22
31

I'll try this and report back if it worked – Swen Aug 16 '12 at 20:41
1

There you go! This is what I meant (not tested). Fast scripting! – Martin van Dam Aug 16 '12 at 20:42
Ok I tried to add this just now but it doesn't seem to work (I most likely did something wrong) You can see it here: http://www.s-hosting.nl/creepypastaindex/ (the bottom left post) – Swen Aug 16 '12 at 20:44
I have to go now but I'll come back for this later. Thanks a bunch in advance! – Swen Aug 16 '12 at 20:46
@Swen - It's because you haven't included the script properly. You can't put it in a separate file and just included it like that. Put it straight in your index file and you'll see that it'll work :) – Tom Aug 16 '12 at 21:37
@Swen - Just updated the code a little, so please use the new version instead. Also updated my live demo to give a better presentation :) – Tom Aug 16 '12 at 21:57
@Swen - You're welcome :) and btw, checked your site. Looks good, but you should make sure that the textWrapper div is the same height as the content, and not bigger.. right now it's 1 row from the top til the content starts and then it's a couple of rows down from where the content ends til where the wrapper div ends – Tom Aug 17 '12 at 12:24
@Tom I set my line-height to a little bigger so the highlight would come out better. I fixed it now ;) Thanks for all your help! – Swen Aug 17 '12 at 14:54
@Tom Hey Tom. I stumbled upon your answer from a Google search and noticed there was a funky character at the end of the last `});` which would cause the script to fail and I've made an edit to that effect. The hidden character was `` - See this Q&A on Stack about it http://stackoverflow.com/q/2973698/ - Probably why the OP said it didn't work at first. – Funk Forty Niner Oct 24 '14 at 13:39
@Fred-ii- Couldn't spot anything but rewrote it just in-case. – Tom Oct 24 '14 at 15:00
@Tom I already replaced it in an edit lol - but your edit doesn't contain it, so we're all good. You wouldn't have been able to see it anyway, as was I was unable to, but it did appear as a `square` in Notepad and in Notepad++. That "hidden" character doesn't show up in Stack's editor, *strangely enough*. Not many know that, and I always make it a point to paste OP's full code in an editor just to be 100% sure. – Funk Forty Niner Oct 24 '14 at 15:03
1

@Fred-ii- Ah, didn't see that ^^ – Tom Oct 24 '14 at 15:53
@Tom Have a look at your initial answer in your edit history http://stackoverflow.com/revisions/11995086/1, copy the entire last line `});` right to the end, then paste it in either Notepad or Notepad++ and you'll see that funky *hidden* character. – Funk Forty Niner Oct 24 '14 at 15:59
1

@Fred-ii- Doesn't show up in Notepad, but it shows up in "Search Google for..." when I right-click it – Tom Oct 24 '14 at 16:05
Note that this solution is practical but it fails when you have different font sizes. – Aaron Digulla Oct 27 '14 at 11:43

score 0 · Answer 2 · answered Aug 16 '12 at 20:35

Most of the answers and suggestions in the older post on SO you reffered to try to manipulate the DOM by adding spans or divs for each line. But that's actually not a waterproof approach since it is not cross- browser compatble, especially not with mobile browsers. You should use a dynamically jquery controlled div that jumps behind the lines. The div should be dynamically be positioned with a jquery function triggered on mousemove calculating the div jumping on line-height depending on mouse cursor position

Highlight lines of text on mouseover

2 Answers2

Linked