I'm currently working on a package for Macaulay2 that allows the visualization and editing of graphs. This happens in a browser, and the program generates a Macaulay2 constructor for the graph as you make edits, however there has been a persistent problem, we are unable to select the text that gets generated.
I am somewhat new to html/css and I'm pretty sure the problem is not in our javascript. When we checked out old git commits, it appeared the problem began after I added the popupMenu and tried toggling visibility changing the css attribute display to "none"/"inline" to "hidden"/"visible", however i tried both switching back and removing the popupMenu completely and I was still unable to highlight text. I also tried adding the following lines of code to my css to change z-index and ability to highlight text, to no avail.
#constructorString {
-o-user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
user-select: text;
z-index: 100;
}
#incString {
-o-user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
user-select: text;
z-index: 100;
}
#adjString {
-o-user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
user-select: text;
z-index: 100;
}
the complete source is at http://www.elliotkorte.com/visGraph-template.html
i suspect i need some kind of padding around either the popupMenu, the canvasElement3d, or the paragraph tags, however adding "padding-bottom: 30px;" to the css for all questionable elements did not work.
thank you for the help!
Related
I'm writing a little application with Apache-Cordova. I have two divs lookings like this (and the little yellow one):
As far everything is fine, but when I start adding click/mouse Eventhandlers to my green divs, they get blueish marked as far as I touch them (and the click doesn't trigger, when I am holding them too long).
<p id="GreenDiv" onclick="GreenDiv_OnClick()">
I've tried these in CSS so far, but this won't work:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Does anybody know how to turn that marking off?
The answer is this part of css I've found after much more googling:
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
I'm learning HTML/CSS right now, so I did this little cookie-clicker lookalike for fun : http://jsfiddle.net/Zerh/6kb87sp9/
My problem is : if I click too fast on any button (double click) it highlights a selection.
I used the following CSS for hiding the highlight :
::selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
It seems to work on Firefox/Edge but I can't get it to work on Chrome.
I found this old topic : How to disable text selection highlighting using CSS?, but it's 6 years old and doesn't seem to work for me.
I think this will disable on any element
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
I think this will solve your problem you just need to add the class "noselect" to the element you want
I'm currently using:
*{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Go to http://jsfiddle.net/KyF5x/ and click below the list, see that this highlights the text... which can't be un-highlighted. Reload the page, now try ctrl+a, see that this will also highlight the text.
The above doesn't occur in Chrome, Safari or IE 10.
Disclaimer: I'm using Firefox 18
As a temporary answer, the fix is the apply the CSS to the individual 'unselectable' elements. However i'd love to see someone come up with a document-wide fix.
li{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
See: http://jsfiddle.net/KyF5x/1/
A use case for having document-wide unselectable text is more obvious in the domain of web apps, rather than typical websites.
As a complement to Jack's answer - even in 2018, firefox does not support user-select, but does support moz-user-select. I chose a cut down version of what the fiddle in the accepted answer does:
/* stop the user selecting page structure with the mouse */
html, body, div, a, i, button, select, option, optgroup, hr, br {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
This is for a web app where we don't use any other elements, all page structures are divs, even titles etc, and we didn't want to disallow selection in input or textarea.
This was the only place in our entire web 500k lines of code app where we've had to use -moz- !!
I'm pretty new to Phonegap. I have a problem where the default css used in a clean Phonegap project won't allow input into text fields. I narrowed it down to one line of CSS:
* {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
}
The problem line is:
-webkit-user-select: none;
This can be found in www/index.css.
Seems like completely disabling the input field isn't the desired effect.
I've also posted this problem 2 times before but it was closed, not sure why... My issue was closed due to not being a common problem. Well, all I can say about that is, I guess some users at stackoverflow don't think CSS 3, Phonegap, HTML 5, and -webkit-user-select: is a common situation. I'd beg to differ.
However I can see this issue also posted here, also causing problems in Safari: User select:none causes input field to be inaccessible on Safari Although slightly different.
My current solution is this:
-webkit-user-select: text; /* change 'none' to 'text' */
Just still curious as to what is the most elegant solution to enable the text input, but still maintain some of this copy and past functionality that Phonegap is trying to achieve. Thanks!
Try adding this to your css:
input {
-webkit-user-select: auto !important;
}
This will override the text selection disabling that you have set on every single element (via the * selector) for input fields.
Just add rules to css in this way:
*:not(input,textarea) {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
user-select can cause issues in elements with contenteditable="true" so better to add that too
[contenteditable="true"] , input, textarea {
-webkit-user-select: auto !important;
-khtml-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
-o-user-select: auto !important;
user-select: auto !important;
}
http://jsfiddle.net/QKJfW/
I want the cursor to remain the cursor:move; cursor even when clicking and dragging on the page. As you can see now you get an i-bar like you are trying to select text.
In my real app it is actually a custom cursor.
Is that a possibility?
Put these styles on the thing you want to be non selectable:
http://jsfiddle.net/QKJfW/1/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
That should take care of your issue.
See: How to disable text selection highlighting using CSS?