Make div non selectable behind the overlay

Question

I want to show the overlay over the div. After showing overlay i don't want to allow to select that background div. But when i double click on the over lay that background div is in selectable state. Can you please any one look into this. http://jsfiddle.net/fkWn5/2/

Answer 1

Solution

You can do this by using the user select rules in css and adding this class to the background element once turning on the overlay:

css:

.unselectable { 
-moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

adding the class with jquery:

$('#backgrounddiv').addClass('unselectable');

jsfiddle example:

• http://jsfiddle.net/ghm2N/

References:

• .addClass
• question with unselectable css

Answer 2

$(document).ready(function() {
    $('#search_name').on('keyup',
    function() {
        search_name = $(this).val();
        $("#names li:contains('" + search_name + "')").addClass('highlight').siblings().removeClass('highlight');
    });
});