In Firefox, can I figure out what is the random word in a div full of words that the mouse is running?
For example, if I have:
<div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur urna felis, convallis quis, placerat in, elementum quis, libero. Nam quis lacus. Vivamus rhoncus quam et metus. Praesent et velit eget sem vestibulum volutpat. Integer sed risus. Integer quis libero id diam bibendum luctus. Donec eleifend. Curabitur ut sem. Dominate est c sem rhoncus interdum. Etiam arcu nulla, molestie dictum, mollis sed, insdiet sit amet, neque. Fusce at nibh sit amet mi eleifend aliquam. Nunc tristique scelerisque risus. Praend et velit id magna volutpat volutpat. </div>
... and then it loads in the browser and I hover over various words, is there a sane way to determine which word is hovering? Any unreasonable way?
This should be heavy, but it works (jQuery):
// highlight every word found in a <p>
$("p").each(
function () {
var content = "";
var words = $(this).html().match(/\W*\w+/g) ;
var in_tag = false ;
for (i in words) {
if (words[i].match(/^\W*</)) {
in_tag = true ;
}
if (words[i].match(/^\W*>/)) {
in_tag = false ;
}
if (in_tag) {
content += words[i];
} else {
content += words[i].replace(/(\w+)/,'<span class="word">$1</span>');
}
}
$(this).html(content);
}
);
// example event
$(".word").mouseover(function() { $(this).css("background-color","#FF0") });
$(".word").mouseout(function() { $(this).css("background-color","") });
You can replace $ ("p") with $ ("# mydiv").
EDIT: I wrote that there are tags related to the error, but tags are not a problem here; the problem is that this code doesn't handle HTML entities. On the current page, for example, while processing & lt; div>, gt "and" lt "are converted like the words themselves, which is really wrong. Regexps should be a little more complicated to fix this error.
source to share
A foolish method involves calculating from the x, y coordinates of the mouse and then counting in the inner map of the paragraph. This will of course break when the next user uses a different font / size.
Have a look at these annoying intellitag tooltips that pop up when a keyword rolls over. You will notice that they are added after the page has loaded with javascript that reads every word and replaces important objects with the environment.
source to share