Disable Selction on Menu Items with this jQuery Extension
Jan 20th, 2009
Every now and then I encounter menus or draggable/droppable elements that when clicked, get unintentionally selected. This results in CSS buttons that don’t behave like buttons but more like clickable text. If you really want to fine tune your user experience and have snazzy CSS buttons then you read on.
The following screen capture highlights the differences in the two menus. The second one looks much better especially if it can stay that way.
If you are using jQuery, you can easily extend the core by adding a disableSelection function like so:
jQuery.fn.extend({
disableSelection : function() {
this.each(function() {
this.onselectstart = function() { return false; };
this.unselectable = "on";
jQuery(this).css('-moz-user-select', 'none');
});
}
});
Usage is easy:
// disable selection on all button objects
$('.button').disableSelection();
This will disable selection on all elements with the button class <div class="button">Wall Papers</div>. Additionally you could also add .button { -moz-user-select: none } to your CSS for added cushioning.
Thanks for this nice and clean solution, works like a charm!
Clean, indeed. Worked at first attempt.
Thanks!
or you could add 3 simple lines to your stylesheet
#map {
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;}
Since Safari 3+, Webkit has used a different synax (docs):
-webkit-user-select
… and I had to explicitly
return, or I got errors, so –disableSelection : function() {
return this.each(function() {
...
It works well. Thanks for this extension.