MozillaZine

Creating Links with Mozilla's window.getSelection() Method

Friday October 25th, 2002

Kenneth Dillon writes: "This morning, IBM developerWorks published a tutorial detailing how Mozilla's cutting-edge ECMAScript and W3C DOM support and its nonstandard, but incredibly useful window.getSelection() method can be put to work to allow users to create links to virtually any piece of text within an HTML document."

Note that you must have a developerWorks profile to access this tutorial. You can create a free profile at the registration page.


#1 Cool

by WillyWonka

Friday October 25th, 2002 8:07 AM

Reply to this message

Now that's kind of cool. Sites pointing to your page can hilight words similar to the way the google search bar hilights search terms in a page.

#2 Alt download site

by pinder

Friday October 25th, 2002 11:20 AM

Reply to this message

you can also access the code in this tutorial without registering at the Ahoy main site: <http://dev.lophty.com/ahoy/index.htm>

#3 Non-standard?

by Racer

Friday October 25th, 2002 11:31 AM

Reply to this message

"its nonstandard, but incredibly useful window.getSelection() method" Does this mean that this is a Mozilla-only feature? If so, is this an attempt to get a non-standard feature standardized or perhaps make IE implement it?

If its neither of these, it sounds like Moz is trying to do the same thing IE did...push non-standardizations and thus make its browser the only one that works as desired on specific sites. I guess since IE did it, its ok for Moz to do it too?

#4 Re: Non-standard?

by bzbarsky

Friday October 25th, 2002 11:43 AM

Reply to this message

Excuse me? Where do you see Mozilla pushing anything? We don't even _document_ getSelection() properly, for crying out loud. It's there because it was needed internally and there was no good way to make web pages not see it. But we certainly are not pushing it.

#5 Re: Non-standard?

by WillyWonka

Friday October 25th, 2002 11:52 AM

Reply to this message

It probably is a mozilla only feature. I believe get selection was added because the browser needed it for such features as "Web search for 'selected text'" and View Selected Source. All it does is return what text is currently selected.

Mozilla isn't pushing for people to use it. This code is by IBM. They also have .innerHTML which isn't defined anywhere else except in IE.

#9 Re: Non-standard?

by Dracos

Friday October 25th, 2002 8:43 PM

Reply to this message

I wouldn't call it non-standard. It has more to do with Mozilla being an application platform than *just* being a web browser.

#16 Re: Non-standard?

by masi

Monday October 28th, 2002 1:16 AM

Reply to this message

Being standard-compliant does not mean not having alternative/extended APIs.

#6 Translation Please

by minh

Friday October 25th, 2002 4:45 PM

Reply to this message

"Mozilla's cutting-edge ECMAScript and W3C DOM support and its nonstandard, but incredibly useful window.getSelection() method can be put to work to allow users to create links to virtually any piece of text within an HTML document."

Can some explain this in English for the non-coder. What is window.getSelction()? And what relevance does it has on anything noteworthy? Is it like the FIND in document feature?

#7 Re: Translation Please

by bzbarsky

Friday October 25th, 2002 4:58 PM

Reply to this message

It's a method that you can call on the window. It returns a string holding whatever text is currently selected.

#8 About window.getSelection()

by monokrom <brian@monokromatik.com>

Friday October 25th, 2002 6:03 PM

Reply to this message

First : wow - a MozillaZine thread about the tutorial! Cool!

Second : window.getSelection() does not simply return the string of the selection. In fact, it returns a Selection object with its own methods and properties. Jeffrey M. Yates <a href="<http://www.pbwizard.com/A…e_Object_Article.htm#hd20>">documented Mozilla's window.getSelection() and Selection objects</a> in March 2001 in his article <a href="<http://www.pbwizard.com/A…_Range_Object_Article.htm>">"Using the W3C DOM Level 2 Range Object as Implemented by Mozilla"</a>.

#10 Why don't we add a simple example here?

by bugs4hj <bugs4hj@netscape.net>

Saturday October 26th, 2002 12:06 AM

Reply to this message

javascript:id=window.getSelection();if(!id){void(id=prompt('Select some text or enter it below.'))}if(id){document.location='<http://www.dictionary.com/search?q='+escape(id>)}

#11 Re: Why don't we add a simple example here?

by bugs4hj <bugs4hj@netscape.net>

Saturday October 26th, 2002 12:17 AM

Reply to this message

Hm, that was not suppost to happen (:

1) Drag that link to the personal toolbar and drop it there

2) copy this snap

javascript:id=window.getSelection();if(!id){void(id=prompt('Select some text or enter it

3) right-click on that bookmark and select 'Properties'

4) past it over '<http://mozillazine.org/>' in the location text field

5) click Ok (you might also want to rename it to Dictionary.com)

Ok how does it work? 1) select some text on a webpage 2) click on that bookmark note: it should open a webpage on Dictionary.com

#12 Re: Re: Why don't we add a simple example here?

by oddshape

Saturday October 26th, 2002 8:47 AM

Reply to this message

Excellent! Took me a couple of thinks to grok what you meant, but it works! Really cool and extensible too! Made one for the thesaurus site easily enough. Thanks again!

#13 make sure to use document.getSelection();

by bugs4hj <bugs4hj@netscape.net>

Saturday October 26th, 2002 12:16 PM

Reply to this message

Let me see if this works:

javascript:id=document.getSelection();if(!id){void(id=prompt('Select some text or enter it below.'))}if(id){document.location='h t t p://w w w.dictionary.c o m/search?q='+escape(id)}

But remove the extra spaces!

#14 A not so simple example.

by ipottinger

Saturday October 26th, 2002 3:31 PM

Reply to this message

The following bookmark is a modification of Jesse Ruderman's "highlight" bookmarket found at <http://www.squarefree.com…s/pagedata.html#highlight> . Copy and paste it to a new bookmark and specify a keyword. (I suggest keyword "highlight" with no quotes)

It can be activated in 4 ways:

1) enter the keyword alone ("highlight") into the url bar. It will prompt you for a word in the current page to highlight.

2) enter the keyword followed by phrase ("highlight simple example") into the url bar.

3) select this bookmark from the bookmark menu/personal toolbar/sidebar. It will prompt you for a word in the current page to highlight.

4) highlight some text on the current page and select this bookmark from the bookmark menu/personal toolbar/sidebar.

---begin cut below ---

javascript:(function(){var count=0, text, dv;text="%s";alert("text >"+text+"<\nlen(text)="+text.length);if(text=="%s"){text=document.getSelection();}if(text==null || text.length==0){text=prompt("Highlight phrase:", "");}if(text==null || text.length==0)return;dv=document.defaultView;function searchWithinNode(node, te, len){var pos, skip, spannode, middlebit, endbit, middleclone;skip=0;if( node.nodeType==3 ){pos=node.data.toUpperCase().indexOf(te);if(pos>=0){spannode=document.createElement("SPAN");spannode.style.backgroundColor="yellow";middlebit=node.splitText(pos);endbit=middlebit.splitText(len);middleclone=middlebit.cloneNode(true);spannode.appendChild(middleclone);middlebit.parentNode.replaceChild(spannode,middlebit);++count;skip=1;}}else if( node.nodeType==1&& node.childNodes&& dv.getComputedStyle(node, null).getPropertyValue("display")!="none"){for (var child=0; child < node.childNodes.length; ++child){child=child+searchWithinNode(node.childNodes[child], te, len);}}return skip;}window.status="Searching for '"+text+"'...";searchWithinNode(document.body, text.toUpperCase(), text.length);window.status="Found "+count+" occurrence"+(count==1?"":"s")+" of '"+text+"'.";})();

--- end cut above ---

#15 A not so simple example (without alert)

by ipottinger

Saturday October 26th, 2002 11:28 PM

Reply to this message

The following bookmark is a modification of Jesse Ruderman's "highlight" bookmarket found at (LINK) . Copy and paste it to a new bookmark and specify a keyword. (I suggest keyword "highlight" with no quotes)

It can be activated in 4 ways:

1) enter the keyword alone ("highlight") into the url bar. It will prompt you for a word in the current page to highlight.

2) enter the keyword followed by phrase ("highlight simple example") into the url bar.

3) select this bookmark from the bookmark menu/personal toolbar/sidebar. It will prompt you for a word in the current page to highlight.

4) highlight some text on the current page and select this bookmark from the bookmark menu/personal toolbar/sidebar.

---begin cut below ---

javascript: (function() { var count=0, text, dv; text = "%s"; if(text == "%s") { text=document.getSelection(); } if(text == null || text.length == 0) { text = prompt("Highlight phrase:", ""); } if(text == null || text.length == 0) return; dv=document.defaultView; function searchWithinNode(node, te, len) { var pos, skip, spannode, middlebit, endbit, middleclone; skip = 0; if(node.nodeType == 3) { pos=node.data.toUpperCase().indexOf(te); if(pos >= 0) { spannode = document.createElement("SPAN"); spannode.style.backgroundColor = "yellow"; middlebit =node.splitText(pos); endbit = middlebit.splitText(len); middleclone = middlebit.cloneNode(true); spannode.appendChild(middleclone); middlebit.parentNode.replaceChild(spannode,middlebit); ++count; skip = 1; } } else if(node.nodeType == 1 && node.childNodes && dv.getComputedStyle(node, null).getPropertyValue("display") != "none") { for (var child = 0; child < node.childNodes.length; ++child) { child = child +searchWithinNode(node.childNodes[child], te, len); } } return skip; } window.status = "Searching for '" + text + "'..."; searchWithinNode(document.body, text.toUpperCase(), text.length); window.status = "Found " + count + " occurrence" + (count == 1 ? "" : "s") + " of '" + text + "'."; } )();

--- end cut above ---