Solved

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

Posted on 2015-02-19
10
70 Views
Last Modified: 2016-02-25
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:

Selection-014.png
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.

Selection-013.png
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?
0
Comment
Question by:DrDamnit
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
10 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40619014
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.
0
 
LVL 32

Author Comment

by:DrDamnit
ID: 40619553
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?

Before:
Before
After:
after
0
 
LVL 32

Author Comment

by:DrDamnit
ID: 40619555
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...
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 32

Author Comment

by:DrDamnit
ID: 40619567
Actually, this seems to not work either:

.availabilityTableDiv {
	z-index: 999;
	position:absolute;
	height:550px;
}

Open in new window


Modifies my div:
asdf
But still fails to prevent selection:
uh-oh spaghettios.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40619694
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 -->
   <table>
   </table>
   <div id="screen"></div><!-- position:absolute, set top and left, width and height, background:transparent, z-index above table -->
</div>

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.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40619748
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.

http://jsfiddle.net/tommyBoy/f8cjc7o7/
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40619974
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.

http://jsfiddle.net/tommyBoy/f8cjc7o7/3/
0
 
LVL 32

Author Comment

by:DrDamnit
ID: 40644485
Doesn't work on Firefox on Linux. Will test on Windows....
0
 
LVL 32

Author Comment

by:DrDamnit
ID: 40692796
Never did get a solution to this...
0
 
LVL 32

Author Closing Comment

by:DrDamnit
ID: 40916654
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.
0

Featured Post

Enroll in July's Course of the Month

July's Course of the Month is now available! Enroll to learn HTML5 and prepare for certification. It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

622 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question