How can I highlight the line of text that is closest to the mouse?

by

Not sure if jQuery will help you out much here, but you could take a look at the element.getClientRects method, documented on MSDN and MDC. More specifically, this example at MSDN is sort of similar to what you want to achieve, highlighting lines using a cleverly z-indexed div element that goes behind the text at the co-ordinates returned by getClientRects().

You should be able to achieve the same thing by looping through the TextRectangle objects returned in the document’s onmousemove and checking to see if the y value of the mouse cursor is > the top and < the bottom of each rectangle and moving the cleverly z-indexed div to the same position/height.

All the current major browsers support getClientRects().

http://jsbin.com/avuku/15

UPDATED – working in Chrome, IE6/7/8, Firefox, Opera, Safari. The initial problems I had in the other browsers were related to the DIV needing to be display: inline.
UPDATED AGAIN – I had to refer to this answer for some newer questions, so I took the time to update it to recalc the lines on window resize. It looks like others have been playing around too, it’s now on revision 15.

More Related Contents:

  1. Draw a connecting line between two elements [closed]
  2. How to read text file in JavaScript
  3. Finding line-wraps
  4. Full text search in HTML ignoring tags / &
  5. TinyMCE Paste As Plain Text
  6. JavaScript Scale Text to Fit in Fixed Div
  7. HTML5 canvas ctx.fillText won’t do line breaks?
  8. Text wrap in a element
  9. Getting selected text position
  10. Convert Text to Image using javascript [closed]
  11. Finding number of lines in an html textarea
  12. Is there a flexible way to modify the contents of an editable element?
  13. Extract the text out of HTML string using JavaScript
  14. Measuring text width/height without rendering
  15. Canvas text rendering (blurry)
  16. How to export source content within div to text/html file
  17. How can I select an element by name with jQuery?
  18. jQuery disable/enable submit button
  19. Resize HTML5 canvas to fit window
  20. Why split the tag when writing it with document.write()?
  21. How to resolve the C:\fakepath?
  22. Convert binary data to base64 with javascript
  23. How do I disable the save password bubble in chrome using Javascript?
  24. How to prevent html/JavaScript code modification
  25. Multiple read more / read less sections are not working on a page
  26. Drawing lines on html page
  27. Sending mail from HTML page with image in the body
  28. How to use pagination on HTML tables?
  29. Pass element ID to Javascript function
  30. How can I reorder elements with JavaScript?

Leave a Comment