Howd they do this???

**-SeFu-** · May 10, 2001, 00:16

go to this page
http://www.emedicine.com/emerg/topic470.htm

now highlight a word in one of the paragraphs and watch what happens...

Can someone explain how this is done to me?

thanks!

**AlexW** · May 10, 2001, 00:40

It's awesome.

It has to be a service that Merrian Webster are marketing. Very clever. I'm going to research it a bit. Could be quite useful for SitePoint.

You seem to just add this script to your page 'http://www.emedicine.com/medlook.js' and that selects and sends the text to a CGI script at M-W, which sends back the result.

Nice.

**freakysid** · May 10, 2001, 02:11

Well, I know little about JavaScript but this is awesome. But I can't for the life of me work out where the selection event is handled. I can see that function display(e) is the driving function that makes everything happen - so this is the function that would need to be triggered by an event handler. But where is the event being handled. Wow!?!

**lynlimz** · May 10, 2001, 02:24

Amazing indeed! WOW

**freakysid** · May 10, 2001, 04:55

It might help if this thread was moved to the Client Side Scripting forum

**shane** · May 10, 2001, 06:20

But where is the event being handled.

Right at the bottom of the page they're pulling in another js file that contains the event handler, which calls the display function on the event onmouseup.

Pretty cool stuff.

**freakysid** · May 10, 2001, 07:09

This code is copied for fair use for the purpose of critique:

Code:

// Trigger.js 2.0
if (window.Event)
   document.captureEvents(Event.MOUSEUP);
document.onmouseup = display;

Why did they put the event handling code at the bottom of the body of the page? Is that simply so that the onmouseup | MOUSUP event doesn't get handled before the page has fully loaded?

**TheOriginalH** · May 10, 2001, 07:11

Pile of pooh !

Didn't work in Opera

H

**lynlimz** · May 10, 2001, 08:16

Originally posted by freakysid
MOUSUP event doesn't get handled before the page has fully loaded?

Make sense freakysid. or it could be at the bottom so the entire page contents will work with the script?

**Hierophant** · May 10, 2001, 10:03

If they put the event at the top of the page, and you did click your mouse, the OS would fire the event. Even if Javascript doesn't handle it yet, the event will be there and could cause errors in bad implementations of the Javascript specification.

**-SeFu-** · May 10, 2001, 10:26

well its awesome as hell...

And NBCi.com thought they were revolutionizing the internet hah!

this page hasnt been edited since 2000/09/08 ROFL

that means this whole "any word, click it, get instant information" has been out long before NBCi "invented" it

Another funny thing is that the page doesnt even tell you about this dictionary program... I just happened to highlight something to copy and paste it into a search engine heh

**Scot-Bot** · May 10, 2001, 12:27

I'm trusting every1 here is using (Opera-fiends apart) IE5+, since I reckon this will only work in W3C-DOM browsers such as IE5+ or NS6+. Certainly, highlighting a piece of text uses (i believe, though somebody might want to correct me on this) the text-range method, which is unavailable to Navigator users and most likely IE4 users too. (Opera users can go jump, since Opera (despite what Opera may say) has poor JS support.) Nonetheless, the website is awesome.

If any1 wants to learn how to do this sort of thing, then go to msdn.microsoft.com/webworkshop

**AlexW** · May 10, 2001, 17:11

Seems to work fine in NS6.

Great thing is users with browsers that aren't supported, just get what they always got, nothing less.

**qslack** · May 10, 2001, 17:49

Hey, what does this do exactly? When I select a word or two, it says in the status bar "You have selected a large amount of text. This text is copyrighted by eMedicine, Inc." and then freezes my IE. I'm using IE 5.01 on Win2k.

**AlexW** · May 10, 2001, 18:07

I'm using IE5 on win98.

When you high-light or double-click a word in the body of text it automatically pops up a window that gives an explanation and pronunciation of the term from the merrian-webster site.

**freakysid** · May 10, 2001, 18:10

Originally posted by Scot-Bot
I'm trusting every1 here is using (Opera-fiends apart) IE5+, since I reckon this will only work in W3C-DOM browsers such as IE5+ or NS6+. Certainly, highlighting a piece of text uses (i believe, though somebody might want to correct me on this) the text-range method, which is unavailable to Navigator users and most likely IE4 users too. (Opera users can go jump, since Opera (despite what Opera may say) has poor JS support.) Nonetheless, the website is awesome.

If any1 wants to learn how to do this sort of thing, then go to msdn.microsoft.com/webworkshop

I believe you may be mistaken. It works fine on NN 4.08 (NS4.7) for Mac. Because I don't know much about JavaScript and event handling I read this last night when I was pondering over the code.

http://developer.netscape.com/docs/t...enthandler.htm

As you can see from the code I cut-and-pasted from the site in my last post, the event being handled is the onMouseUp event.

From reading over the two javascript files used in that page the gist of the logic appears to be this:

When a onMouseUp event is triggered call function display()

Function display() uses getSelection method (from memory - or something similar - like I said I'm not very well versed with JavaScript) to return the currently selected text in the document. It then uses a couple of utility functions to trim the selection string. If the string is empty the function exits. If the string is a hyperlink it allows the hyperlink event to occur. Otherwise another function popup() is called and passed the string. popup() creates a popup window and calls a url which includes the string. The resulting document is generated from a CGI which is essentially a dictionary and reference for the search string.

That's mumbled off the top of my head from my memory of looking over the code last night.

BC · May 10, 2001, 18:38

Event handlers are reasonably well implemented in version 4 browsers (particularly mouse-up/down)..... You may get sketchy results in NN4 but I know for a fact that it should be right in IE4.

Very, very cool technique.....

**Scot-Bot** · May 11, 2001, 05:23

I just checked out getSelection() and it appears to be Netscape only.

There must have been another IE method that achieves the same thing, so does any1 know what it is?

**Percipient** · May 11, 2001, 11:52

Originally posted by qslack
Hey, what does this do exactly? When I select a word or two, it says in the status bar "You have selected a large amount of text. This text is copyrighted by eMedicine, Inc." and then freezes my IE. I'm using IE 5.01 on Win2k.

Don't select a large amount of text. It's in the script for someone to get the message you got if more than 40 chars are selected. Just select a word of phrase, like a medical term.

**freakysid** · May 13, 2001, 11:05

Scot-bot, have you looked at the code?

The code below is from http://www.emedicine.com/medlook.js and is shown here for fair use for the purpose of review and critique:

Code:

function display(e) {

if (document.getSelection) {
var str = document.getSelection();
} else if (document.selection && document.selection.createRange) {
var range = document.selection.createRange();
var str = range.text;
} else {
var str = "";
alert("Sorry, Medical Dictionary Lookup is not possible with your browser. Please upgrade to Netscape's or Microsoft's latest browser.");
return;
}

I also found some information about this topic here http://www.webreference.com/js/colum...ssbrowser.html

**lynlimz** · May 13, 2001, 18:59

thanks for the link freakysid...i guess you did alot of research into this?

**Scot-Bot** · May 14, 2001, 01:11

Thx, Freaky, I thought the MS way might have had something to do with text-ranges.

The SitePoint Forums have moved.

User Tag List

Thread: Howd they do this???

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions