Posts Tagged ‘Selection’

How to find all the Nodes from the Selection

Thursday, February 18th, 2010

Today when working on a JavaScript function to get all the DOM nodes which are under selection, I was going through the compatibility tables at quirksmode.org and scratching my head and wondering why the W3C guys have made this basic job all that difficult. I must admit that playing with range is complex (specially how it can span over the multiple nodes and partially covered), but it’s definitely not as complex as mad by some of the available methods. Plus that there are many comparability differences between browsers :-)

Tired of looking at the compatibility tables, I thought to give it another search try at Google and Voilla! I found the exact code I was looking for at code.google.com:
http://groups.google.com/group/comp.lang.javascript/msg/db76484c36bde1be

The purpose of this post is that give a big thanks and credit to Elgi for sharing this code, and for keeping this useful info handy.

Disable Text Selection in HTML Page

Saturday, February 13th, 2010

I was working today on a UI fix to disable the text selection in the Dynamic Language Tools preference window during the drag & drop operation. After looking at the few samples on the web, I found that similar to many other compatibility issues, this is supported differently in IE and FireFox.

Here is one good article if you want to implement your custom drag and drop:
http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx

If you want ready made solution, I would recommend JQuery. It’s simple, small and elegant. Back to original problem, the solution discussed in the above article works very well for the IE, but for some reason it was not working in the FireFox (though the article claims that it should work in FireFox and other browsers too). Anyway, after more browsing, I found that you can disable the text selection in the FireFox by a CSS style. You can create a CSS class for like this:

.NoSelection {  -moz-user-select: none; }

So to disable selection in the drag and drop (and in general for any other operation), you can do this by the following JavaScript functions:


function disableSelection(srcElement)
{
srcElement.style.MozUserSelect = "none";
srcElement.onselectstart = function () { return false; };
}


function enableSelection(srcElement)
{
srcElement.style.MozUserSelect = "";
srcElement.onselectstart = null;
}

So now if you want to disable the text selection for all the text on the page (for example, for copy protection). Then you can do this by using a simple javascript like this:


disableSelection(document.body)

Of course, any clever programmer can disable this by using FireBug or directly executing JavaScript from URL bar, but there are very few who are that clever.