Andy Hock

Email conversation

From	Andy Hock
To	Me
Subject	Is there a way to detect what word a mouse is hovering over? Or...
Date	18 August 2005 00:28

Hello Tarquin:

I can't find an answer to this javascript/css puzzle anywhere, and now have
a sizeable bald spot on the top of my head whilst scratching it.  Here's the
problem: 

I have a writers' site, for which I'm beginning to add some tools.  Say I
have a writer's page.  On it could be either a textarea control, or even
just a label control.  This control is filled with a chapter of the writer's
book.  I want to be able to *know*, the word or phrase the writer has
'selected' (by selected I mean, dragging the mouse, or using the
shift-and-arrow keys to select and highlight text), and/or just be able to
know what 'word' is under the mouse.  I can't find any information on this
anywhere.  I *know* I could create an <a> anchor around each and ever word
(if in a label.and by label I mean just words on the web page.no form or
anything), and then add an 'on rollover' command to each word, but that
seems awful unwieldy, and I hope this is not the only way to address the
issue.  I don't need (or would ever even ask or accept) you to write
this.just to parcel through that expert brain of yours, and see if there's a
way to accomplish this.

Let me explain a use for this, so you can understand if I haven't explained
this well, which is quite possible, since I'm a writer.  I've converted the
Princeton WordNet c files to .NET.  I would like to have a page, where an
author could see their chapter, and roll-over or whatever, and select words
or phrases on the page, and then I can 'ajax' those words to my server, and
create a div tooltip popup near the word in question, displaying either
synonyms, definition, hypernyms, antonyms, related words, etymology of the
word, etc..  I'm finishing the ajax part and tooltip now, but I'm stuck on
how to *grab* the selected text in order to pass it to my server, so I can
pass back the results (unless I use the kludge suggestion above.place each
word in a 'a anchor' link, which calls a javascript function which ajaxes
the result to the server).  You might be able to see it in action (depending
on how long before you get to see this email) on my writers' website:
[URL] .  It's very barebones
right now, and pretty much just holds the writers' group I'm in right now,
while I work on stuff.

Any hint, insight, even a toupee, and I'd place you in my genius
hall-of-fame, of which there is currently only one member.   ;-)   I'm
familiar with javascript, objects, cross-browser issues, style-sheets and
the like, but I'm no expert on the DOM.  Thanks for listening anyway.  You
do have an excellent site, which I've bookmarked, and am planning on adding
to my mindmade web site, which I won't get to until I get this daggum writer
site finished.

Andy Hock

From	Me
To	Andy Hock
Subject	Re: Is there a way to detect what word a mouse is hovering over? Or...
Date	18 August 2005 13:31

Andy,

Something like this should do what you need:

document.onmouseup = function () {
  var selectedText = '';
  if( window.getSelection ) {
    selectedText = window.getSelection();
  } else if( document.getSelection ) {
    selectedText = document.getSelection();
  } else if( document.selection ) {
    selectedText = document.selection.createRange().text;
  }
  if( !selectedText ) {
    //no selection
    return;
  }
  //do XMLHttpRequest stuff here
}

As for positioning your tooltip, that is a lot harder, since getSelection
does not provide any way to find the position of the selected text (and you
cannot always use the position of the mouse either, as they may move it off
the window, and you would have to account for scroll offsets, and window
bounds).

I suggest positioning the tooltip in the top right corner, or something like
that. I recommend position fixed - IE of course will throw an error because
it doesn't understand position fixed, so you can use position absolute if it
throws an error, and calculate a scrolling offset:

try {
  theToolTip.style.position = 'fixed';
  theToolTip.style.top = '0px';
  theToolTip.style.right = '0px';
} catch(e) { try {
  theToolTip.style.position = 'absolute';
  var de = document.documentElement;
  var db = document.body;
  theToolTip.style.top = ( ( de && de.scrollTop ) ? de.scrollTop : db.scrollTop ) + 'px';
  theToolTip.style.right = ( 0 - ( ( de && de.scrollLeft ) ? de.scrollLeft : db.scrollLeft ) ) + 'px';
} catch(e) {}


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

From	Andy Hock
To	Me
Subject	Re: Is there a way to detect what word a mouse is hovering over? Or...
Date	18 August 2005 18:56

Hey Tarquin:

Sir, thank you very much for your insights.  You hit the nail on the head
for me...and I have to say, offered way more than I asked for!  I'll make
sure to credit you on my site, and provide a link to your most excellent web
site.

Kind regards,
Andy Hock

From	Andy Hock
To	Me
Subject	Re: Is there a way to detect what word a mouse is hovering over? Or...
Date	27 August 2005 07:12
Attachment	script demo

Hi Tarquin:

I just thought of a solution to the mouse moving issue you brought up.  Why
can't I just AJAX of the mouse x,y to the server, and bring those values
back down?  That way, the tooltip would always show up where they had
selected the text, right?

Anyway, just wanted to thank you again.  No need to reply.  In fact, I have
a gift of sorts.  I've been working on a javascript multi-column, multi-page
way for writers on ewriters.org to view their stories (a chapter at a time).
I've zipped up a demo of it...but you should be aware, there are many
options.  For instance, you can set the height of the story columns by
percent, by fixed number of lines, or by using a fixed height (ie. Since the
page recalcs and lays out the columns on the page when one resizes the text,
and since the user can increase or decrease the font size, the height would
change as the font size changes, which is why I added the 'fixed height'
option.

Also, for width, one can select either a fixed width, a percentage, or the
full width of the table, which contains the story.  I've tossed in a 'fluff'
short story as an example.  You're free to use it or toss it, as you wish.
Just please don't go passing it to someone who has a site for writers,
unless they're an author of course.  I'm planning on implementing it for
DotNetNuke, which is the platform I use.

I do have one Mozilla/Firefox bug that I've spent the last day searching for
a workaround to no avail.  I'm *not* giving you this in hopes of an answer.
If you don't reply, or don't know the answer, no worries.  Perhaps you could
use this on your website for your most excellent articles.

The bug has to do with 'offsetWidth', when I set 'buseFullWidth = true;'.
The goal was to have a way of calculating the size of a table (I put an id
in the table I wanted to measure the width of) when resized.  With IE, all
works fine.  However, w/Mozilla/Firefox, it only works when I'm *increasing*
the size of the browser window.  Anytime I *decrease* the size of the
window, the oelement.offsetWidth stays at the maximum value it attained.  It
never decreases!  Say I resize the window so the width is 1000px.  Then I
resize the window so the width is less...in IE say, 800px.  The
oelement.offsetWidth (where oelement, BTW, is the table object) stays at
1000px in Mozilla/Firefox!  *Ack*.

If you decide to use this, be aware that if you wish to set 'buseFullWidth =
false', you must enter a 'width=n' where n is the same value as the
icolumnWidth var at the top of the .js file.  I plan on dynamically
outputting the javascript via RegisterClientScript in ASP.NET, so depending
on what values are set by an administrator of a website, I'll change the
table width values on the fly.  I don't know if you use straight html and
javascript though.

Anyway, the example is attached, and I assure you virus free.  I use
bitdefender, and, well, only a dork would send someone a virus!  If you are
aware of a workaround for this Mozilla/Firefox offsetWidth issue, I'd love
to hear it...otherwise, if you want to use what I did, please feel free.
Just unzip it to wherever and do a http://localhost/multpage.html from any
browser...everthing else is full-functional, so if you just turn off the
buseFullWidth and add some percent or fixed width to the table tag, it will
work in IE5.0+ (even the dreaded Mac IE 5.2.3), Mozilla 1.0+, and Firefox
1.00+.  

Kind regards,
Andy Hock

From	Me
To	Andy Hock
Subject	Re: Is there a way to detect what word a mouse is hovering over? Or...
Date	27 August 2005 21:08

Andy,

> can't I just AJAX of the mouse x,y to the server, and bring those values
> back down?  That way, the tooltip would always show up where they had
> selected the text, right?

in most cases, yes, you can use that. But where did they release the mouse
button? at the start of the text? at the end of it? and what if they release
at the start, and the selected text wraps to multiple lines? would the
tooltip simply appear over the text? and is that a bad thing?

Oh well, yes, in most cases it is fine :)

> In fact, I have
> a gift of sorts.  I've been working on a javascript multi-column, multi-page
> way for writers on ewriters.org to view their stories (a chapter at a time).

Well, nice idea, and I like the effect, but there are a few reasons why I
cannot include this script on my site;

* "var bisIE = document.all;" - I am afraid that this is complete nonsense.
Opera, iCab, and Konqueror all support document.all as well. In actual fact,
all DOM browsers (Mozilla included) should be able to use className.

* Your license agreement is a little incompatible with my own - such as
banning its use on certain (legal) sites. Any script featured on my site
must be available under my own license agreement, or a compatible one.

* "I have tested this for Firefox 1.x, Mozilla 1.x, Internet Explorer 5.0+,
and even the dreaded IE 5.2.3 for Mac. Not tested for Safari." - as an Opera
user, and advocate of cross-browser scripting, I find it unacceptable that
you do not test in Opera, although the good news is that it works in Opera
too. You know it is a free browser, and will work on your system...
http://www.opera.com/download/ - I also find it odd that you manage to test
in IE Mac, but not Safari (sounds like you are stuck on OS 9 or an early OS
X). It will probably work in iCab 3 too.

> Also, for width, one can select either a fixed width, a percentage, or the
> full width of the table

does it have to rely on tables? It is much better to not rely on tables for
structure, unless absolutely neccessary. Floated elements, positioned
elements, or elements with display;table or table-cell (in browsers that
support them) will have the same shrink-to-fit algorithm applied by tables.
maybe one of these will work just as well...

> I do have one Mozilla/Firefox bug that I've spent the last day searching for
> a workaround to no avail.

sounds like a bug I am familiar with, where a table cell is allowed to grow
but not shrink if it had a width attribute. Maybe there is something similar
to this that you have bumped into.

best thing is to report it to bugzilla:
https://bugzilla.mozilla.org/


Tarquin

From	Andy Hock
To	Me
Subject	Re: Is there a way to detect what word a mouse is hovering over? Or...
Date	28 August 2005 03:57

Hey Tarquin:

All good info.  Let me expand a bit.  First off, thanks for the advice on
the tooltip.  I think the tip will show up, in close enough spot for my
needs.

As to the isIE.  Hmm, didn't know that.  I have to admit, I take code from
old projects and paste it in.  Sometimes the result is I am behind the times
a bit.  I will change it.  I also found a couple of other bugs, and a
workaround for the mozilla/firefox offsetWidth (by using window.innerWidth
instead).

As to Konqueror and iCab, well, I've never known a writer to use it.  All
the reports for state that between IE, Mozilla, Firefox and Opera, this
covers more than 99% of the browsers out there, doesn't it?  Anyway, if and
when I post it on [URL], and someone complains, I'll deal w/it
then I guess.  As for Opera, thanks for letting me know.  I know it mimics
IE a lot.  And yer right; I need to download a copy and start testing for
it.  And for Safari...well, you have it exactly right.  ;-)   I have OS9, and
a laptop given to me by one of my film client friends.  The version of
Safari on it is ***old***.  I'll reinstall it, and check it, but it's not a
big priority for my users, unless I find out it is.  ;-)   Again, if someone
brings it up on the writers' site, I'll deal w/it then.

Now, as to the LPGL license.  I know.  It's a quandary for me.  I'd rather
not have done all this work, and then have a rival writers' site, take up my
work, not acknowledge it, and be forced to hire a lawyer for the first time
in my life.  I have *one* lawyer friend, who I always kid is an ambulance
chaser (he's not, but lawyers are easy marks).  Would it be too much to
state I'd like a link to my writers site if they use it?  And remove the
restriction to writers' sites?  Would that be acceptable?  It's just that I
wouldn't want a competitive site to use my work for free, and only
acknowledge it in the source code, since NO WRITER would ever bother
actually looking at the javascript source!  Let me know, if you don't mind,
what would be an acceptable alternative.  I'm open-minded about it.

And the reason it MUST rely on tables (actually it doesn't, and would be
easily changed to not do so), is that I use DotNetNuke, which is NOT 100% W3
compliant.  Ergo, if I tried to go tableless, numerous other 3rd party
modules who call themselves programmers but consider javascript, user
interface, and html 'toys' for children, don't bother focusing on outputting
compliant code.  Since I am planning on turning this into a DNN HTTPModule,
with a Settings page so an administrator can change all the settings to
their hearts content...I cannot go tableless in my specific case.  I'd like
to...believe me.  I *hate* table design.

And I did finally find the link late last night to report the bug.  There
are similar reports, but I didn't find one that specifically mentioned the
offsetWidth (irregardless of the ScrollWidth bug).  I was more interested in
a work around anyway, since even if and when they fix this, it would be
years before I could use the fix.

Anyway, please let me know what changes in the license would be acceptable
to you.  My only fear is having a competitive site use it, and not link back
to my writers' site.  I really don't *care* if they use it, I just wouldn't
want them to use it, and the benefit be all one-sided.  If you have a
solution, please let me know.  I'll fix the things you recommend, and resend
you a copy if you want.

Kind regards,
Andy Hock

From	Me
To	Andy Hock
Subject	Re: Is there a way to detect what word a mouse is hovering over? Or...
Date	28 August 2005 15:01

> As to Konqueror and iCab, well, I've never known a writer to use it.

That may be true, but this is part of the problem that I try to avoid. If we
restrict our viewers to _not_ using them, then they will not be able to use
them, so they will use something else which doesn't suit them. You look in
your logs, see that no-one is using them, and think everything is fine. I
wrote an article about this at one point:
http://www.howtocreate.co.uk/nostats.html

In the case of iCab, it is currently in beta (and has been for a _very_ long
time), and the authors of iCab actually prefer that we do not take special
account of it and add in workarounds to its bugs. They prefer that they are
given the chance to fix the bugs instead. I admire this approach.

The funny thing is that the CSS support of the three browsers that you are
not testing (iCab, Konqueror and Safari) is among the best available. These
are currently the only browsers capable of passing the Acid 2 test. Opera's
CSS support is better than these (it supports more CSS than any other
browser), but it still has a couple of minor bugs that prevent it passing
Acid 2:
http://www.webstandards.org/act/acid2/

Safari and Konqueror, although not hugely popular, are important browsers,
since they are the default browsers on Linux (+KDE) and Mac OS X
respectively. Many Linux users switch to Firefox because it has the "cool"
status, without them realising it actually supports some standards worse
than Konqueror does (CSS in particular).

> if and
> when I post it on [URL], and someone complains, I'll deal w/it
> then I guess.

good good :)

> As for Opera, thanks for letting me know.  I know it mimics
> IE a lot.

Well, only in some respects. Opera actually has one of the highest levels of
standards support of any browser, and in that respect, it is more like
Firefox, but yes, it does suport many IE extensions in the hopes that it can
use "IE only" pages as well. Firefox also supports document.all:
if(document.all['foo']) -> true
but hides that support when testing for it:
if(document.all) -> false

> I have OS9, and a laptop given to me

urgh :D you poor thing. I have never understood people's devotion to OS 9,
it feels so ugly and awkward to me.

> Would it be too much to
> state I'd like a link to my writers site if they use it?

My only problem is with the denying people to use it even if they use a
legal site. Apart from that, it is fine. I can make sure it works in the
other browsers. The linking and contacting is all acceptable.

> I *hate* table design.

I feel your pain ;)


Cheers

Tarquin

From	Andy Hock
To	Me
Subject	Re: Is there a way to detect what word a mouse is hovering over? Or...
Date	28 August 2005 18:36

Hey Targuin:

I've already made some changes per your suggestions, and need to make more,
now that I'm moving to DNN.  Some of the Booleans will become bitflags
(height and width ones).  I'll change the license to simply ask for a link,
and ask 'nicely' if they're a writers' site.   ;-)   As for the DNN
restriction, I realized the community would tear people apart that stole
work and called it their own, so that restriction is really just paranoia
and hence unnecessary.

You make a most excellent point on Konqueror, etc..  I'd used the exact
*same* argument to the DNN IE-manic folks, since their menu system did not
work for a long time w/IE or Safari on the Mac.  They claimed at first it
wasn't necessary, since 'nearly 100% of page stats' show IE-based browsers.
So I should follow my own medicine.  In fact, I just emailed a rant to
[URL].  I had noticed this site did not work for anything
but IE over eight months ago, and last night, well, I just couldn't takes no
more.  I had even offered to fix it for free, it bothered me so much.
Hopefully he'll figure it out himself.  I took a snapshot, and emailed it to
him.  Point is, I will download these browsers.  It's a bit like a
single-horse cavalry charge against the Persians, but 'one web site at a
time', I guess.

I'll email you the final version.  And thanks again for the help.  You will
get mention on my two sites.  That and a quid will get you a cuppa...

Andy H.

From	Andy Hock
To	Me
Subject	Re: Is there a way to detect what word a mouse is hovering over? Or...
Date	28 August 2005 19:41
Attachment	updated script

Hey Tarquin:

Ok, here's a copy close to final, with a more lenient license.  There is
still *one* vexing issue with Mozilla/Firefox that has to do w/the story
tools menu (change font, columns, etc.) at the top of the page.  When I
resize down, it completely ignores the window.innerWidth, though the page
manu at the bottom appears to not be daft and follows instructions.

I'll keep looking into that...just wanted you to have the latest.

Kind regards,
Andy H.

Andy Hock

Navigation

Search

Site navigation

Email conversation