How To Get The Character Index And Character In Given String Using Mouse Hover In Jquery

I am using the following code.

This is a simple example

And java script code is following: $('div

Solution 1:

You can use the lettering.js plugin (https://raw.github.com/davatron5000/Lettering.js/master/jquery.lettering.js), which wraps letters (or words or lines) in span elements.

This way you can easily target them and use .position() on those elements to get their actual location in their container (which should have position:relative)..

Demo at: http://jsfiddle.net/rT3zn/2/

HTML:

<strong>by word</strong>
<div class="mycooldiv words">bunch of text is in here and for example some # and some other cool #</div>

<strong>by letters</strong>
<div class="mycooldiv letters">bunch of text is in here and for example some # and some other cool #</div>

<div id="position"></div>

JS:

var $pos = $('#position');

$('.mycooldiv.words')
    .lettering('words')
    .delegate('span', 'mouseover', function(e){
        var self = $(this);
        var position = self.position();

        self.addClass('active');
        $pos.text('x:' + position.left+ ', y:' + position.top + ', content: ' + self.text())
    })
    .delegate('span', 'mouseout',  function(e){
        var self = $(this);
        self.removeClass('active');
    });


$('.mycooldiv.letters')
    .lettering()
    .delegate('span', 'mouseover', function(e){
        var self = $(this);
        var position = self.position();

        self.addClass('active');
        $pos.text('x:' + position.left+ ', y:' + position.top + ', content: ' + self.text())
    })
    .delegate('span', 'mouseout',  function(e){
        var self = $(this);
        self.removeClass('active');
    })