Creating Links with Mozilla's window.getSelection() MethodFriday October 25th, 2002Kenneth 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 Note that you must have a developerWorks profile to access this tutorial. You can create a free profile at the registration page. 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. you can also access the code in this tutorial without registering at the Ahoy main site: http://dev.lophty.com/ahoy/index.htm "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? 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. 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. I wouldn't call it non-standard. It has more to do with Mozilla being an application platform than *just* being a web browser. "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? It's a method that you can call on the window. It returns a string holding whatever text is currently selected. 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/Articles/Moz_Range_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/Articles/Moz_Range_Object_Article.htm">"Using the W3C DOM Level 2 Range Object as Implemented by Mozilla"</a>. 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)} 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 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! The following bookmark is a modification of Jesse Ruderman's "highlight" bookmarket found at http://www.squarefree.com/bookmarklets/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 --- 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 --- |