Words highlight on mouse over

Question

Do you know the most efficient way to highlight word and add onmouseover event?

I have text and I want to make somekind of word explanation field, so when user put his cursor on the word, I call AJAX to dictionary and show him meaning.

I have two ideas: 1) Before showing text, put each word to <span onmouseon="my_foo("word");"> wrapper. For example:

<span onmouseon="my_foo("Hello");">Hello</span>
<span onmouseon="my_foo("world");">world</span>

But I think this will seriously overload the page.

2) When user hold cursor for more than 0.5 sec in one area, I get pointer coordinates, calcuate what word is shown (I do not know if is possible) and do AJAX call.

What do you think is better, more easier to code?

Answer 1

First highlight the word under the cursor then show the meaning of it, check my fiddle: http://jsfiddle.net/shahe_masoyan/z7nkU/1/

HTML

    <div>
        <span>This text is a test text</span>
    </div>

JavaScript

$('div').each(function() {
    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});

$('div span').hover(
    function() { 
        $(this).css('background-color','#ffff66'); 
        alert(getTheMeaningOfTheWord($(this).html()));
    },
    function() { 
        $(this).css('background-color',''); 
    }
);

function getTheMeaningOfTheWord(word){

    return word+' = theMeaning';
}

Answer 2

I think 1 is simple and can be done this way:

Fiddle: http://jsfiddle.net/9d227/

HTML

<div id="yourDiv" style="Display: none;">your Text Here</div>
<div id="yourActualDiv"></div>

JQuery

var wordArray = $('#yourDiv').html().split(' ');
var totalString = "";
for(var i=0;i<wordArray.length;i++)
    totalString += "<span>" + wordArray[i] + " </span>";
$('#yourActualDiv').html(totalString);
var ConcurrenyFlag = 0;
$('#yourActualDiv span').mouseover(
    function()
    {
       if(ConcurrenyFlag == 0)
       {
           ConcurrenyFlag = 1;
           // Your code here.
           ConcurrenyFlag = 0;
       }
    }
)

This way, you only need to put your text in the yourDiv . The javascript code will handle the rest for you.
Hope this helps you.

The ConcurrenyFlag will help in reducing the load on client as only one code part will run at a time.

Answer 3

Something like this should do something close to what you're looking for.

$('.addWordDictionary').html('<span>'+$('.addWordDictionary').html().replace(/ {1,}/g, '</span> <span>')+'</span>');

But, as you said it may be client intensive especially if there is a lot of text.

Answer 4

You can use Lettering.js to solve this

http://letteringjs.com/

Simplified example:

http://jsfiddle.net/Zzxpx/

HTML:

<div class="w">"You will die of suffocation, in the icy cold of space"<div>

JS:

$(".w").lettering('words');

Answer 5

I've made this stuff : http://jsfiddle.net/wared/eAq9k/ . Requires a textarea and works by clicking instead of hovering. More details about getCaret() here : https://stackoverflow.com/a/263796/1636522 .

<textarea readonly>Lorem ipsum</textarea>

textarea {
    display: block;
    width: 100%;
    border: none;
    resize: none;
    outline: none;
    margin: .5em 0;
}

$(function () {
    var el = $('textarea'),
        text = el.text();
    el.click(function () {
        var i = getCaret(this),
            w = getWord(text, i);
        $('p').text(i + ' : "' + w + '"');
    });

    // https://stackoverflow.com/a/995374/1636522

    el[0].style.height = '1px';
    el[0].style.height = 25 + el[0].scrollHeight + 'px';
});

function getWord(s, i) {
    var r = /\s/g;
    while (i && !r.test(s[--i])) {}
    r.lastIndex = i && ++i;
    return s.slice(i, (
        r.exec(s) || { index: s.length }
    ).index);
}