Recently during a portal dashboard designing I fetched this issue. In dashboard I have insights. On double click of insights heading I need to show insight details. While I implemented this using Jquery I found the problem during double click to expand the insights the heading part text of insights getting highlighted as a selected element.
To prevent this I did searched many solutions in Google. But finally to look into performance I decided to implement CSS hack. In the below example I am presenting the same situation what I have. Here I have two div’s with id header & description. On double click of header div I am expanding description div using show method of Jquery. But the problem is, while I double click on header div the last element of header div text label is getting highlighted. I don’t want this. I need only expand of description div.
This can be done using Jquery but to maintain performance of the app it is better to use CSS hacks in place of Jquery scripting. It improves performance. Here ondouble click event of header div I am showing the description div using Jquery show method. To prevent highlight of header div text in double click event of header div I simply added a CSS class “no-selection” to my header div. The class no-selection I implemented here is Compatible to FireFox (FF), Google Chrome & Internet Explorer 10 or above.
To run the below example just copy the following code to a Notepad file & save it as a html file. Run this to see the demo.
Using CSS how to disable selection – Demo App
<!Doctype html>
<html>
<head>
<title>How to disable selection on double Click?</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* Initially hiding the description div */
$('#description').hide();
/* On double click event of header div expanding description div */
$('#header').dblclick(function () {
$('#description').show("slow");
});
});
</script>
<style type="text/css">
.no-selection {
-webkit-user-select: none; /* for safari & chrome browsers */
-moz-user-select: none; /* for mozilla browsers */
-khtml-user-select: none; /* for konqueror browsers */
-ms-user-select: none; /* for IE10+ */
}
</style>
</head>
<body>
<div id="header" class="no-selection">Double Click Expand</div>
<div id="description">In this demo we are showing this content in the double click event of header div.</div>
</body>
</html>
