How do I prevent text / html selection on mouse down?

I have a script that highlights a table cell and selects the (hidden) checkbox for a calendar. THe purpose is to create an availability template. For example, if someone is available M-F from 8-12, and then from 1-5, but unavailable for lunch, we can draw it out like this:

But I have a usability issue: sometimes (frequently) the dragable actions fail because the action of dragging the mouse causes it to highlight areas of the table. So, the browser thinks I want to move / copy / paste that area.

How do I stop the browser from highlighting these areas? I just want to turn it off while over / on the table with the mouse down?
LVL 32
Who is Participating?
Tom BeckConnect With a Mentor Commented:
Check this out. Don't know if it will be 100% cross-browser friendly but it works in my test. Tested in Safari, Firefox, and Chrome on a Mac, latest versions.
Tom BeckCommented:
Absolute position and z-index a div with a transparent background over the area you do not want users to be able to highlight. It's similar to having a modal pop up on a page and covering the underlying page with a "screen" to prevent user interaction with the page when the modal is active. The "screen" in that case is nothing more than a div with a semi-transparent background covering the entire viewport and z-indexed between the page content and the modal pop up.
DrDamnitAuthor Commented:
An elegant solution that works!

Except it kills my layout. I am using bootstrap, and the table is in a row > col > table set of divs. So, when I go from position relative to position absolute, it kills the layout. How do I fix that?

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

DrDamnitAuthor Commented:
Oh... by the way... my initial thought was: "make the height static", but that won't work because sometimes I show all hours from 8-7, and sometimes all 24 of the day... so it really needs to be position relative unless their is an alternative...
DrDamnitAuthor Commented:
Actually, this seems to not work either:

.availabilityTableDiv {
	z-index: 999;

Open in new window

Modifies my div:
But still fails to prevent selection:
uh-oh spaghettios.
Tom BeckCommented:
Position absolute on the div and position relative on the container that holds the table. The div should be outside of the table but inside the container that holds both. In other words:

<div id="tableWrapper"><!-- position:relative -->
   <div id="screen"></div><!-- position:absolute, set top and left, width and height, background:transparent, z-index above table -->

You can set the height of the screen to 100% and add display:table-cell to get it to stretch to the height of the wrapper.
Tom BeckCommented:
Sorry, after testing my idea does not seem to work fully. It will prevent the user from highlighting text in the time column if the click/drag starts inside the screened area. If the cursor starts anywhere outside the screen, you can still highlight what is inside the screen. Tested here.
DrDamnitAuthor Commented:
Doesn't work on Firefox on Linux. Will test on Windows....
DrDamnitAuthor Commented:
Never did get a solution to this...
DrDamnitAuthor Commented:
Cross browser compatibility wasn't exactly the best, but that's no fault of Tom's. That's just a browser manufacture flaw. These were all great solutions.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.