Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Making things unselectable in IE

Here is my chart I've been writing in JS:

http://jsfiddle.net/49FVb/

The css:

-moz-user-select:none;
-khtml-user-select: none;

Works fine for Chrome/FF, but in IE all the elements are still selectable which looks weird when dragging the bars around.

How can I make this unselectable in IE?

like image 976
Tom Gullen Avatar asked Dec 15 '10 09:12

Tom Gullen


2 Answers

In IE, you need the unselectable attribute in HTML:

<div id="foo" unselectable="on">...</div>

... or set it via JavaScript:

document.getElementById("foo").setAttribute("unselectable", "on");

The thing to be aware of is that the unselectableness is not inherited by children of an unselectable element. This means you either have to put an attribute in the start tag of every element inside the <div> or use JavaScript to do this recursively for an element's descendants:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));
like image 154
Tim Down Avatar answered Oct 14 '22 17:10

Tim Down


You can use Javascript to make text unselectable in all browsers:

document.onselectstart=new Function('return false');
function noselect(e){return false;}
function click(){return true;}
document.onmousedown=noselect;
document.onclick=click;

Another way is described in this SO thread: Is there a way to make text unselectable on an HTML page?

The cheapest way probably is <body onselectstart="return false">

The best way though is possibly using the following CSS:

[unselectable=on] { -moz-user-select: none; -khtml-user-select: none; user-select: none; }

and add the IE unselectable property to the elements you want to make unselectable (unselectable="on" in HTML; element.setAttribute("unselectable","on") in javascript)

Check out this nice small article about unselectable text.

like image 37
Dennis G Avatar answered Oct 14 '22 16:10

Dennis G