0

What I am trying to do is allow the user to scroll over any word on a web page and when the mouse goes over the word it is highlighted (I know I can use hover for that). However I do not know how to select individual words, from the paragraph. The ultimate goal is to allow the user to click on the word and a definition appears over the word, but I think I can figure that out once I can hover over individual words.

Brandon
  • 846
  • 2
  • 13
  • 29
  • 1
    --EVERY-- word on the page? Is the page big? I can see a slow DOM on the horizon. – Marko Aug 10 '10 at 00:28
  • no the page is relatively small, just a couple of paragraphs. I was just seeing if it was possible, so thanks dean for answering my question. And yes, I find the hover popup things very annoying as well. – Brandon Aug 10 '10 at 02:49

2 Answers2

2

There is no way in Javascript to do that, the smallest thing you can interact with, in general, is a DOM element. So you could technically wrap each word inside a <span>, but that would seem to be seriously overkill and probably have a huge performance impact as well.

Instead, what most sites do, that provide this functionality, is they do the hover popup thing whenever you select text (see this question for some code to get the current selection).

Personally, I find it really irritating (nytimes.com does it like that, for example), but maybe that's just me...

Community
  • 1
  • 1
Dean Harding
  • 67,567
  • 11
  • 132
  • 174
  • 2
    Yes, this would probably be the best way to do it. Another resource is the NYTimes's script which luckily isn't minified or obfuscated: http://graphics8.nytimes.com/js/common/screen/altClickToSearch.js – Cristian Sanchez Aug 10 '10 at 00:39
1

If you want something similar to what the NYtimes provides, I suggest that you use the Select Link plugin in JQuery, which provides a search for any word that is selected in your text. Confer this link.

Konrad Viltersten
  • 28,018
  • 52
  • 196
  • 347