CSS / JS: How do I tell my page to be completely unselectable, except for stuff inside a div?


Tags: javascript,jquery,css

Problem :

I'm doing a live editing thing, but only want certain portions of the page to be selectable. How do I disable selection on everything except within a single div?



Solution :

Perhaps the CSS property user-select ?

cross-browser :

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

Doc :

http://www.w3.org/TR/2000/WD-css3-userint-20000216.html#user-select

Perhaps you could add the following listeners to the divs / sections you want to prevent selection ?

window.onload = function() {
  var element = document.getElementById('content');
  element.onselectstart = function () { return false; } // ie
  element.onmousedown = function () { return false; } // the rest
}

EDIT: See comments


    CSS Howto..

    How to get the profile pic aligned center?

    How to get the value of css property with jQuery

    How to achieve pages like a math notebook in css?

    Textarea doesn't show newline in IE

    How to change the size of the radio button using CSS?

    css/jquery - how to hide last row of floated elements if not even

    how to change CSS on the youtube subscribe widget

    How to use CSS to show rotated text in a table cell

    How should I crop the image at client side using jcrop and upload it?

    How to remove the particular CSS style (set through CSS file) from an HTML list

    How to hide main menu while showing sub-menu in css

    How can I make my CSS code compatible with all browsers? [closed]

    How can I place HTML in a JavaScript string and have it validate?

    How to compile or convert sass / scss to css with node-sass (no Ruby)?

    Dynamic HTML 3 layers nested quotes - how to do?

    How can I conform to a 4 nest rule?

    How to make a HTML element fill a dynamically sized container using CSS

    How do you style an android app?

    How to make Bootstrap container auto for height?

    How do I get text in my html page to display features using the css stylesheet?

    How to position and style blockquote in css

    How to make my div's shrink dynamically, and not hide certain content?

    How to add class CSS after ng-click to parent element?

    CSS / Javascript: hidden div does not take full width after being shown

    how to trigger “onMouseOut” from click

    How to create CSS heart? / Why is this CSS creating a heart shape?

    how can resize dynamically the logo of the header?

    How to do CSS attribute selector with title~= that has to contain a space?

    Wordpress how to tell my css version

    How to enable HTML content on top of Flash content without the frame rate dropping?